共计 5378 个字符，预计需要花费 14 分钟才能阅读完成。
MDN 参考链接
CSS 选择器规定了 CSS 规则会应用到哪些元素上。
CSS 选择器分为以下四大类：
– 基本选择器
– 组合选择器
– 伪类
– 伪元素
基本选择器
Type（类型）选择器
也可以称之为元素选择器，这种基本选择器会选择所有匹配给定元素名的元素。
语法：elename（元素名称）
例子：span 将会选择所有的 <span> 元素。
代码：
HTML:
<span class="index">Here is a span with some text.</span>
<p class="text">Here is a p with some text.</p>
<span class="index text">Here is a span with more text.</span>CSS:
.index{color:red;}
.text{font-size:24px;}REUSLT:
Class（类）选择器
这种基本选择器会基于类属性的值来选择元素。一个元素的 class 值，可以有一个或多个（由空格隔开）。
语法：.classname（类名称）
例子：.index 会匹配所有包含 index 类的元素 (由类似于 class=”index” 这样的属性定义的).
HTML:
<span>Here is a span with some text.</span>
<p>Here is a p with some text.</p>
<span>Here is a span with more text.</span>CSS:
span {color: red;}REUSLT:
注意下面的那个 span，由于 class 有两个，所以会将两个 class 的样式都应用上去
ID 选择器
这种基本选择器会选择所有 id 属性与之匹配的元素。需要注意的是一个文档中每个 id 都应该是唯一的。
语法：#idname（id 名称）
例子：#toc 将会匹配所有 id 属性为 toc 的元素 (类似于这样的定义 id=”toc”).
HTML:
<span id="toc">Here is a span with some text.</span>
<p>Here is a p with some text.</p>CSS:
#toc{color:red;}REUSLT:
通用选择器
这个基本选择器选择所有节点。它也常常和一个名词空间配合使用，用来选择该空间下的所有元素。
语法： ns| |
例子：*（通配符）将会选择所有元素。
HTML:
<span class="index">Here is a span with some text.</span>
<p class="text">Here is a p with some text.</p>
<span class="index text">Here is a span with more text.</span>CSS:
* {color:red;}
REUSLT:
属性选择器
这个基本的选择器根据元素的属性来进行选择。
语法：[attr] [attr=value] [attr~=value] [attr|=value] [attr^=value] [attr$=value] [attr*=value]
例子：[autoplay] 将会选择所有具有 autoplay 属性的元素（不论这个属性的值是什么）
HTML：
<ul>
<li><a href="#"> 值等于 #</a></li>
<li><a href="#internal"> 值以 #开头 </a></li>
<li><a href="http://example.com"> 值包含 example</a></li>
<li><a href="#InSensitive"> 值忽略大小写 </a></li>
<li><a href="http://example.org"> 值以 org 结尾 </a></li>
</ul>CSS:
li{margin-bottom:10px;}
a {color: blue;}
/* 存在 href 属性并且属性值等于 "#" 的 <a> 元素, 如下选择 */
a[href="#"] {color: black;}
/* 存在 href 属性并且属性值以 "#" 开始的 <a> 元素, 如下选择 */
a[href^="#"] {background-color: gold;}
/* 存在 href 属性并且属性值包含 "example" 的 <a> 元素, 如下选择 */
a[href*="example"] {background-color: silver;}
/* 存在 href 属性并且属性值包含 "insensitive" 的 <a> 元素,
i 表示忽略 "insensitive" 的大小写, 如下选择 */
a[href*="insensitive" i] {color: cyan;}
/* 存在 href 属性并且属性值结尾是 ".org" 的 <a> 元素, 如下选择 */
a[href$=".org"] {color: red;}RESULT:
组合选择器
紧邻兄弟选择器
‘+’ 操作符选择相邻元素，即第二个节点紧邻着第一个节点，并且拥有共同的父节点。
语法: A + B
例子: ul + li 会匹配任何 <ul> 元素后紧邻的 <li> 元素。
HTML:
<ul>
<li><a href="#"> 值等于 #</a></li>
<li><a href="#internal"> 值以 #开头 </a></li>
<li><a href="http://example.com"> 值包含 example</a></li>
<li><a href="#InSensitive"> 值忽略大小写 </a></li>
<li><a href="http://example.org"> 值以 org 结尾 </a></li>
</ul>
<li>
我是弟弟
</li>
<li>
另一个弟弟
</li>CSS:
ul + li{color:red;}RESULT:
一般兄弟选择器
‘~’ 操作符选择兄弟元素，也就是说，第二个节点在第一个节点后面的任意位置，并且这俩节点的父节点相同。
语法: A ~ B
例子: p ~ span 将会匹配同一父元素下，<p> 元素后的所有 <span> 元素。
HTML:
<ul>
<li><a href="#"> 值等于 #</a></li>
<li><a href="#internal"> 值以 #开头 </a></li>
<li><a href="http://example.com"> 值包含 example</a></li>
<li><a href="#InSensitive"> 值忽略大小写 </a></li>
<li><a href="http://example.org"> 值以 org 结尾 </a></li>
</ul>
<li>
我是弟弟
</li>
<li>
另一个弟弟
</li>CSS:
ul ~ li{color:red;}RESULT:
子选择器
‘>’ 操作符选择第一个元素的直接子节点。
语法: A > B
例子: div > span 将会匹配直接嵌套在 <div> 元素内的所有 <span> 元素。
HTML:
<div>
<span> 我是大儿子 </span>
<span> 我是二儿子 </span>
<span> 我是三儿子 </span>
<footer>
<span> 我是四儿子 </span>
</footer>
</div>CSS:
div > span{color:red;}RESULT:
后代选择器
‘ ‘ (空格) 操作符将选择第一个元素的子代节点。
语法: A B
例子: div span 将匹配 <div> 元素内所有的 <span> 元素。
HTML:
<div>
<span> 我是大儿子 </span>
<span> 我是二儿子 </span>
<span> 我是三儿子 </span>
<footer>
<span> 我是四儿子 </span>
</footer>
</div>CSS:
div span{color:red;}RESULT:
伪类
伪类 允许基于未包含在文档树中的状态信息来选择元素。
伪类选择器包括试验性质的大概有 60 来个，在这里介绍日常使用较多的以下几种
:link、:visited、:hover、:active、:focus、:first-child、:last-child、:nth-child()、:nth-last-child()
例子:link、:visited、:hover、:active
HTML:
<body>
<h1>:active CSS 选择器示例 </h1>
<p> <a href="#1"> 未访问 </a>.</p>
<p><a href="#2"> 已访问 </a>.</p>
<p><a href="#3"> 鼠标悬停 </a>.</p>
<p><a href="#4"> 激活链接（鼠标点击下去未抬起时的状态）</a>.</p>
</body>CSS:
a:link {color: blue} /* 未访问链接 */
a:visited {color: purple} /* 已访问链接 */
a:hover {color: red} /* 用户鼠标悬停 */
a:active {color: lime} /* 激活链接 */RESULT:
例子:focus
:focus 表示获得焦点的元素（如表单输入）。当用户点击或触摸元素或通过键盘的“tab”键选择它时会被触发。
HTML:
<input type="text" value="text"/>CSS:
input:focus {color: red;}RESULT:
例子:first-child、:last-child
:first-child 表示在一组兄弟元素中的第一个元素。
:last-child 表示在一组兄弟元素中的倒数第一个元素。
HTML:
<ul>
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
</ul>CSS:
ul li:first-child {color: red;}
ul li:last-child {color: blue;}RESULT:
例子:nth-child()、nth-last-child()
:nth-child(an+b) 这个 CSS 伪类首先找到所有当前元素的兄弟元素，然后按照位置先后顺序从 1 开始排序，选择的结果为 CSS 伪类:nth-child 括号中表达式（an+b）匹配到的元素集合
:nth-last-child(an+b) 与:nth-child(an+b) 查找顺序刚好相反
表达式语法例子：
tr:nth-child(2n+1)表示 HTML 表格中的奇数行。
tr:nth-child(odd)表示 HTML 表格中的奇数行。
tr:nth-child(2n)表示 HTML 表格中的偶数行。
tr:nth-child(even)表示 HTML 表格中的偶数行。
span:nth-child(0n+1)表示子元素中第一个且为 span 的元素，与 :first-child 选择器作用相同。
span:nth-child(1)表示父元素中子元素为第一的并且名字为 span 的标签被选中
span:nth-child(-n+3)匹配前三个子元素中的 span 元素。
HTML:
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
<li>6</li>
<li>7</li>
<li>8</li>
<li>9</li>
<li>10</li>
</ul>CSS:
/* 和 nth-child(odd) 相同 */
li:nth-child(2n+1){color:red;}
/* 和 nth-child(even) 相同 */
li:nth-child(2n){color:block;}
li:nth-child(-n+3){font-size:40px;}
li:nth-child(4){background:#aaa;}RESULT:
:nth-last-child 与之顺序刚好相反，是从倒数第一开始算起的
伪元素
伪元素 表示所有未被包含在 HTML 的实体。
伪元素包含实验性质在内大概有 30 种，这里介绍常用的几种::after (:after)、::before (:before)、::first-letter (:first-letter)、::first-line (:first-line)、::placeholder、::selection
例子 ::after (:after)、::before (:before)
HTML:
<q> 一些引用 </q>, 他说, <q> 比没有好。</q>.CSS:
q::before {
content: "«";
color: blue;
}
q::after {
content: "»";
color: red;
}RESULT:
例子 ::first-letter (:first-letter)、::first-line (:first-line)
HTML:
<p>11111111111111111111222222222222</p>CSS:
p{
word-break:break-all;
width:150px;
}
p::first-letter { /* 使用:first 来兼容 IE8- */
color: red;
}
p::first-line { /* 使用:first 来兼容 IE8- */
font-size: 40px;
}RESULT:
例子 ::selection、::placeholder
HTML:
<p> 选中后背景颜色变灰 </p>
<input placeholder="我是红色的！">CSS:
p::selection {background-color: #ccc;}
input::placeholder {color: red;}RESULT:
