这 30 类 CSS 选择器，你必须理解！

Posted 2020-06-21 彼岸时光

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了这 30 类 CSS 选择器，你必须理解！相关的知识，希望对你有一定的参考价值。

　　CSS 选择器是一种模式，用于选择需要添加样式的元素。平时使用最多也是最简单的就是 #id、.class 和标签选择器，在 CSS 中还有很多更加强大更加灵活的选择方式，尤其是在 CSS3 中，增加了很多新的选择器，使得选择元素更加便捷，所以必须理解这些选择器，只有先理解了，多用几次，自然而然就记住了。

**1、* 【CSS2】**

　　通配符，选择页面所有元素。

1 *{
2     margin:0;
3     padding:0;
4 }

　　上面代码的作用是把页面上所有元素的内外边距设置为 0，这是最基本的清除默认 CSS 样式的方法。在平时练习时使用这个没问题，但在实际的项目中不建议使用，可以使用世界级专家 Eric Meyer 的 CSS Reset 方案来重置浏览器默认样式，也可以使用 Normalize.css， CSS reset 和 Normalize 存着着根本理念上的差异，前者是将所有浏览器自带的样式重置掉，以确保各浏览器渲染的一致性，而后者则是尽量保留浏览器的默认样式，是一个可定制的 CSS 文件，使浏览器渲染所有元素更加一致，符合现代标准，Bootstrap 就使用了该方案。也可以百度参考各大网站 CSS 代码初始化样式。

　　* 也可以用来选择某元素的所有子元素。

1 #box *{
2     background-color:blue;
3 }

　　上面的代码，会选则 ID 为 box 下的所有元素。

2、#ID 【CSS1】

　　ID 选择器，选择具有指定 id 属性的元素。

1 #content{
2     width:960px;
3     margin:0 auto;
4 }

　　ID 就像身份证一样，具有唯一性，所以 ID 选择器是 CSS 中效率最高的选择器。

3、.Class 【CSS1】

　　类选择器，选择具有指定类的所有元素。

1 .main{
2     color:red;
3 }

　　class 选择器和 id 选择器不同的是，一个页面可以有多个 class，并且 class 可以在不同的标签中使用，如果样式相同的话。当你想对多个元素设置样式时就可以使用 class，而只是对某个特定的元素设置样式那就使用 id。

　　(1)、什么时候使用 ID，什么时候使用 Class

　　ID 和 Class 最主要的区别就在于 ID 不能重复，只能使用一次，一个 ID 只能用于一个标签。而 Class 可以重复使用，同一个 Class 可以定义在多个标签上，且一个标签可以定义多个 Class。简单理解，就是 ID 只能调用一次，而 Class 可以调用无数次。

　　在同一个页面中只出现一次的块可以使用 ID 定义，比如网站的布局：头部、主体、侧边栏和页脚等。ID 主要用于特殊的元素，针对性强。

　　而 Class 是一个集体声明，当相同样式应用于很多元素时，则使用 Class 定义。在一个网站中，需要调用的公用类比较多，所以使用 Class 可以写一些公用类，在使用时调用就可以了。

　　总结：只有一个独立样式的元素用 ID，而多个元素拥有相同样式时用 Class。

　　另外，document 的方法中 getElementById() 这个方法只能调用指定 ID 属性的元素，因此当页面中用到 JS 或者要动态调用对象时，就要用到 ID。当然也可以通过标签名、name 属性获取元素，还可以通过元素的 className 来获取元素，所以还是要根据实际的需求来决定使用哪个。如果一个元素使用 JS 进行交互，在命名时，可以在名称前边加上一个 J，这样能增强代码的可读性，在页面量大的情况下，便于调用，但不能使用加了 J 的名称来定义 CSS 样式。

4、X 【CSS1】

　　标签选择器，选择指定标签名称的所有元素。

1 a{
2     text-decoration:none;
3 }

　　如果你想让页面上所有指定标签的样式改变，可以直接使用标签选择器。

5、X, Y 【CSS1】

　　分组选择器，在样式表中具有相同样式的元素，就可以使用分组选择器，把所有元素组合在一起，元素之间用逗号分隔，这样只需要定义一组 CSS 声明。

