熟悉一下不常用的CSS选择器

兄弟选择器

<template>
  <div>
    <div class="test">
      <span class="base"></span>
      <span class="target"></span>
      <span class="target"></span>
    </div>
  </div>
</template>
<script lang='ts' setup>
</script>
<style lang='less' scoped>
.test{
  span{
    display: inline-block;
    width: 100px;
    height: 100px;
    background: yellow;
  }
}
</style>

element+element 

选择器用于选取第一个指定的元素之后（不是内部）紧跟的元素。

.base+.target{
  background: red;
}

element1~element2

element1 之后出现的所有 element2

.base~.target{
  background: red;
}

属性选择器

[attribute~=value]

包含指定词汇，就是说属性需要时一个英语句子，选取之可以是句子中的某个单词，若属性值是数字跟中文，全部写也是可以选择的。 

选择器用于选取属性值中包含指定词汇的元素。

<template>
  <div name="my name is wgh" age="18" hobby="睡觉打游戏"></div>
</template>
<script lang='ts' setup>
</script>
<style lang='less' scoped>
div{
  width: 50px;
  height: 50px;
  background: #333333;
}
[name~=wgh]{//[name~='name']这样写也行
  background: red;
}

[hobby~='睡觉打游戏']{
  background: red;
}
</style>

[attribute|=value]

选择器用于选取属性值以指定值开头的元素。

注释：该值必须是整个单词，比如 lang="en"，或者后面跟着连字符，比如 lang="en-us"。

[attribute$=value]

选择器匹配属性值以指定值结尾的每个元素。

注释：该值必须是整个单词，比如 lang="en"，或者后面跟着连字符，比如 lang="en-us"。

<template>
  <div name="my-name-is-wgh" age="18" hobby="睡觉打游戏"></div>
</template>
<script lang='ts' setup>
</script>
<style lang='less' scoped>
div{
  width: 50px;
  height: 50px;
  background: #333333;
}

[name|='my']{
  background: red;
}

[name|='wgh']{
  background: red;
}
</style>

[attribute^=value]

选择器匹配属性值以指定值开头的每个元素。

<div name="my-name-is-wgh" age="18" hobby="睡觉打游戏" href="https://baidu.com"></div>

[href^=http]{
  background: blue;
}

[hobby^='睡觉']{
  background: red;
}

[attribute*=value]

选择器匹配属性值包含指定值的每个元素。

不管属性值是什么，只要包含就有效

[href*='//']{//无效
  background: palevioletred;
}

[name*='-']{//无效
  background: yellow;
}

 伪类选择器

伪类选择器很多但是好理解，贴个表格经常回顾

 :active 就是鼠标点击时的样式

:fullscreen 选择处于全屏模式的元素。

<template>
  <div>
    <div class="fullscreenTest" @click="fullscreen" ref="fullscreenTest">全屏展示</div>
  </div>
</template>
<script lang='ts' setup>
  const fullscreen = (( ) => {
    (document.querySelector('.fullscreenTest') as HTMLElement).requestFullscreen();
  })
</script>
<style lang='less' scoped>
.fullscreenTest:fullscreen{
  background: red;
}
</style>

ele ele:first-of-type

<template>
  <div>
    <div class="base">
      <div>1</div>
      <div>2</div>
      <div>3
        <div>3-1</div>
      </div>
      <div>4</div>
      <div>5</div>
    </div>
  </div>
</template>
<style lang='less' scoped>
.base div:first-of-type{
  background: red;
}//这里1，3-1会被选中
</style>

input:in-range 选中在输入范围之内的元素

<template>
  <div>
      <input type="number" min="5" max="10" v-model="num">
      <button @click="num++">num++</button>
    </div>
  </div>
</template>
<script lang='ts' setup>
  import { ref } from 'vue';
  const num = ref(4)
</script>
<style lang='less' scoped>
input:in-range{
  color: red;
}
</style>

:indeterminate 选择处于不确定状态的 input 元素。

<template>
  <div>
    <div class="indeterminate">
      <input type="radio" />
      <input type="checkbox" />
    </div>
  </div>
</template>
<script lang='ts' setup>
  onMounted(() => {
    (document.querySelector('input[type=checkbox]').indeterminate as HTMLElement) = true
  })//CheckBox默认是没有不确定状态的，只有indeterminate属性设置为出才有
//<input type="checkbox" indeterminate />这样写也有
</script>
<style lang='less' scoped>
.indeterminate{
  input:indeterminate{
    box-shadow: 0 0 1px red;
  }
}
</style>

:invalid 选择器用于选择值无效的表单元素，其值根据元素设置未通过验证。

<template>
  <div>
    <div class="invalid">
      <input type="email" value="supportEmail">
      <input type="week" value="supportEmail">
    </div>
  </div>
</template>
<style lang='less' scoped>
.invalid{
  input:invalid{
    color: red;
  }
}
</style>

:lang(language) 选择器用于选取带有以指定值开头的 lang 属性的元素。

:nth-child(n) 选择器匹配属于其父元素的第 N 个子元素，不论元素的类型。

n 可以是数字、关键词或公式。

Odd 和 even 是可用于匹配下标是奇数或偶数的子元素的关键词（第一个子元素的下标是 1）

.optional{
  input:optional{
    box-shadow: 0 0 1px red;
  }
}

.inputAttr{
  input::placeholder{//选择已规定 "placeholder" 属性的 input 元素。
    color: yellow;
  }
  input:read-only{//选择已规定 "readonly" 属性的 input 元素
    box-shadow: 0 0 1px red;
  }
  input:read-write{//选择未规定 "readonly" 属性的 input 元素。
    box-shadow: 0 0 1px red;
  }
  input:read-write{//选择未规定 "readonly" 属性的 input 元素。
    box-shadow: 0 0 1px red;
  }
  input:required{//选择已规定 "required" 属性的 input 元素
    box-shadow: 0 0 1px blue;
  }
}

.selection::selection{//选择用户已选取的元素部分。
  color: #5a9bff;
  background: yellow;
}

.visited{
  a:visited{
    color: blueviolet;
  }
}