韩旭前端开发 2023-12-08

超详细的CSS选择器整理

文章目录隐藏

一、常用的选择器

1.元素选择器
2.类选择器(class 选择器)
3.id 选择器
4.通配符选择器

二、群组选择器
三、关系选择器

1. 后代选择器
2. 子代选择器
3.相邻兄弟选择器
4. 通用兄弟选择器
5.案例

四、属性选择器
五、伪类选择器

1.常用的伪类选择器
2.否定伪类
3.元素的伪类

六、伪元素选择器
结语

前端 CSS 选择器虽然不难，但是随着时间的推移，能够完整的说出来，我想没有几个，所以今天细细的总结一下，可以说是超详细的一版，不仅是自己的一个学习总结，也为需要的人提供参考。

一、常用的选择器

1.元素选择器

语法 : 标签名{}

作用 : 选中对应标签中的内容。

例:p{} , div{} , span{} , ol{} , ul{} ……

2.类选择器(class 选择器)

语法 : .class 属性值{}

作用 : 选中对应 class 属性值的元素。

例子 : 段落 1

段落 1

段落 1

.A{} , .B{} , .C{} ……

注意：class 里面的属性值不能以数字开头，如果以符号开头，只能是’_’或者’-‘这两个符号，其他的符号不可以，一个 class 里面可以有多个属性值。

3.id 选择器

语法 : #id 属性值{}

作用 : 选中对应 id 属性值的元素。

例子 :

<p id="A">段落 1</p>

<p id="B">段落 1</p>

<p id="C">段落 1</p>

#A{} , #B{} , #C{} ......

注意：id 的属性值只能给 1 个,可以重复利用,不能以数字开头。

4.通配符选择器

语法 : *{}

作用 : 让页面中所有的标签执行该样式,通常用来清除间距。

例子 :

*{

margin: 0; //外间距

padding: 0; //内间距

}

二、群组选择器

语法 : 选择器 1,选择器 2,选择器 3...{}

作用 : 同时选中对应选择器的元素。

例子 :

<style>
 
    /* 用群组的目的是为了简化代码量 */
    div,p,h3,.li2{
      font-size: 30px;
    }
    div,.li2,.text3{
      color: red;
    }
    p{
      color: blue;
    }
    h3{
      color: pink;
    }
 
</style>
 
<div>盒子 1</div>
<p>段落 1</p>
<p>段落 2</p>
<h3>文本标题 3</h3>
<h3 class="text3">文本标题 3</h3>
<ol>
  <li>有序列表</li>
  <li class="li2">有序列表</li>
  <li>有序列表</li>
</ol>

效果如下：

三、关系选择器

1. 后代选择器

后代选择器也叫包含选择器，祖先元素直接或间接的包含后代元素。

例子：

<style>
  /* 后代选择器(包含选择器),选择到的是 box 下面的所有后代 p */
  .box p{
      width: 200px;
      height: 200px;
      background-color: yellow;
   } 
</style>
 
 
<div class="box">
    <p>0000</p>
    <div>
        <p>11111</p>
        <p>22222</p>
    </div>
    <div class="box2">
        <p>333</p>
    </div>
    <p>444</p>
</div>

效果如下：

<style>
  /* 选择到的是 box 的后代 div 的后代 p */
  .box div p {
      width: 200px;
      height: 200px;
      background-color: yellow;
   }
</style>
 
<div class="box">
    <p>0000</p>
    <div>
      <p>11111</p>
      <p>22222</p>
    </div>
    <div class="box2">
      <p>333</p>
    </div>
    <p>444</p>
</div>

效果如下：

2. 子代选择器

父元素直接包含子元素，子元素直接被父元素包含。

