本文要点：

什么叫选择器？它的作用是什么？
选择器的种类
选择器优先级别

什么叫选择器

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 。

参考资料：

CSS - 选择器

CSS - 选择器

什么叫选择器

选择器的种类

标签选择器

类别选择器

id 选择器

属性选择器

后代选择器

继承选择器

伪类选择器

1. 文本伪类选择器

2. 结构性伪类选择器

伪元素选择器

其他选择器

1. * 选择器

2. 相邻选择器

推荐阅读更多精彩内容