1 h1, h2, h3, h4, h5, h6 ,p{
2     color:red;
3 }

　　上面的代码，选择页面上所有 h1 - h6 元素以及段落。

6、X Y 【CSS1】

　　后代选择器，选择指定元素内部的所有子元素，包括子元素、孙元素、曾孙元素等等。

1 li a{
2     text-decoration:none;
3 }

　　如果你想选择更加具体的元素，就可以使用后代选择器。比如：并不需要去掉页面中所有链接的下划线，而只是去掉所有列表链接的下划线，这时就可以使用后代选择器。

7、X > Y 【CSS2】

　　子元素选择器，选择指定父元素的所有直接子元素，不包括孙元素、曾孙元素等等。

1 div > ul{ 
2     border:1px solid black;
3 }

　　如果不希望选择任意的后代元素，而只是选择某个元素的子元素，那么就使用子元素选择器。

　　X Y 和 X > Y 的区别：前者作用于指定元素的所有后代元素，而后者只作用于指定元素的第一代后代，即直接子元素。

8、X + Y 【CSS2】

　　相邻兄弟选择器，选择相同父元素下，紧跟着指定元素之后的兄弟元素。

1 ul + p{
2     color:red;
3 }

　　上面的代码，选择所有相同父元素下紧跟着 ul 元素之后的第一个 p 元素。

9、X ~ Y 【CSS3】

　　普通兄弟选择器，选择相同父元素下，指定元素后的所有兄弟元素。

1 ul ~ p{
2     color:red;
3 }

　　上面的代码，选择所有相同父元素下 ul 元素之后的每一个 p 元素。

　　与相邻兄弟选择器不同，普通兄弟选择器，兄弟元素不必紧跟在指定元素的后面，并且选择指定元素后面所有的兄弟元素。

10、X[attr] 【CSS2】

　　属性选择器，选择所有指定属性的元素。

1 a[target]{ 
2     background-color:red;
3 }

　　上面的代码，选择所有带有 target 属性的 a 元素。那些没有此属性的锚点将不会应用此样式。

11、X[attr=value] 【CSS2】

　　属性和值选择器，选择所有指定属性和值的元素。

1 a[target=_blank]{ 
2     background-color:red;
3 }

　　上面的代码，选择所有属性为 target="_blank" 的 a 元素。只应用于在新标签页打开的链接，其他锚点将不受影响。

12、X[attr~=value] 【CSS2】

　　这个选择器用于选择属性值包含一个指定单词的元素。~ 符号可以选择指定属性值是空格分隔多值的元素。

1 img[title~=flower]{
2     border:2px solid blue;
3 }

　　上面的代码，选择所有带有 title 属性值包含 flower 单词的 img 元素。

13、X[attr|=value] 【CSS2】

　　这个选择器用于选择属性以指定值开始的元素。

　　注意：该值必须是整个单词，无论是单独的像 lang="en"，或者像连字符（-）连接的如 lang ="en-us" 都可以。

1 [class|=test]{
2     background-color:yellow;
3 }

　　上面的代码，选择所有 class 属性以 test 开头的元素。

　　在 CSS2 中定义的 ~=、|= 和在 CSS3 中定义的 *=、^=、$= 之间的区别：

　　~= 和 *= 都可以选择属性值包含指定值的元素，前者必须是一个独立的单词，比如 test-a 和 test a 可以被选中，而 testa 不能被选中。而后者这三个都可以选中，只要是值的子串就可以了。

　　其他选择器和上面的原理相同，即 |= 和 ~= 特性相同，^=、$= 和 *= 特性相同。

**14、X[attr*=value] 【CSS3】**

　　这个选择器匹配元素属性值包含指定值的元素。该选择器类似于与上面的选择器，但是比上面的选择器更强大更灵活。* 符号可以选择指定属性值包含子字符串的元素，也就说，只要属性值中带有指定的值，无需是一个单词，无需空格分开，就可以匹配。

1 div[class*="test"]{
2     background-color:red;
3 }

　　上面的代码，选择所有 class 属性的值包含子字符串 "test" 的 div 元素。