<style>
   /*子选择器选中的是.box 下所有的儿子 p
   .box>p{
      width: 200px;
      height: 200px;
      background-color: yellow;
    } 
</style>
 
<div class="box">
   <p>0000</p>
   <div>
      <p>11111</p>
      <p>22222</p>
   </div>
   <div class="box2">
      <p>333</p>
   </div>
   <p>444</p>
</div>

效果如下：

<style>
 
     /*子选择器选中的是.box 下所有儿子 div 中的儿子 p
     .box>div>p{
      width: 200px;
      height: 200px;
      background-color: yellow;
    }
 
</style>
 
<div class="box">
    <p>0000</p>
    <div>
      <p>11111</p>
      <p>22222</p>
    </div>
    <div class="box2">
      <p>333</p>
    </div>
    <p>444</p>
</div>

效果如下：

3.相邻兄弟选择器

<p>000</p>
<div class="box">盒子 1</div>
<p>111</p>
<p>222</p>
<p>333</p>
<div>
    <p>44444</p>
</div>
<p>5555</p>

以上面的代码为例，除了内容为’44444’的 p 标签外，其余的所有元素均为兄弟元素，而相邻兄弟元素就是紧挨着的两个标签。

给上述代码加上内部修饰样式：

<style>
   /* 相邻兄弟,会选择到 box 后面紧挨着的 p,那么就是内容为 111 的 p 标签 */
    .box+p{
      width: 200px;
      height: 200px;
      background-color: yellow;
    }
</style>

效果如下：

4. 通用兄弟选择器

<p>000</p>
<div class="box">盒子 1</div>
<p>111</p>
<p>222</p>
<p>333</p>
<div>
    <p>44444</p>
</div>
<p>5555</p>

同样以上面的代码为例，添加一段内部修饰样式：

<style>
   /*通用兄弟选择器,会选择到.box 后面所有的兄弟 p,那么就是除了内容为'44444'以外的所有 p*/
   .box~p{
      width: 200px;
      height: 200px;
      background-color: yellow;
    }
</style>

效果如下：

5.案例

以上面的代码为例，现在有一个需求，想要内容为’5555’的标签自己变换样式，其余的都不变,我们先来分析一下，这个标签很明显，单独选择相邻兄弟元素或者通用兄弟元素都是无法实现只改变 p5 这个标签，先看看 p5 标签在 .box 后面,而 .box 后面只有一个 div 标签,刚好 p5 就是这个 div 的兄弟元素，代码如下：

<style>
  .box~div+p{
      width: 200px;
      height: 200px;
      background-color: yellow;
    }
</style>

效果如下：

四、属性选择器

属性选择器一共有 7 种写法

某某[属性]
某某[属性=属性值]
某某[属性^=属性值]
某某[属性$=属性值]
某某[属性*=属性值]
某某[属性~=属性值]
某某[属性|=属性值]

举个小案例:

<style>
.demo {
  width: 300px;
  border: 1px solid #ccc;
  padding: 10px;
  overflow: hidden;
  margin: 20px auto;
}

.demo a {
  float: left;
  display: block;
  height: 50px;
  width: 50px;
  border-radius: 10px;
  text-align: center;
  background: #aac;
  color: blue;
  font: bold 20px/50px Arial;
  margin-right: 5px;
  text-decoration: none;
  margin: 5px;
}
</style>

<div class="demo">
  <a rel="nofollow" href="https://mybj123.com/links?url=aHR0cDovL3d3dy5teWJqMTIzLmNvbQ==" target="_blank" class=" links item first" id="first" title="link">1</a>
  <a href="" class="links active item" title="test website" target="_blank" lang="zh">2</a>
  <a href="sites/file/test.html" class="links item" title="link-1 aa" lang="zh-cn">3</a>
  <a href="sites/file/test.png" class="links item" target="_balnk" lang="zh-tw">4</a>
  <a href="sites/file/image.jpg" class="links item" title="link-23 aa">5</a>
  <a href="mailto:aa@hotmail" class="links item" title="website link" lang="zh">6</a>
  <a href="/a.pdf" class="links item" title="open the website" lang="cn">7</a>
  <a href="/abc.pdf" class="linksitem" title="close the website" lang="en-zh">8</a>
  <a href="abcdef.doc" class="links item" title="http://www.mybj123.com">9</a>
  <a href="abd.doc" class="linksitem last" id="last">10</a>
</div>

以上代码的默认样式是这样的:

现在在 style 标签内写入 1~7 个方法的修饰样式：

