CSS选择器列表_MDN

ID选择器、元素选择器、类选择器之前已经介绍，这里不再赘述。


通配符选择器

通配符就是*，表示选中所有元素。也包括<head>元素和<html>元素，不过这两个元素不显示，所以选中并渲染也没什么用。
css文件中：

* {
    color: blueviolet;
}

html文件中：

<link rel="stylesheet" href="./css/index.css">
<body>
    <h1>Lorem ipsum dolor sit amet.</h1>
    <p>Lorem ipsum dolor sit amet.</p>
    <div>Lorem ipsum dolor sit amet.</div>
</body>


属性选择器

根据属性名或属性值选中元素。

[href]{
    font-size: 2em;
    color: #f40;
}
<a href="https://www.taobao.com">淘宝</a>


在以上代码中再加上：

[href="https://www.sina.com.cn/"]{
    font-size: 3em;
    color: green;
}
<a href="https://www.sina.com.cn/">新浪</a>

得到：

从这里也可以看出范围越小的选择器优先级越高。
属性选择器还有很多其他用法，比如对于上述的淘宝，它的网站地址也可能是http://www.taobao.com、//www.taobao.com，这时用精确的属性值选择器就匹配不上，这时可以用

[href$="taobao.com"]{
  ……
}

$=表示选中以taobao.com为结尾的元素。
关于属性选择器的更多用法可以参阅MDN的文档，点击这个章节的标题就可以跳转了。
其实为了方便深入阅读学习，我几乎每个章节的标题都加上了相应的链接。


伪类选择器

选中某些元素的某种状态。伪类选择器用得超级多。

1）hover

表示鼠标悬停在上面的状态。

a:hover{
    font-size: 2em;
    color: red;
}

效果：

当然不一定非得用在a元素超链接上，其他元素也可以用。


2）active

表示鼠标按下的状态。

a:active{
    font-size: 2em;
    color: yellow;
}


3）link、visited

link表示超链接未访问时的状态，visited则是超链接被访问过的状态。

如果以上4个伪类都要应用的话，一定要按link、visited、hover、active的相对顺序书写，原因之后会介绍。
这个规则也叫“爱恨法则”，love、hate。


伪元素选择器

伪元素是一个附加至选择器末的关键词，允许你对被选择元素的特定部分修改样式。

span::before{
    content: "《";
    color: red;
}

span::after{
    content: "》";
    color: red;
}
<span>
    月亮与六便士
</span>


选择器的组合

就是把多个选择器组合起来使用，上面其实已经演示了。

1）直接拼到一起

比如：
元素选择器span和伪元素选择器::before组合在一起就是span::before；
元素选择器a和伪类选择器hover组合在一起就是a:hover。
再如：

p{
    text-indent: 2em;
    line-height: 2;
}
p.red{
    color: red;
}
<p>
    Lorem ipsum dolor sit amet consectetur adipisicing elit. Animi<br>dolorum facere, illum saepe consequuntur consequatur.
</p>
<p class="red">
    Lorem ipsum dolor sit amet, consectetur adipisicing elit.
</p>


可以看到p元素实现了首行缩进，并且带有red属性的p元素被渲染为红色。这种选择器组合方法经常用到。

插曲小tip：
在VScode中输入p.red.big.center，然后按Tab键可以生成为<p class="red big center"></p>


2）后代元素：空格

.red ul{
    color: #008c8c;
}
<div class="red">
    Lorem ipsum dolor sit amet, consectetur adipisicing elit.
    <ul>
        <li>Lorem ipsum dolor sit amet.</li>
        <li>Lorem ipsum dolor sit amet.</li>
        <li>Lorem ipsum dolor sit amet.</li>
        <li>Lorem ipsum dolor sit amet.</li>
        <li>Lorem ipsum dolor sit amet.</li>
    </ul>
</div>


不是说一定得前面类选择器后面元素选择器，空格前后什么选择器都可以，只要逻辑正确就行。


3）子元素：>

不同于后代元素选择器，子元素选择器只能选择子元素，不能选中子元素的子元素之类的。
子元素选择器用得不多，因为后代元素选择器就可以实现子元素选择器的功能。
输入div>ul>li*3>lorem1按Tab键快速生成（可以看到快速扩展子元素也是使用“>”符号）：

<div>
    <ul>
        <li>Lorem.</li>
        <li>Earum.</li>
        <li>Voluptas.</li>
    </ul>
</div>
div>ul>li{
    color: red;
}

这里写成div>ul li、div ul>li或div ul li也可以，一样符合逻辑。
图片就不放了。


4）相邻兄弟元素：+、兄弟元素：~

.special{
    color: red;
}
.special+li{
    color: blue;
}
<div>
    <li>A, odit.</li>
    <li class="special">Dolor, corrupti?</li>
    <li>Lorem, ipsum.</li>
    <li>Dicta, accusantium.</li>
    <li>Libero, commodi.</li>
</div>


可见“+”只选择下一个兄弟元素，或许称为“弟弟选择器”更合适。。。 

.special{
    color: red;
}
.special~li{
    color: blue;
}


同理，“~”选中了所有的后面的兄弟元素，或许称为“弟弟们选择器”或许更合适。。。
目前可以选择“弟弟元素”，但是CSS还没提供可以选择“哥哥元素”的选择器。

以上便是选择器的组合。在实际项目中很少使用单个的选择器，基本都是组合起选择器来使用的。


选择器的并列

一句话：多个选择器，用逗号分隔。
像这种语法叫语法糖（Syntactic sugar），指便捷的写法，比如乘法就是加法的语法糖，“u1s1”就是汉字词语“有一说一”的语法糖。
使用语法糖可以简化代码，增加程序的可读性，从而减少出错的机会。