本文要点：
- 什么叫选择器？它的作用是什么？
- 选择器的种类
- 选择器优先级别
什么叫选择器
- CSS 选择器用于设置选择的元素的样式，简单理解就是设置被选中的元素的外观；
- 选择器的语法：<code>selector{property:value;}</code> 。
选择器的种类
- 基本的选择器：标签选择器、类别选择器、id 选择器、属性选择器；
- 扩展选择器：后代选择器（包含选择器）、继承选择器（子选择器）、伪类选择器，伪元素选择器；
- 其他选择器。
标签选择器
标签选择器用于设置指定元素名称的所有元素的样式，其语法格式为：<code>标签名称{属性:属性值;}</code> 。
代码：
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>标签选择器</title>
<style>
p {
/* 字体颜色 */
color: red;
/* 字体加粗 */
font-weight: bold;
}
</style>
</head>
<body>
<p>这是一个段落。</p>
</body>
</html>
效果演示：
标签选择器
类别选择器
类别选择器用于设置指定类的所有元素的样式，其语法格式为：<code>.类别{CSS属性:属性值;}</code> 。
代码：
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>类别选择器</title>
<style>
.p {
color: blue;
}
</style>
</head>
<body>
<p class="p">段落1</p>
<p>段落2</p>
<p>段落3</p>
<p class="p">段落4</p>
</body>
</html>
效果演示：
类别选择器
id 选择器
id 选择器用于设置具有指定 id 的元素的样式，其语法格式为：<code>#id{CSS属性:属性值;}</code> 。
代码：
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>id 选择器</title>
<style>
#p1 {
color: red;
}
#p2 {
color: greenyellow;
}
#p3 {
color: blue;
}
#p4 {
color: cadetblue;
}
</style>
</head>
<body>
<p id="p1">段落1</p>
<p id="p2">段落2</p>
<p id="p3">段落3</p>
<p id="p4">段落4</p>
</body>
</html>
效果演示：
id 选择器
属性选择器
属性选择器用于设置具有指定属性的元素的样式，其语法格式为：<code>[指定属性]{CSS属性:属性值;}</code> 。
代码：
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>属性选择器</title>
<style>
[title]{
color: red;
}
</style>
</head>
<body>
<p title="段落1">段落1</p>
<p>段落2</p>
<p title="段落3">段落3</p>
<p>段落4</p>
</body>
</html>
效果演示：
属性选择器
后代选择器
后代选择器，又称包含选择器，可以跳级（不必逐级设置），其语法格式为：<code>父元素 子元素{属性:属性值;}</code> 或 <code>父元素 子元素的子元素{CSS属性:属性值;}</code> 。
代码：
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>后代选择器</title>
<style>
ul a {
color: red;
}
</style>
</head>
<body>
<ul>
<li><a href="#">首页</a></li>
<li><a href="#">热门</a></li>
<li><a href="#">消息</a></li>
</ul>
</body>
</html>
效果演示：
后代选择器
继承选择器
继承选择器，又称子选择器，不可以跳级（必须逐级逐级设置），其语法格式为：<code>父元素 > 子元素{CSS属性:属性值;}</code> 或 <code>父元素 > 子元素 > 子元素的子元素{属性:属性值;}</code> 。
代码：
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>继承选择器</title>
<style>
ul > li > a {
color: greenyellow;
}
</style>
</head>
<body>
<ul>
<li><a href="#">首页</a></li>
<li><a href="#">热门</a></li>
<li><a href="#">消息</a></li>
</ul>
</body>
</html>
效果演示：
继承选择器
伪类选择器
伪类选择器，CSS 中已经定义好的选择器，不能随便取名，其语法格式为：<code>选择器:伪类{CSS属性:属性值;}</code> 。
1. 文本伪类选择器
代码：
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>伪类选择器</title>
<style>
/* 正常，未访问的链接 */
a:link {
color: orange;
}
/* 已访问的链接 */
a:visited {
color: red;
}
/* 鼠标移到元素上面 */
a:hover {
color: aqua;
}
/* 鼠标点击时 */
a:active {
color: blueviolet;
}
</style>
</head>
<body>
<a href="http://www.jd.com">京东</a>
</body>
</html>
注意： 在 CSS 定义中，a:hover 必须被置于 a:link 和 a:visited 之后，a:active 必须被置于 a:hover 之后； 伪类的名称不区分大小写。
效果演示：
伪类选择器
注意： 当打开某个链接后，即使再次刷新页面，该链接的样式仍为已访问的链接样式，可以通过清除浏览器缓存的方法解决。
2. 结构性伪类选择器
- x:first-child： 匹配 x 元素中的第一个子元素；
- x:last-child： 匹配 x 元素中的最后一个子元素；
- x:nth-child(n)： 匹配 x 元素中的某一个子元素；
- x:first-of-type： 匹配 x 元素下的某一种类型子元素的第一个元素；
- x:last-of-type： 匹配 x 元素下的某一种类型子元素的最后一个元素；
- x:nth-of-type(n)： 匹配 x 元素下的某一种类型子元素的第一个元素。
注意： x 元素表示任意元素，n 可以为常量、公式（只能用n）。
代码：
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>结构性伪类</title>
<style>
/* 匹配 p 元素中的第一个子元素 */
p:first-child {
color: blueviolet;
}
/* 匹配 p 元素中的最后一个子元素 */
p:last-child {
color: red;
}
/* 匹配 p 元素中的某一个子元素，nth-child(n)，n 可以为常量、公式（只能用n） */
p:nth-child(2) {
color: aqua;
}
/* 偶数行字体颜色为红色 */
.cls_div p:nth-child(2n) {
color: red;
}
/* 奇数行字体颜色为黄色 */
.cls_div p:nth-child(2n-1) {
color: yellow;
}
/* 匹配 h1 元素下的某一种类型子元素的第一个元素 */
h1:first-of-type {
color: chartreuse;
}
/* 匹配 h1 元素下的某一种类型子元素的最后一个元素 */
h1:last-of-type {
color: darkorchid;
}
/* 匹配 h1 元素下的某一种类型子元素的某一个元素，nth-child(n)，n 可以为常量、公式（只能用n） */
h1:nth-of-type(4) {
color: aquamarine;
}
</style>
</head>
<body>
<div>
<p>段落1(div)</p>
<p>段落2(div)</p>
<p>段落3(div)</p>
</div>
<span>
<p>段落4(span)</p>
<p>段落5(span)</p>
<p>段落6(span)</p>
<p>段落7(span)</p>
</span>
<div class="cls_div">
<p>djfij eodf] dfk</p>
<p>djfij eodf] dfk</p>
<p>djfij eodf] dfk</p>
<p>djfij eodf] dfk</p>
<p>djfij eodf] dfk</p>
<p>djfij eodf] dfk</p>
<p>djfij eodf] dfk</p>
<p>djfij eodf] dfk</p>
<p>djfij eodf] dfk</p>
<p>djfij eodf] dfk</p>
</div>
<hr>
<div>
<span>span1</span><br>
<h1>标题1</h1>
<span>span2</span><br>
<span>span3</span><br>
<h1>标题2</h1>
<span>span4</span><br>
<span>span5</span><br>
<h1>标题3</h1>
<span>span6</span><br>
<h1>标题4</h1>
<span>span7</span><br>
<span>span8</span><br>
<h1>标题5</h1>
<h1>标题6</h1>
</div>
</body>
</html>
效果演示：
结构性伪类选择器1
结构性伪类选择器2
结构性伪类选择器3
伪元素选择器
- 伪元素用于向某些选择器设置特殊效果，其语法格式为：<code>选择器:伪元素{CSS属性:属性值;}</code> ；
- CSS 中有如下四种伪元素选择器：
- first-line： 为某个元素的第一行文字使用样式；
- first-letter： 为某个元素中的文字的首字母或第一个字使用样式；
- before： 在某个元素之前插入一些内容，使用 content 属性来指定要插入的内容，注意：插入的内容的元素与被插入的元素一样；
- after： 在某个元素之后插入一些内容，使用 content 属性来指定要插入的内容，注意：插入的内容的元素与被插入的元素一样。
代码：
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>伪元素选择器</title>
<style>
/* 首行，注意，行数会跟着浏览器窗口的大小变化而变化 */
p:first-line {
color: red;
}
/* 首个字母 */
p:first-letter {
font-size: 2em;
}
span {
color: chartreuse;
}
span:before {
content: "在之前插入字体>>>";
}
span:after {
content: "<<<在之后插入字体";
}
</style>
</head>
<body>
<p>关于菲律宾单方面提起的南海仲裁案及其所谓裁决，中国外交部今天已发表声明全面阐述了中国政府的严正立场。
我想再次强调，菲律宾阿基诺三世政府单方面提起仲裁的行为违反国际法，是一场披着法律外衣的政治闹剧。
仲裁庭的行为及其裁决严重背离国际仲裁一般实践，有关裁决完全无效，没有法律拘束力。
</p>
<span>这是原本的内容</span>
</body>
</html>
效果演示：
伪元素选择器
其他选择器
1. * 选择器
用于选择所有元素，也可选择另一个元素内的所有元素。
代码：
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>* 选择器</title>
<style>
/* 选择所有的元素 */
* {
color: red;
}
</style>
</head>
<body>
<p>段落1</p>
<h1>标题1</h1>
<span>span</span>
<div>div</div>
<a href="#">这是一个链接</a>
<ul>
<li>首页</li>
<li>热门</li>
<li>消息</li>
</ul>
</body>
</html>
效果演示：
* 选择器
2. 相邻选择器
- 用于选择所有元素，也可选择另一个元素内的所有元素。
- <code>x + y {}</code> 选择同一父元素下所有紧接着 x 元素之后的 y 元素；
- <code>x ~ y {}</code> 选择 x 元素之后的每一个 y 元素。
注意： x 元素、y 元素均为任意元素。
代码：
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>相邻选择器</title>
<style>
/* 选择同一父元素下所有紧接着 p 元素之后的 h1 元素 */
p + h1 {
color: red;
}
/* 选择 p 元素之后的每一个 div 元素 */
p ~ div {
color: blue;
}
</style>
</head>
<body>
<div>
<p>段落1</p>
<h1>标题1</h1>
<p>段落2</p>
<h1>标题2</h1>
<p>段落3</p>
</div>
<p>段落1</p>
<div>div1</div>
<h1>标题3</h1>
<p>段落4</p>
<h1>标题4</h1>
<div>div2</div>
<p>段落5</p>
<div>div3</div>
<div>div4</div>
<div>div5</div>
<h1>标题5</h1>
</body>
</html>
效果演示：
相邻选择器1
相邻选择器2
更多选择器请参考 菜鸟教程 以及 w3cschool.com 。
参考资料：
网友评论