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

Posted 2022-07-04 GHUIJS

兄弟选择器

<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;