　　DEMO：注意观察下面代码，各元素 title 属性的定义以及所使用的选择器，在页面截图中对比这两个选择器的区别：

 1 <!DOCTYPE html>
 2 <html>
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>属性包含选择器的区别</title>
 6 <style>
 7 *{
 8     margin:0;
 9     padding:0;
10 }
11 img{
12     width:90px;
13     height:90px;
14 }
15 
16 img[title~=boy]{
17     border:5px solid blue;
18 }
19 
20 img[title*=girl]{
21     border:5px solid red;
22 }
23 
24 img[title~=boy]{
25     width:60px;
26     height:60px;
27 }
28 
29 img[title*=girl]{
30     width:120px;
31     height:120px;
32 }
33 </style>
34 </head>
35 <body>
36 <img src="images/1.jpg" title="xxgirl-a" alt="">
37 <img src="images/2.jpg" title="boy a" alt="">
38 <img src="images/3.jpg" title="xxgirloo-b" alt="">
39 <img src="images/4.jpg" title="boy-b" alt="">
40 </body>
41 </html>

　　在 Chrome 中显示如下：

　　X[attr*=value] 选择器那是相当强大的，在某些时候将显得尤为重要，比如页面中有很多不同的链接地址时，想要更改某一域名相同的链接的样式时，使用这个选择器那简直是没谁了。

1 a[href*="ximo"]{
2     background-color:red;
3     font-size:20px;
4 }

　　上面的代码，就指定了所有 href 属性值中包含 ximo 的链接的样式，那不管它是 http 的 ximo 还是 https 的 ximo，也不管它是 ximo.com 还是 ximo.cn，更不管它是 ximo.com/index.php?postid=1234567 还是 ximo.com/#zh/a%b%C%2B，只要该属性值中包含 ximo，统统吃掉，是统统都改变样式。

　　强大固然好，但往往太强大的东西，就有可能超出控制，所以使用这个选择器还得小心行事，避免造成不必要的结果。比如这样的：http://www.domo.com/ximo 也会匹配。

15、X[attr^=value] 【CSS3】

　　这个选择器用于匹配元素属性值带有指定的值开始的元素。

1 a[href^="https"]{
2     background-color:red;
3 }

　　上面的代码，选择所有 href 属性的值以 "https" 开头的 a 元素。

16、X[attr$=value] 【CSS3】

　　这个选择器匹配元素属性值带有指定的值结尾的元素。

1 img[src$=".png"]{
2     border:2px solid red;
3 }

　　上面的代码，选择所有 src 属性的值以 ".png" 结尾的 img 元素。

17、:link 和 :visited 【CSS1】

　　伪类选择器。

　　:link 选择所有未访问的链接。

　　:visited 选择所有访问过的链接。

1 a:link{
2     color:red;
3 }
4 a:visited{
5     color:purple;
6 }

　　上面的代码，所有未访问的链接显示为红色，所有访问过的链接显示为紫色。

18、:active 【CSS1】

　　伪类选择器。

　　用于选择活动的链接，当鼠标点击一个链接时，他就会成为活动链接，该选择器主要用于向活动链接添加特殊样式。

1 a:active{ 
2     background-color:yellow;
3 }

　　上面的代码，当点击页面每个链接时，显示黄色背景色。

19、:target 【CSS3】

　　伪类选择器。

　　用于选择当前活动的目标元素。

1 #news:target{
2     background-color:yellow;
3 }

　　上面代码，选择当前活动的 ID 为 #news 的元素，#news 即包含该锚名称的点击的 URL。

　　URL 带有＃锚的名称，指向文档中一个具体的元素，即链接到某个元素的 URL，这个被链接的元素就是目标元素（target element）。

　　下面的例子，突出显示活动的 HTML 锚：

 1 <!DOCTYPE html>
 2 <html>
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>:target</title>
 6 <style>
 7 :target{
 8     border:2px solid red;
 9     background-color:#CFCFCF;
10 }
11 </style>
12 </head>
13 <body>
14 <h1>我是大标题</h1>
15 
16 <p><a href="#news1">跳转至内容 1</a></p>
17 <p><a href="#news2">跳转至内容 2</a></p>
18 
19 <p>点击上面的链接，:target 选择器会突出显示当前活动的 HTML 锚。</p>
20 
21 <p id="news1"><b>内容 1 ...</b></p>
22 <p id="news2"><b>内容 2 ...</b></p>
23 </body>
24 </html>