<style>
  /* 属性选择器的权重是 0010	 */
  /* 写法 1 某某[属性] 选择到 a 标签且有 title 属性的变*/
  /* a[title]{
    background: yellow;
  } */
  /* a[lang][target]{
    background: yellow;
  } */
  /*重点: 写法 2: 某某[属性=属性值] 选择到有某某标签有指定属性且属性值必须一摸一样的也有的多一个空格都不行 */
  /* a[lang="zh"]{
    background: yellow;
  } */
  /* a[title="this is a link"]{
    background: yellow;
  } */
  /* class 名字是 item 的,且有属性 lang 且属性值必须一模一样是 zh-cn 的 */
  /* .item[lang="zh-cn"]{
    background: yellow;
  } */
  /* id 是 last 且有 title 属性且有 class 属性,属性值只能是 links 的变 */
  /* #last[title][class="links"]{
    background: yellow;
  } */

  /* 写法 3: 某某[属性^=属性值] */
  /* a 标签有 class 属性且属性值是 li 开头的 */
  /* a[class^=" li"]{
    background-color: yellow;
  } */
  /* a[title^="this"][lang]{
  background-color: yellow;
  } */
  /* 写法 4 某某[属性$=属性值] */
  /* a 标签有 class 属性且属性值结尾是 t 的变 */
  /* a[class$="t"]{
    background-color: yellow;
  }  */
  /* a[href$=".pdf"]{
    background-color: yellow;
  }
  a[href$=".doc"]{
    background-color: red;
  }
  a[href$=".png"]{
    background-color: green;
  } */

  /* 写法 5 某某[属性*=属性值] */
  /* 选择到 a 标签且有 href 属性且只要有字母 b 就可以 */
  /* a[href*="b"]{
    background-color: green;
  } */
  /* 写法 6 某某[属性~=属性值] */
  /* 选择到的是 a 标签且有 class 属性,且属性值有完整的 itme 词的变 */
  /* a[class~="item"]{
    background-color: green;
  } */
  /* 写法 7 某某[属性|=属性值] */
  /* 这个是选择到有 a 标签,且有属性 title,且属性值只有 1 个是 link 的或者属性值有多个但是得是 link-开头的变 */
  a[title|="link"]{
    background-color: green;
  }
</style>

现在默认展示的是第七个方法(需要看其他 6 种方法的同学自行打开其余 6 种方法的注释)，现在选择到的是有 a 标签，且有属性 title，且属性值只有 1 个是 link 的或者属性值有多个，但是得是link-开头的变，那么就是第一，第三和第五个，打开页面看看，效果如下：

五、伪类选择器

1.常用的伪类选择器

:first-child 第一个子元素
:last-child 最后一个子元素
:nth-child() 选中第 n 个元素

关于:nth-child()的特殊值(括号内的内容可以填写以下几种)：

n 第 n 个 n 的范围 0 到正无穷（全选）
even 或 2n 选中偶数位的元素
odd 或 2n+1 选中奇数位得到元素

以 child 结尾的是在所有元素中选择。

:first-of-type 第一个子元素
:last-of-type 最后一个子元素
:nth-of-type() 选中第 n 个元素

以 type 结尾的是在相同元素中选择。

