基本选择器
通用选择器
* {
border: 1px solid red;
}
<p>段落</p>
<b>加粗</b>
<span>无</span>
解释：“*”号选择器是通用选择器，功能是匹配所有html元素的选择器包括<html>和<body>标签。
通用选择器会将所有元素匹配并配置样式，这是把双刃剑，好处就是非常方便，坏处就是将不必要的元素也配置了。目前为止，还不存在所有元素都必须配置的样式，所以，一般来说，不常用
元素选择器
p {
color: red;
}
<p>段落</p>
解释：直接使用元素名称作为选择器名即可
ID选择器
#abc {
color: green;
}
<p id="abc">段落</p>
解释：通过对元素设置全局属性id，然后使用#id值来选择页面唯一元素。
类选择器
.abc {
color: blue;
}
<b class="abc">加粗</b>
<span class="abc">无</span>
解释：通过对元素设置全局属性class，然后使用.class值选择页面一个或多个元素。b.abc {
color: orange;
}
解释：也可以使用“元素.class值”的形式，限定某种类型的元素。
.abc {
color: red;
}
.def {
font-size: 30px;
}
<span class="abc edf">无s</span>
解释：类选择器还可以调用多个样式，中间用空格隔开进行层叠。
属性选择器
[href] {
color: red;
}
<a href="http://www.baidu.com">百度</a>
解释：属性选择器，直接通过两个中括号里面包含属性名即可,有该属性的元素可以匹配
[type="password"] {
border: 1px solid red;
}
<input type="password">
解释：匹配属性值的属性选择器。
[href^="http"] {
color: red;
}
<a href="http://www.baidu.com">百度</a>
解释：属性值开头匹配的属性选择器
[href$=".cn"] {
color: red;
}
解释：属性值结尾匹配的属性选择器。
[href*="baidu"] {
color: red;
}
解释：属性值包含指定字符的属性选择器
[class~="def"] {
color: red;
}
<span class="abc def">这是一个什么都没有</span>
解释：属性值具有多个值时，匹配其中一个值的属性选择器
[lang|="en"] {
color: red;
}
<i lang="en-us">HTML5</i>
解释：属性值具有多个值且使用“-”号连接符分割的其中一个值的属性选择器
复合选择器
分组选择器
p,b,i,span {
color: red;
}
#abc,.abc,i,span {
color: blue;
}
解释：将多个选择器通过逗号分割，同时设置一组样式。当然，不但可以分组元素选择器，还可以使用ID选择器、类选择器、属性选择器混合使用
后代选择器
p b {
color: red;
}
<p id="abc">这是一个<b>段落</b></p>
<p id="abc">这是<span>一个<b>段落</b></span></p>
这是一个段落
解释：选择<p>元素内部所有<b>元素。不在乎<b>的层次深度。当然，后代选择器也可以混合使用ID选择器、类选择器、属性选择器。
子选择器
p > b {
color: red;
}
<p >这是一个<b>段落</b></p>
<p >这是<span>一个<b>段落</b></span></p>
这是一个段落
这是一个段落
解释：子选择器类似与后代选择器，而最大的区别就是子选择器只能选择父元素向下一级的元素，不可以再往下选择。
相邻兄弟选择器与普通兄弟选择器
<p id="abc">这是一个<b>段落</b></p>
<b class="abc">这是一个加粗</b>
<span class="abc def">这是一个什么都没有</span>
<b class="abc">这是一个加粗</b>
p + b {
color: red;
}
这是一个段落
这是一个加粗 这是一个什么都没有 这是一个加粗
p ~ b {
color: red;
}
这是一个段落
这是一个加粗 这是一个什么都没有 这是一个加粗
伪类选择器
结构性伪类选择器
结构性伪类选择器能够根据元素在文档中的位置选择元素。这类元素都有一个前缀（:）。
子元素选择器
<ul>
<li>我是儿子</li>
<li>我是儿子</li>
<li>我是儿子</li>
<li>我是儿子</li>
</ul>
<ul>
<li>我是儿子</li>
</ul>
ul > li:first-child {
color: red;
}
解释：选择第一个子元素。
ul > li:last-child {
color: red;
}
解释：选择最后一个子元素。
ul > li:only-child {
color: red;
}
解释：选择只有一个子元素的那个子元素。
<div>
<p>我是段落</p>
<span>我不是段落</span>
</div>
<div>
<p>我是段落</p>
<p>我是段落</p>
</div>
div > p:only-of-type {
color: red;
}
解释：选择只有一个指定类型的子元素的那个子元素。（第一个div下一个p，第二个div下两个p，所以第一个div下的p符合）
ul > li:nth-child(2) {
color: red;
}
解释：选择子元素的第二个元素。
ul > li:nth-last-child(2) {
color: red;
}
解释：选择子元素倒数第二个元素。
div > p:nth-of-type(2) {
color: red;
}
<div>
<p>我是段落</p>
<span>我不是段落</span>
</div>
<div>
<p>我是段落</p>
<p>我是段落</p>
</div>
解释：选择特定子元素的第二个元素[因为第一组div中，只有第一个p]
div > p:nth-last-of-type(1) {
color: red;
}
<div>
<p>我是段落</p>
<span>我不是段落</span>
</div>
<div>
<p>我是段落</p>
<p>我是段落</p>
</div>
解释：选择特定子元素的倒数第一个元素
712
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