　　注意：IE9+ 以及所有浏览器都支持该选择器，IE8 以及更早版本的浏览器不支持。

　　在 Chrome 中显示如下：

20、:hover 【CSS1】

　　伪类选择器。

　　:hover 用于当鼠标移入链接时添加的特殊样式。

　　:hover 选择器可用于所有元素，不仅是链接，主要用于定义鼠标滑过效果。

1 div:hover{
2     background-color:pink;
3 }
4 a:hover{
5     border-bottom: 1px solid red;
6 }

　　上面的代码，当鼠标移入所有 div 元素时显示粉色背景色，当鼠标移入所有链接时显示 1 像素的底边框。

21、:before 和 :after 【CSS2】

　　伪元素选择器，在网上有很多创造性用法，主要用于在指定元素周围生成一些内容。

　　:before 和 :after 这俩小伙伴，用于在指定元素之前和之后插入内容，使用 content 属性来指定要插入的内容，具体应用可以点这里。

　　(1)、:before

　　配合 CSS 的 content 属性在指定元素之前插入内容。

1 p:before{
2     content:"看这里 - ";
3     color:red;
4     font-weight:bold;
5 }

　　上面的代码，在所有段落之前插入 “看这里 - ”并显示为红色的粗体字。

　　(2)、:after

　　配合 CSS 的 content 属性在指定元素之后插入内容。

　　该伪元素有一个比较神奇的创造性用法，那就是 clearfix:after，即清除浮动。

　　在 CSS 中，浮动会使元素向左或向右移动，直到他的外边缘碰到包含框或另一个浮动框的边框为止，其周围的元素也会重新排列。浮动元素之后的元素将围绕它，由于浮动框不在文档的普通流中，所以文档的普通流中的块框表现得就像浮动框不存在一样。简单理解就是，浮动元素脱离了文档流，包围图片和文本的 div 不占据空间。如下：

 1 <!DOCTYPE html>
 2 <html>
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>浮动问题</title>
 6 <style>
 7 *{
 8     margin:0;
 9     padding:0;
10 }
11 #box{
12     border:2px solid red;
13     width:800px;
14 }
15 .float{
16     width:200px;
17     height:200px;
18     float:left;
19     background:#9C9C9C;
20     margin-right:10px;
21 }
22 </style>
23 </head>
24 <body>
25 <div id="box" class="clearfix">
26     <div id="" class="float">
27     </div>
28     <div id="" class="float">
29     </div>
30     <p>浮动元素脱离了文档流，包围图片和文本的 div 不占据空间。</p>
31     <img src="images/1.jpg" width="90px" height="90px" alt="">
32 </div>
33 <img src="images/4.jpg" alt="">
34 </body>
35 </html>

　　在 Chrome 中显示如下：

　　如上图所示，容器内部使用了浮动，浮动的父层不会跟着浮动框的高度增加而增加，浮动元素脱离了文档流，包围图片和文本的 div 不占据空间。在 IE、Firefox 等符合 W3C 的标准浏览器中，如果有一个 DIV 作为外部容器，内部的 DIV 如果设置了 float 样式，则外部的容器 DIV 因为内部没有 clear，导致不能被撑开。如下所示：

　　要解决浮动问题，可以给父容器设置 overflow:hidden; 属性，父容器的高度可被自动撑开。现在让我们来了解一下更高级的用法，即使用 :after 伪元素来清除浮动。上面的例子中，给父容器设置了一个 class 类 clearfix，现在给他应用如下样式：

1 .clearfix:after{
2     content:" ";
3     display:block;
4     height:以上是关于这 30 类 CSS 选择器，你必须理解！的主要内容，如果未能解决你的问题，请参考以下文章 
 前端必须掌握的30个CSS选择器
 前端必须掌握30个CSS3选择器
 前端必须掌握30个CSS3选择器
 VSCode自定义代码片段——CSS选择器
 VSCode自定义代码片段6——CSS选择器
 30个最常用css选择器解析