<style>
  /* box 下面的第 1 个子元素变,也就是 p1 变 */
  .box   :first-child{
    border: 2px solid blue;
  }
  /* box 下面的第 1 个子元素是 li 的时候变*/
  .box   li:first-child{
    border: 2px solid blue;
  } 
  .box   p:first-child{
    border: 2px solid blue;
  } 
  /* box 下面的最后 1 个子元素变,也就是 p6 变 */
  .box   :last-child{
    border: 2px solid blue;
  }
  .box   p:last-child{
    border: 2px solid blue;
  }
  /* box 下面的第 3 个子元素变 */
  .box  :nth-child(3){
    border: 2px solid blue;
  }
  .box  li:nth-child(3){
    border: 2px solid blue;
  }
  /* box 下面的第 7 个子元素是 p 的变 */
  .box  p:nth-child(7){
    border: 2px solid blue;
  }  
  .box  p:nth-child(9){
    border: 2px solid blue;
  } 
  /* n 是从 0 开始的数列 把 n=0 开始往 n+3 里面计算就可 */
  /* n=0  n+3=3 */
  /* n=1  n+3=4 */
  /* n=2  n+3=5... 结果就是第 3,4,5,6,7,8,9...变*/
  .box  :nth-child(n+3){
    border: 2px solid blue;
  }
  /* box 下面的第 3,4,5,6,7,8,9...是 li 的时候变 */
  .box  li:nth-child(n+3){
    border: 2px solid blue;
  }
  /* 表示的意思是 box 里面的第 3,2,1 个变 */
  .box  :nth-child(-n+3){
    border: 2px solid blue;
  }
  /* 表示的意思是 box 里面的第 3,2,1 个是 p 变 */
  .box  p:nth-child(-n+3){
    border: 2px solid blue;
  }
  /* 表示的意思是 box 里面的第 2,4,6,8,10,12.... 偶数的 */
  .box :nth-child(2n){
    border: 2px solid blue;
  }
  .box :first-child{
    border: 2px solid red;
  }
  /* 表示的意思是 box 里面的第 2,4,6,8,10,12....是 li 的变 偶数的 */
  .box li:nth-child(2n){
    border: 2px solid blue;
  }
  /* 2n 和 even 都是偶数的意思 */
  .box li:nth-child(even){
    border: 2px solid blue;
  }
  /* 表示的意思是 box 里面的第 1,3,5,7,9...个变也就是奇数变 */
  .box :nth-child(2n+1){
    border: 2px solid blue;
  }
  .box :nth-child(odd){
    border: 2px solid blue;
  }
  /* 5  7  9 .... */
  .box :nth-child(2n+5){
    border: 2px solid blue;
  }

  .box :nth-last-child(2n){
    border: 2px solid blue;
  }

  .box :only-child{
    border: 2px solid blue;
  }
</style>
  
<ul class="box">
  <p>1111</p>
  <p>222</p>
  <li>无序列表的 li1</li>
  <p>33333</p>
  <li>无序列表的 li2</li>
  <li>无序列表的 li3</li>
  <p>44444</p>
  <li>无序列表的 li4</li>
  <p>555</p>
  <li>无序列表的 li5</li>
  <p>666</p>
</ul>

效果如下：

<style>
  /* box 下面的第 1 个子元素变,从结构看第 1 个是 p,所以 p1 变了 */
  .box  :first-child{
    border: 2px solid blue;
  }
  /* box 下面的同类型的第 1 个变,从目前的结构上看 ul 下面有 2 个类型,1 个是 li 和 1 个是 p 所以 li 类型和 p 类型的第 1 个都变了 */
  .box  :first-of-type{
    border: 2px solid blue;
  }
  /* -child 和-type 的区别  child 只看某个父元素下面的子元素  -type 看的某父元素下面的同类型的子元素  child 就是问班级有多少人 type 就是问班级有多少女生和多少男生 */

  .box  :last-of-type{
    border: 2px solid blue;
  }

  .box  p:last-of-type{
    border: 2px solid blue;
  }
  /* box 里面的 p 的第 2 个 */
  .box p:nth-of-type(6){
    border: 2px solid blue;
  }
  /* 选择 box 中 li 里面的第偶数个 */
  .box li:nth-of-type(2n){
    border: 2px solid blue;
  }

  .box li:nth-of-type(2n+1){
    border: 2px solid blue;
  }

  .box li:nth-last-of-type(2){
    border: 2px solid blue;
  }
  /* box 里面的只有 1 个子元素是 li 的时候变 */
  .box li:only-child{
    border: 2px solid blue;
  }
  /* box 里面的 li 只有 1 个的时候变 */
  .box li:only-of-type{
    border: 2px solid blue;
  }

  .box :nth-last-child(2){
    border: 3px solid blue;
  }

  .box :nth-last-of-type(2){
    border: 3px solid blue;
  }
</style>
   
<ul class="box">
  <p>1111</p>
  <p>222</p>
  <li>无序列表的 li1</li>
  <p>33333</p>
  <li>无序列表的 li2</li>
  <li>无序列表的 li3</li>
  <p>44444</p>
  <li>无序列表的 li4</li>
  <p>555</p>
  <li>无序列表的 li5</li>
  <p>666</p>
</ul>

效果如下：