CSS选择器的用法（详解）
这一篇，介绍CSS的各种选择器的用法。
我们之前说过html是用来对网页的元素进行布局，那么css就是给这些元素加上一些属性和样式。
而选择器就是对这些元素进行选中。
那选中的方法自然是多种多样，所以CSS选择器也是分为很多种，这里就来一一介绍。
一、CSS 元素选择器
最常见的 CSS 选择器是元素选择器。换句话说，文档的元素就是最基本的选择器。
如果设置 HTML 的样式，选择器通常将是某个 HTML 元素，比如 p、h1、em、a，甚至可以是 html 本身。
我们来看一下。
<body> <div>div</div> <p>p</p> <ul> <li>1</li> <li>2</li> </ul> </body>
我在网页中有一个div，一个p标签，一个ul。
显示出来的话：
因为是块级元素，所以自己占一行。
现在我们用元素选择器对他们进行选中：
<style> div{ background-color: blue; } ul{ background-color:green; } li{ background-color: blueviolet; } p{ background-color: brown; } </style>
显示出来的话：
OK，这就是元素选择器。
二，选择器分组
假设希望 div元素和p标签都有灰色。为达到这个目的，最容易的做法是使用以下声明：
<style> p,div{ background-color: gray; } </style>
我们用逗号来进行分割，从而把div和p标签都选中。
这里值得注意的是，本例中是相当于把两个元素选择器分组，分组这个方法，同时也可以用于其他选择器。
三、通配符选择器
CSS2 引入了一种新的简单选择器 - 通配选择器（universal selector），显示为一个星号（*）。该选择器可以与任何元素匹配，就像是一个通配符。
就像我们在写网页的时候，有时候网页会有一些默认的布局样式，我们不想要这个样式，也就是取消网页自带的一些标签的样式，我们可以这么做。
*{
padding: 0;
margin: 0;
} 这就是选中了网页中的所有元素，一个很牛逼的选择器。
四、CSS 类选择器
类选择器允许以一种独立于文档元素的方式来指定样式。
该选择器可以单独使用，也可以与其他元素结合使用。
提示：只有适当地标记文档后，才能使用这些选择器，所以使用这两种选择器通常需要先做一些构想和计划。
要应用样式而不考虑具体设计的元素，最常用的方法就是使用类选择器。
也就是说，我们在使用类选择器的时候，要先给标签加上类。
我们改一下我们的例子：
<body> <div class="boy">div</div> <ul class="boy"> <li>1</li> <li>2</li> </ul> </body> 在div和ul的内部，我们加上了class=“boy”的代码。现在我们用类选择器来选中他们：
<style> *{ margin: 0; padding: 0; } .boy{ background-color: blue; width: 300px; height: 300px; margin: 0 auto; list-style: none; } </style>
在选择器中，我让他们的背景颜色为蓝色，并且设置了宽高，并且在网页居中显示，把ul前面的小点点去掉了。
再来看一下显示吧：
类选择器还可以结合元素选择器来使用。
例如：
<body> <div class="girl">div1</div> <p class="girl">p1</p> <p class="girl">p2</p> <p class="girl">p3</p> <p>p4</p> <p>p5</p> </body> 我现在选中girl的类：
<style> *{ margin: 0; padding: 0; } .girl{ background-color: blue; width: 100px; height: 100px; margin-bottom: 3px; } </style>
是不是就选中了div和前三个p标签：
可我现在只想选中前三个p标签呢？
这么办：
<style> *{ margin: 0; padding: 0; } p.girl{ background-color: blue; width: 100px; height: 100px; margin-bottom: 3px; } </style>
用元素选择器和类选择器进行组合：
CSS 多类选择器
在 HTML 中，一个 class 值中可能包含一个词列表，各个词之间用空格分隔。例如：
<body> <p class="girl boy">p1</p> <p class="girl">p2</p> <p class="girl">p3</p> <p class="boy">p4</p> <p class="boy girl">p5</p> </body> 可以看到p1个p5class中有两个值，所以我们在用类选择器的时候：
<style> *{ margin: 0; padding: 0; } .girl{ background-color: blue; width: 100px; height: 100px; margin-bottom: 3px; } .boy{ width: 100px; height: 100px; border: 1px solid black; margin: 0 auto; } </style>
就会有这种效果：
哎？这里有个好玩的，如果我们在boy选择器加上一个背景颜色的话：
<style> *{ margin: 0; padding: 0; } .girl{ background-color: blue; width: 100px; height: 100px; margin-bottom: 3px; } .boy{ width: 100px; height: 100px; border: 1px solid black; margin: 0 auto; background-color: brown; } </style>
会怎么显示呢？
右边三个变成红色了，如果我把这两个选择器调换一下顺序呢？
像这样：
<style> *{ margin: 0; padding: 0; } .boy{ width: 100px; height: 100px; border: 1px solid black; margin: 0 auto; background-color: brown; } .girl{ background-color: blue; width: 100px; height: 100px; margin-bottom: 3px; } </style>
颜色就又变了哈哈：
所以这说明了我们的代码是顺序执行的。
OK。类选择器就说这么多。
五、CSS ID 选择器
ID 选择器允许以一种独立于文档元素的方式来指定样式。
还是来先看一下这个选择器怎么用的吧：
<body> <ul> <li id="li1">li1</li> <li>li2</li> <li>li3</li> <li>li4</li> </ul> </body>
我有一个ul然后给第一个li加了一个id；
我们先选中所有的li加上个样式。
<style> *{ margin: 0; padding: 0; } li{ width: 100px; height: 100px; list-style: none; background-color: cadetblue; margin-bottom: 4px; } </style>
看一下效果：
然后我们在选中第一个li：
<style> *{ margin: 0; padding: 0; } li{ width: 100px; height: 100px; list-style: none; background-color: cadetblue; margin-bottom: 4px; } #li1{ background-color: chocolate; } </style>
看一下效果：
嘶，这和类选择器好像没差多少啊，是不是一样的啊？不就是一个用“.”一个用“#”吗。
区别 1：只能在文档中使用一次
与类不同，在一个 HTML 文档中，ID 选择器会使用一次，而且仅一次。
区别 2：不能使用 ID 词列表
不同于类选择器，ID 选择器不能结合使用，因为 ID 属性不允许有以空格分隔的词列表。
区别 3：ID 能包含更多含义
类似于类，可以独立于元素来选择 ID。有些情况下，您知道文档中会出现某个特定 ID 值，但是并不知道它会出现在哪个元素上，所以您想声明独立的 ID 选择器。
我们就来看一下刚才的代码：
如果我这么改的话：
ul#li1{
background-color: chocolate;
} 类选择器是可以这么做的，但是标签选择器这么写就是不会有效果的。
然后我再改：
<body> <ul> <li id="li1 li2">li1</li> <li>li2</li> <li>li3</li> <li>li4</li> </ul> </body> 我给第一个li加上两个id。
<style> *{ margin: 0; padding: 0; } li{ width: 100px; height: 100px; list-style: none; background-color: cadetblue; margin-bottom: 4px; } #li1{ background-color: chocolate; } #li2{ width: 300px; } </style>
你看连上一个的选择器都搞得不好使了。
所以这就是标签选择器和类选择器的区别。
六、CSS 属性选择器
CSS 2 引入了属性选择器。
属性选择器可以根据元素的属性及属性值来选择元素。
我们来看一下怎么用：
<body> <a href="https://i.csdn.net/#/uc/profile">一个帅哥的博客主页</a> <a href="https://mp.csdn.net/console/article">一个帅哥的所有博客</a> </body> 我现在要选中a标签的href属性：
<style> a[href]{ color: crimson; } </style>
这样就OK了，但感觉这个选择器不怎么常用。。。。
就这样吧，其实这个选择器我好像都没有用过。。。。
有点尴尬。。。。。
七、CSS 后代选择器
后代选择器（descendant selector）又称为包含选择器。
后代选择器可以选择作为某元素后代的元素。
这个可以，挺常用的，来我们看一下用法：
<body> <div>div1 <ul> <li>li1</li> <li>li2</li> </ul> </div> </body> 可以看到div的孩子是ul，ul的孩子是li。那么li就也算是div的后代。
<style> *{ margin: 0; padding: 0; } div li{ width: 100px; height: 100px; background-color: crimson; margin-bottom: 5px; list-style: none; } </style>
通过这种空格来选中后代的元素：
八、CSS 子元素选择器
与后代选择器相比，子元素选择器（Child selectors）只能选择作为某元素子元素的元素。
如果我把刚才的选择器改一下写法：
<style> *{ margin: 0; padding: 0; } div>ul{ width: 100px; height: 100px; background-color: crimson; margin-bottom: 5px; list-style: none; } </style>
通过这种>来选中子代的选择器：
九、CSS 相邻兄弟选择器
相邻兄弟选择器（Adjacent sibling selector）可选择紧接在另一元素后的元素，且二者有相同父元素。
再把上个例子的结构改一下：
<body> <div>div1 <ul> <li>li1</li> <li>li2</li> </ul> <div>div2</div> </div> </body> 我再ul后面加了一个div，我现在想通过ul来选中这个div2.
<style> *{ margin: 0; padding: 0; } ul+div{ width: 100px; height: 100px; background-color: crimson; } </style>
就这样，通过+来选中相邻兄弟的选择器。
还有两个伪类选择器，伪元素选择器，这里就不再介绍了。如果感兴趣的话可以自己再找找资料，可以去w3c的网页上找找。
然后关于选择器，最重要的还类选择器和ID选择器。
在后面的DOM操作中也经常用的是这两种选择器。
关于CSS的选择器，也就说这些。
本文地址：https://blog.csdn.net/weixin_46726346/article/details/107859833