CSS选择器（Selector）是用于实现网页页面定义的基础，选择器的主要作用在于确定指定的单个元素或者一类元素。在获取元素之后即可以对所获取的元素进行样式的定义。最终为用户呈现不同交互视觉风格的前端页面。本文主要对常用CSS选择器基本概念与常用属性选择器进行说明与实例展示。

CSS Selector类型划分

按照W3C技术规范划分目前CSS Selector主要类型可以划分为基本选择器、关系选择器、伪选择器三种类型不同的选择器。目前主要CSS选择器类型及分类描述如下图所示：

CSS Selector选择器主要分类描述如上图，其中我们较为常用的选择器主要包括基本选择器、关系选择器及伪选择器中的部分类型。总之，一句话概括的话：选择器的作用就是从HTML文档中找出需要设置样式的一个或者多个HTML元素。

基本常用选择器

本文中我们选取部分常用选择器对其语法进行简单说明，并通过实例进行应用说明与展示。

（一）基本选择器

基本选择器中元素选择器、类选择器与ID选择器是较为常用选择器，也是大部分教材中详细介绍过的选择器类型。常用基本选择器描述如下图：

属性选择器

在基本选择器中以上4类为常用选择器，除此之外初学者使用较少但非常重要的选择器为属性选择器。属性选择器主要根据元素的属性确定选择元素并进行样式的设置。属性选择器主要类型包括7种不同类型选择器，描述如下图所示：

CSS属性选择器常用的其中方法描述如上图所示，通过属性值的选择方式确定选中的元素，进而实现元素样式的设置。属性选择器说明如下：

以下我们通过实例进行说明，HTML代码描述如下：

我们在页面中添加6个不同层，并设置其基本样式，如上图所示，通过使用属性选择器实现样式的改变。原始页面效果如下图：

1、[attr]选择器

该选择器主要根据属性名称确定选中的标记，并对其进行设置。我们将示例文件中的前三个div设置ID属性并以此为选择条件进行DIV样式修改。代码部分如下：

<div id="a">1</div>
<div id="2">2</div>
<div id="3">3</div>

编写选择器如下：

[id]{background-color: red;}

通过该选择器的使用可以准确找到需要设置样式的元素。最终实现效果如下图所示：

2、[attr=value]选择器

以第一种选择器相比较除属性名称之外还需要满足取值等于value。如我们需要将上例中id值为2的DIV进行样式设置，则可直接编写选择器：

[attr="2"]{background-color:red;}

通过value值对attr属性进行筛选，最终找到符合条件的DIV实现背景颜色变化。测试效果如下：

3、[attr~=value]选择器

该选择器可以选择对应属性attr的值为列表形式，且值列表中包含value值。如我们在定义样式中对于多个类选择器的使用一般写法如下：

<div class="cl1 cl2 cl3" id="4">4</div>

上述代码即符合多个属性值，中间空格隔开，因此我们可以编写选择器实现对这个DIV的选择。实现代码如下：

[class~="cl2"]{font-size: 36px;color:white; background-color: blue;}

我们选中该DIV实现样式设置，最终呈现效果如下：

4、[attr|=value]选择器

该选择器主要对attr属性取值为value或者以value-为前缀的元素进行选择。我们将第五个DIV代码进行修改描述如下：

<div class="pure-g pure-from">5</div>

如果要选择这个DIV我们可以编写以下选择器，代码如下：

[class|="pure"]{font-size: 36px;color:white; background-color: gray;}

通过以上选择器及样式编写，可将第五个DIV样式进行修改，显示结果如下：

5、[attr^=value]选择器

该选择器基本与|value选择器类似，只是要求取值为value开头的值。我们修改第六个DIV的代码如下：

<div id="mytest">6</div>

通过编写选择器，在value中包含my进行测试，选择器代码如下：

[id^="my"]{font-size: 36px;color:white; background-color: yellow;}

代码中我们修改了背景颜色为黄色，测试结果如下所示：

6、[attr*=value]选择器

该选择器要求属性attr对应的属性值中包含value，如果包含则选中该元素。我们将第二个DIV进行代码编写，如下：

<div class="val1 val2 val3">2</div>

我们定义如下选择器：

[class*="val1"]{background-color:magenta;}

通过以上选择器我们可以选中第二个DIV，并实现样式设置，我们将背景颜色改为magenta。实现效果如下：

7、[attr$=value]选择器

该方法用于选择attr属性值中以value结尾的元素。我们将第三个DIV代码进行修改，如下：

<div id="mylast">3</div>

编写选择器代码如下：

[id$="last"]{background-color:steelblue;}

通过该选择器可以选择第三个DIV并对其背景颜色进行设置，测试结果如下：

以上给出了常用的基本属性选择器与属性选择器的说明及实例分析。下篇文章我们将对关系选择器进行说明。

本头条号长期关注编程资讯分享；编程课程、素材、代码分享及编程培训。如果您对以上方面有兴趣或代码错误、建议与意见，可在评论区回复。更多程序设计相关教程及实例分享，期待大家关注与阅读！相关文章链接如下：

Web前端设计-JavaScript动态设置CSS样式实例分析

前端设计-JavaScript实现复选框的分组单选

SS是前端重要的组成部分，它能帮助我们通过选择器给标签添加各种样式效果。大家可能工作中最常用的选择器都是id、class以及标签选择器，但是当面对一些复杂的项目场景时，仅仅用这几个基础选择器去操作就会很麻烦。为了在开发中更加得心应手，本文我们就来看看CSS中的选择器都有哪些以及如何去灵活运用。

一、初级选择器

1.1 基础选择器

通配符（*）选择器

语法：*{属性：属性值；}

说明：*表示页面中所有的元素（标签），我们常用来重置样式。

实例：

*{

margin: 0;

padding: 0;

}

标签（元素）选择器

语法：标签名{属性：属性值；}

说明：标签选择器就是使用结构中元素名称直接作为选择符。

实例：

div{

width: 100px;

height: 100px;

}

类（class）选择器

语法：.class名{属性：属性值；}

说明：当我们使用类选择器时，需要先为相应的元素添加class属性。他的属性值就是我们要使用类名。

实例：

<h1 class="title">标题1</h1>

<h2 class="title">标题2</h2>

.title {

color: red;

}

注意：类名要尽量使用英文表示，不能使用数字或中文命名，并且尽量起一些有意义的名字，让别人能一眼看出来这个类名的作用。

类名可以有多个，多个类名之间要使用空格隔开。我们可以把一些标签元素相同的样式放到一个类调用，从而节省CSS代码，例如版心可以写统一样式。

id选择器

语法：#id名{属性：属性值；}

说明：id选择器是使用元素身上的id属性作为选择符。所以想要使用id选择器，需要先为元素上定义id属性。

实例：

<div id="box"></div>

定义好id之后就可使用#box给对应的div上添加：

#box {

width: 100px;

height: 100px;

background-color: pink;

}

注意：起id名时不能用关键字（所有标签和属性都是关键字），并且一个id名称只能对应文档中一个具体的元素对象，因为id的特殊性，只能代表页面中某一个唯一的元素对象，就好比我们的身份证号，一个人只能对应一个唯一的id。

1.2 结构选择器

后代（包含）选择器

语法：选择器1（父） 选择器2（子）{属性：属性值；}

说明：选择器1和选择器2中间用空格隔开，表示选择选择器1中包含选择器2的所有后代元素。

实例：

<div class="box">

<h2>标题1</h2>

<p>段落1</p>

<p>段落2</p>

</div>

.box p {

color: red;

}

子代选择器

语法：选择器1>选择器2{属性：属性值；}

说明：用来选择紧挨着选择器1（父元素）的第一层符合选择器2的子元素。

实例：

<div class="box">

<h2>标题1</h2>

<div>

<h2>标题2</h2>

</div>

</div>

.box > h2 {

color: red;

}

全部兄弟选择器

语法：选择器1~选择器2{属性：属性值；}

说明：选择当前元素所有符合条件的兄弟元素。

实例：

<div class="box">

<h2>标题1</h2>

<p>段落</p>

<h2>标题2</h2>

<h2>标题3</h2>

</div>

p ~ h2 {

color: red;

}

注意：只能选中当前元素后面的元素。

相邻兄弟选择器

语法：选择器1+选择器2{属性：属性值；}

说明：选中当前元素紧挨着的后面的兄弟元素。

实例：上面的案例修改成：

p + h2 {

color: red;

}

注意：只能选中当前元素后面的元素，如果没有紧挨着当前元素就不会产生效果。

并集（群组）选择器

语法：选择器1，选择器2{属性：属性值；}

说明：用于对多个标签定义同样的样式，选择器之间用逗号分隔。

实例：这里我们依然用上述的结构：

p,

h2 {

color: red;

}

交集选择器

语法：选择器1选择器2{属性：属性值；}

说明：用于选择同时符合选择器1和选择器2条件的元素。

实例：

<h2 class="title">标题1</h2>

<h2>标题2</h2>

h2.title {

color: red;

}

二、属性选择器

属性选择器是通过元素的属性以及属性值来选择对应元素的，属性名我们可以自己定义。

属性的或运算

语法：选择器[属性名]{属性：属性值；}

说明：只要选择器元素中有当前属性就会被选中。

实例：

<h2 class="title" name>标题1</h2>

<h2>标题2</h2>

.title[name] {

color: red;

}

属性的与运算

语法：选择器[属性1][属性2]{属性：属性值；}

说明：选择同时包含属性1和属性2的元素。

实例：

<h2 class="title" name>标题1</h2>

<h2 name>标题2</h2>

h2[name][class] {

color: red;

}

属性值的筛选

语法：选择器[属性名='要求']{属性：属性值；}

说明：选择对应的属性值符合要求的元素。

实例：

<h2 class="title" name>标题1</h2>

<h2 class="title2" name>标题2</h2>

h2[class='title'] {

color: red;

}

前缀筛选^

语法：选择器[属性名^='要求']{属性：属性值；}

说明：选择属性值以当前要求开头的元素。

实例：

<h2 class="title">标题1</h2>

<h2 class="title2">标题2</h2>

<h2 class="stitle">标题3</h2>

h2[class^='tit'] {

color: red;

}

后缀筛选$

语法：选择器[属性名$='要求']{属性：属性值；}

说明：选择属性值以当前要求结尾的元素。

实例：这里我们使用上述的结构：

h2[class$='tle'] {

color: red;

}

包含限定*

语法：选择器[属性名*='要求']{属性：属性值；}

说明：选择属性值包含当前要求的元素。

实例：这里我们使用上述的结构：

h2[class*='title'] {

color: red;

}

包含限定~

语法：选择器[属性名~='要求']{属性：属性值；}

说明：选择属性值包含一个给定要求词（单独存在）的元素。

实例：

<h2 class="title">标题1</h2>

<h2 class="xx title xx">标题2</h2>

<h2 class="stitle">标题3</h2>

h2[class~='title'] {

color: red;

}

包含限定|

语法：选择器[属性名|='要求']{属性：属性值；}

说明：选择属性值只有给定要求或者是以给定要求开头后面用“-”拼接其他字符串的元素。

实例：

<h2 class="title">标题1</h2>

<h2 class="title-xx">标题2</h2>

<h2 class="title.xx">标题3</h2>

<h2 class="xx-title">标题4</h2>

h2[class|='title'] {

color: red;

}

三、伪类选择器:

CSS伪类选择器用于像某些元素添加特殊效果，比如第一个元素、某个元素的子元素、鼠标滑过的元素。

3.1 动态伪类选择器

动态伪类选择器在日常工作中主要用于超链接标签。

说明：前4个超链接伪类选择器联合使用时，就注意他们的顺序，a:hover必须在a:link和a:visited之后，a:active必须在a:hover之后。错误的顺序有时会使超链接的样式失效。

a:link{color:red;} /* 未访问的链接状态 */

a:visited{color:green;} /* 已访问的链接状态 */

a:hover{color:blue;} /*鼠标滑过链接状态*/

a:active{color:yellow;} /*鼠标按下去时状态*/

3.2 结构伪类选择器

结构伪类指利用页面的布局结构选择响应的元素。

注意：结构伪类选择器中，子元素的序号是从1开始的，所以，当参数n的计算结果为0 时，将不选择任何元素。

3.3 其他伪类选择器

四、伪元素选择器::

伪元素选择器可以帮助我们利用CSS创建新的标签元素（伪元素），从而达到简化结构的目的。

注意：利用before和after创建的元素属于行内元素，而这个元素我们不能在结构中看到，所以称它为伪元素。

五、选择器权重

在CSS中我们用四位数字表示选择器的权重，方便我们去判断样式的优先级。

当权重相同时，样式遵循就近原则，CSS中哪个选择器最后定义，就执行哪个选择器的样式。

!important代表权重最高（最终的样式）。

background-color：skyblue!important;

所以最终样式的优先级应该为：

!important>行内样式>id选择器>class选择器=伪类选择器=属性选择器>标签选择器=伪元素选择器>通配符选择器>继承样式。

总结

以上就是为大家总结的CSS选择器的种类及功能。总的来说，碰到各种各样的工作场景，我们需要灵活运用这些选择器，并且当选择器样式冲突时，我们就得及时发现并且完成权重的解析从而解决问题。解析规则大致如下：

• 当不同选择器的样式设置有冲突时，高权重选择器的样式会覆盖低权重选择器的样式。
• 相同权重的选择器，样式遵循就近原则。哪个选择器样式最后定义，就会采用哪个样式。
• 需要注意，CSS具有继承性，即子标签会继承父标签的某些样式。但是继承样式没有权重。所以在嵌套结构中，不管父元素样式的权重多大，在子元素定义的样式都会覆盖继承来的样式。

SS3 选择器——基本选择器

1、通配符（*）

<ul class="demo">
        <li>1</li>
        <li>2</li>
        <li>3</li>
        <li>4</li>
        <li>5</li>
</ul>
.demo * {border:1px solid blue;}

2、元素选择器（Element）

<ul class="demo">
        <li>1</li>
        <li>2</li>
        <li>3</li>
        <li>4</li>
        <li>5</li>
</ul>

li { background-color: grey; color: orange; }

元素选择器，是css选择器中最常见而且最基本的选择器。元素选择器其实就是文档的元素，如html,body,p,div等等，比如这个demo：中元素包括了div,ul,li等。

3、类选择器（.className）

<ul class="demo">
    <li>1</li>
    <li class="li-2">2</li>
    <li>3</li>
    <li>4</li>
    <li>5</li>
</ul>

.li-2 {font-weight: bold; color: yellow;}

上面代码表示是给有 "li-2" 类名的元素加上一个“字体为粗体，颜色为黄色”的样式。

4、id选择器（#ID）

<ul class="demo">
    <li id="first">1</li>
    <li class="li-2">2</li>
    <li>3</li>
    <li>4</li>
    <li id="last">5</li>
</ul>

#first {background: lime;color: #000;}
#last {background: #000;color: lime;}
上面的代码选择了id为"first"和"last"的li。

5、后代选择器（E F）

<ul class="demo">
    <li>1</li>
    <li>2</li>
    <li>3</li>
    <li>4</li>
    <li>5</li>
</ul>

ul li { background-color: red; color: #fff; }

元素的子元素或者是孙元素或者是更深层次的关系，都将被选中，换句话说，不论li在ul中有多少层关系，都将被选中。注意他们之间需要一个空格隔开

6、子元素选择器(E>F)

<ul class="demo">
    <li>1</li>
    <li>2</li>
    <li>3</li>
    <li>4</li>
    <li>5</li>
</ul>

ul > li {background: green;color: yellow;}

子元素选择器只能选择某元素的第一层子元素，其中ul为父元素，而li为子元素，其中ul>li所表示的是：选择了ul元素下的所有第一层子元素li。简单的说就是只选择当前第一层级的子元素

7、相邻兄弟元素选择器(E + F)

<ul class="demo">
    <li>1</li>
    <li>2</li>
    <li>3</li>
    <li>4</li>
    <li>5</li>
</ul>

li + li {background: green;color: yellow; border: 1px solid #ccc;}

相邻兄弟选择器可以选择紧接在另一个元素后面的元素。

上面的 li+li，其中第二个li是第一个li的相邻元素，第三个又是第二个相邻元素，因此第三个也被选择，依此类推，所以后面4个li都被选中了。

8、通用兄弟选择器（E 〜 F）

<ul class="demo">
    <li>1</li>
    <li>2</li>
    <li>3</li>
    <li>4</li>
    <li>5</li>
    <li>6</li>
    <li>7</li>
</ul>

.active ~ li {background: green;color: yellow; border: 1px solid #ccc;}

选择某元素后面的所有兄弟元素（选择相邻的所有兄弟元素），和相邻选择器类似（相邻选择器只选择相邻的一个元素）

选择中了li.active 元素后面的所有兄弟元素li

9、群组选择器

<ul class="demo">
    <li  class="first">1</li>
    <li>2</li>
    <li  class="li-3">3</li>
    <li>4</li>
    <li class="last">5</li>
</ul>

.first,
.last,
.li-3 {background: green;color: yellow; border: 1px solid #ccc;}

群组选择器是将具有相同样式的元素分组在一起，每个选择器之间使用逗号“，”隔开

li.first和li.last和.li-3具有相同的样式效果，所以我们把他们写到一个组里

CSS3 选择器——属性选择器

1、E[attr]：只使用属性名，但没有确定任何属性值

       <ul class="demo">
            <a href="http://www.w3cplus.com" target="_blank" class="links item first" id="first" title="w3cplus">1</a>
            <a href="" class="links active item" title="test website" target="_blank" lang="zh">2</a>
            <a href="sites/file/test.html" class="links item" title="this is a link" lang="zh-cn">3</a>
            <a href="sites/file/test.png" class="links item" target="_balnk" lang="zh-tw">4</a>
            <a href="sites/file/image.jpg" class="links item" title="zh-cn">5</a>
            <a href="mailto:w3cplus@hotmail" class="links item" title="website link" lang="zh">6</a>
            <a href="" class="links item" title="open the website" lang="cn">7</a>
            <a href="" class="links item" title="close the website" lang="en-zh">8</a>
            <a href="" class="links item" title="http://www.sina.com">9</a>
            <a href="" class="links item last" id="last">10</a>
        </ul>
    

.demo a[id] { background: blue; color:yellow; font-weight:bold; }

选择了div.demo下所有带有id属性的a元素，并在这个元素上使用背景色为蓝色，字体加粗并为黄色的样式，

2、E[attr="value"]选择指定的属性对象

        <ul class="demo">
            <a href="http://www.w3cplus.com" target="_blank" class="links item first" id="first" title="w3cplus">1</a>
            <a href="" class="links active item" title="test website" target="_blank" lang="zh">2</a>
            <a href="sites/file/test.html" class="links item" title="this is a link" lang="zh-cn">3</a>
            <a href="sites/file/test.png" class="links item" target="_balnk" lang="zh-tw">4</a>
            <a href="sites/file/image.jpg" class="links item" title="zh-cn">5</a>
            <a href="mailto:w3cplus@hotmail" class="links item" title="website link" lang="zh">6</a>
            <a href="" class="links item" title="open the website" lang="cn">7</a>
            <a href="" class="links item" title="close the website" lang="en-zh">8</a>
            <a href="" class="links item" title="http://www.sina.com">9</a>
            <a href="" class="links item last" id="last">10</a>
        </ul>

.demo a[id="first"] {background: blue; color:yellow; font-weight:bold; }

选择了.demo a[id="first"] 选择属性id的值为first的对象。

3、E[attr~="value"] 包含属性值

        <ul class="demo">
            <a href="http://www.w3cplus.com" target="_blank" class="links item first" id="first" title="w3cplus">1</a>
            <a href="" class="links active item" title="test website" target="_blank" lang="zh">2</a>
            <a href="sites/file/test.html" class="links item" title="this is a link" lang="zh-cn">3</a>
            <a href="sites/file/test.png" class="links item" target="_balnk" lang="zh-tw">4</a>
            <a href="sites/file/image.jpg" class="links item" title="zh-cn">5</a>
            <a href="mailto:w3cplus@hotmail" class="links item" title="website link" lang="zh">6</a>
            <a href="" class="links item" title="open the website" lang="cn">7</a>
            <a href="" class="links item" title="close the website" lang="en-zh">8</a>
            <a href="" class="links item" title="http://www.sina.com">9</a>
            <a href="" class="links item last" id="last">10</a>
        </ul>

.demo a[title~="website"]{ background:orange; color:green; }

div.demo下的a元素的title属性中，只要其属性值中含有"website"这个词就会被选择

4、E[attr^="value"] 选择attr属性值以“value”开头的所有元素

        <ul class="demo">
            <a href="http://www.w3cplus.com" target="_blank" class="links item first" id="first" title="w3cplus">1</a>
            <a href="" class="links active item" title="test website" target="_blank" lang="zh">2</a>
            <a href="sites/file/test.html" class="links item" title="this is a link" lang="zh-cn">3</a>
            <a href="sites/file/test.png" class="links item" target="_balnk" lang="zh-tw">4</a>
            <a href="sites/file/image.jpg" class="links item" title="zh-cn">5</a>
            <a href="mailto:w3cplus@hotmail" class="links item" title="website link" lang="zh">6</a>
            <a href="" class="links item" title="open the website" lang="cn">7</a>
            <a href="" class="links item" title="close the website" lang="en-zh">8</a>
            <a href="" class="links item" title="http://www.sina.com">9</a>
            <a href="" class="links item last" id="last">10</a>
        </ul>

.demo a[href^="http://"]{ background:orange; color:green; }
.demo a[href^="mailto:"]{ background:green; color:orange; }
选择了以href属性并且以"http://"和"mailto:"开头的所有a元素。

5、E[attr$="value"] 选择attr属性值以"value"结尾的所有元素

        <ul class="demo">
            <a href="http://www.w3cplus.com" target="_blank" class="links item first" id="first" title="w3cplus">1</a>
            <a href="" class="links active item" title="test website" target="_blank" lang="zh">2</a>
            <a href="sites/file/test.html" class="links item" title="this is a link" lang="zh-cn">3</a>
            <a href="sites/file/test.png" class="links item" target="_balnk" lang="zh-tw">4</a>
            <a href="sites/file/image.jpg" class="links item" title="zh-cn">5</a>
            <a href="mailto:w3cplus@hotmail" class="links item" title="website link" lang="zh">6</a>
            <a href="" class="links item" title="open the website" lang="cn">7</a>
            <a href="" class="links item" title="close the website" lang="en-zh">8</a>
            <a href="" class="links item" title="http://www.sina.com">9</a>
            <a href="" class="links item last" id="last">10</a>
        </ul>

.demo a[href$="png"]{ background:orange; color:green; }
选择div.demo中元素有href属性，并以png值结尾的a元素。

6、E[attr*="value"] 选择attr属性值中包含子串"value"的所有元素。

        <ul class="demo">
            <a href="http://www.w3cplus.com" target="_blank" class="links item first" id="first" title="w3cplus">1</a>
            <a href="" class="links active item" title="test website" target="_blank" lang="zh">2</a>
            <a href="sites/file/test.html" class="links item" title="this is a link" lang="zh-cn">3</a>
            <a href="sites/file/test.png" class="links item" target="_balnk" lang="zh-tw">4</a>
            <a href="sites/file/image.jpg" class="links item" title="zh-cn">5</a>
            <a href="mailto:w3cplus@hotmail" class="links item" title="website link" lang="zh">6</a>
            <a href="" class="links item" title="open the website" lang="cn">7</a>
            <a href="" class="links item" title="close the website" lang="en-zh">8</a>
            <a href="" class="links item" title="http://www.sina.com">9</a>
            <a href="" class="links item last" id="last">10</a>
        </ul>

.demo a[title*="site"]{ background:black; color:white; }
选择了div.demo中a元素，而a元素的title属性中只要有"site"就选中。

7、E[attr|="value"] 选择attr属性值等于value或以value-开头的所有元素

        <ul class="demo">
            <a href="http://www.w3cplus.com" target="_blank" class="links item first" id="first" title="w3cplus">1</a>
            <a href="" class="links active item" title="test website" target="_blank" lang="zh">2</a>
            <a href="sites/file/test.html" class="links item" title="this is a link" lang="zh-cn">3</a>
            <a href="sites/file/test.png" class="links item" target="_balnk" lang="zh-tw">4</a>
            <a href="sites/file/image.jpg" class="links item" title="zh-cn">5</a>
            <a href="mailto:w3cplus@hotmail" class="links item" title="website link" lang="zh">6</a>
            <a href="" class="links item" title="open the website" lang="cn">7</a>
            <a href="" class="links item" title="close the website" lang="en-zh">8</a>
            <a href="" class="links item" title="http://www.sina.com">9</a>
            <a href="" class="links item last" id="last">10</a>
        </ul>

.demo a[lang|="zh"]{ background: gray; color: yellow; }

选择了div.demo中lang属性等于zh或以zh-开头的所有a元素。

CSS3 选择器——伪类选择器

1、:first-child 选择某个元素的第一个子元素

<ul class="demo">
    <li>1</li>
    <li>2</li>
    <li>3</li>
    <li>4</li>
    <li>5</li>
</ul>

.demo li:first-child { background: red; border: 1px solid yellow; color: #fff; }
选择某个元素的第一个子元素。

2、:last-child 选择某个元素的最后一个子元素

<ul class="demo">
    <li>1</li>
    <li>2</li>
    <li>3</li>
    <li>4</li>
    <li>5</li>
</ul>

.demo li:last-child { background: red; border: 1px solid yellow; color: #fff; }
选择某个元素的最后一个子元素。

3、:nth-child() 选择某个的一个或多个特定的子元素

• :nth-child(number);/*参数是具体数字*/
• :nth-child(n);/*参数是n,n从0开始计算*/
• :nth-child(n*length)/*n的倍数选择，n从0开始算*/
• :nth-child(n+length);/*选择大于length后面的元素*/
• :nth-child(-n+length)/*选择小于length前面的元素*/
• :nth-child(n*length+1);/*表示隔几选一*/

<ul class="demo">
    <li>1</li>
    <li>2</li>
    <li>3</li>
    <li>4</li>
    <li>5</li>
</ul>

:nth-child() 可以定义括号的值（值可以是整数，也可以是表达式）

.demo li:nth-child(3) { background: red; border: 1px solid yellow; color: #fff; }
选择 div 元素下的第3个 li 子元素。

[微风][微风]

:nth-child(n) /*参数是n,n从0开始计算*/

.demo li:nth-child(n) { background: red; border: 1px solid yellow; color: #fff; }
等于.demo li {background: lime;}

n是一个简单的表达式，那么"n"取值是从“0”开始计算。

​[微风][微风]

:nth-child(n*length)

.demo li:nth-child(2n) { background: red; border: 1px solid yellow; color: #fff; }
等于.demo li:nth-child(even) {}

选择偶数的对象：n是一个简单的表达式，那么"n"取值是从“0”开始计算。
表达示结果，如下:
.demo li:nth-child(2n) = (2*0) = 0
.demo li:nth-child(2n) = (2*1) = 2
.demo li:nth-child(2n) = (2*2) = 4
.demo li:nth-child(2n) = (2*3) = 6
以此类推....

​[微风][微风]

.demo li:nth-child(2n-1) { background: red; border: 1px solid yellow; color: #fff; }
等于.demo li:nth-child(odd) {}

选择奇数的对象：n是一个简单的表达式，那么"n"取值是从“0”开始计算。
表达示结果，如下:
.demo li:nth-child(2n-1) = (2*0-1) = -1
.demo li:nth-child(2n-1) = (2*1-1) = 1
.demo li:nth-child(2n-1) = (2*2-1) = 3
.demo li:nth-child(2n-1) = (2*3-1) = 5
以此类推....

​[微风][微风]

:nth-child(n+length); /*选择大于length后面的元素*/

nth-child(n+5)从第五个元素开始选择，这里的数字你可以自己定义
.demo li:nth-child(n+5){ background: red; border: 1px solid yellow; color: #fff; }

n是一个简单的表达式，那么"n"取值是从“0”开始计算。

表达示结果，如下:
.demo li:nth-child(0+5) = 5
.demo li:nth-child(1+5) = 6
.demo li:nth-child(2+5) = 7
.demo li:nth-child(3+5) = 8
以此类推....

​[微风][微风]

nth-child(-n+5)反向从第五个元素开始选择，这里的数字你可以自己定义

.demo li:nth-child(-n+5){ background: red; border: 1px solid yellow; color: #fff; }

n是一个简单的表达式，那么"n"取值是从“0”开始计算。

表达示结果，如下:
.demo li:nth-child(-0+5) = 5
.demo li:nth-child(-1+5) = 4
.demo li:nth-child(-2+5) = 3
.demo li:nth-child(-3+5) = 2
以此类推....

​[微风][微风]

:nth-child(n*length+1); /*表示隔几选一*/

:nth-child(4n+1)间隔选择对象，数字可自定义

.demo li:nth-child(4n+1) { background: red; border: 1px solid yellow; color: #fff; }

n是一个简单的表达式，那么"n"取值是从“0”开始计算。

表达示结果，如下:
.demo li:nth-child(4*0+1) = 1
.demo li:nth-child(4*1+1) = 5
.demo li:nth-child(4*2+1) = 9
.demo li:nth-child(4*3+1) = 13
以此类推....

4、:nth-last-child() 选择指定的元素，从最后一个开始

.demo li:nth-last-child(4) { background: red; border: 1px solid yellow; color: #fff; }
选择倒数第四个元素。

​[微风][微风]

可以用表达示，选择奇数

.demo li:nth-last-child(2n) { background: red; border: 1px solid yellow; color: #fff; }

n是一个简单的表达式，那么"n"取值是从“0”开始计算。

表达示结果，如下:
:nth-last-child(2*1) = 2
:nth-last-child(2*2) = 4
:nth-last-child(2*3) = 6
:nth-last-child(2*4) = 8
以此类推....

​[微风][微风]

可以用表达示，选择偶数

.demo li:nth-last-child(2n-1) { background: red; border: 1px solid yellow; color: #fff; }

n是一个简单的表达式，那么"n"取值是从“0”开始计算。

表达示结果，如下:
:nth-last-child(2*1-1) = 1
:nth-last-child(2*2-1) = 3
:nth-last-child(2*3-1) = 5
:nth-last-child(2*4-1) = 7
:nth-last-child(2*5-1) = 9

5、:nth-of-type 选择指定的类型元素

.demo li:nth-of-type(8) { background: red; border: 1px solid yellow; color: #fff; }
指定获取 类型为 li 的第8个元素，中间间隔了a元素

​[微风][微风]

与 :nth-child区别，:nth-child不指定类型 .demo li:nth-child(8) { background: red; border: 1px solid yellow; color: #fff; }

指定获取元素为li第8个元素，中间间隔了a元素，因没有指定类型，而第8个元素是a，所以无法设置样式

6、:nth-last-of-type() 选择指定类型的元素，从元素的最后一个开始计算

.demo li:nth-last-of-type(2) { background: red; border: 1px solid yellow; color: #fff; }

数字可使用n表达式计算，从最后一个元素开始计算，获取指定类型为 li 的第2个元素，

7、:first-of-type 选择指定类型的第一个元素；

.demo li:first-of-type { background: red; border: 1px solid yellow; color: #fff; }

:first-of-type与:first-child类型，前者区别了类型，后者无区域

获取第一个为 li 的元素，子元素中包含了a、li两种元素

8、:last-of-type 选择指定类型的最后一个元素；

.demo li:last-of-type { background: red; border: 1px solid yellow; color: #fff; }

:last-of-type与:last-child类型，前者区分了类型，后者无区分

获取最后一个为 li 的元素，子元素中包含了a、li两种元素

9、:only-child 选择的元素是它的父元素的唯一一个了元素；

        <div>
            <p>我是子级，在父级中是唯一一个子元素。</p>
        </div>

        <div>
            <span>我是span标签，在父级中并不是唯一的子元素，因为还有一个p标签。</span>
            <p>我是p标签，在父级中并不是唯一的子元素，因为还有一个span标签。</p>
        </div>

        <p>
            我是p标签，而我并没有父级。
        </p>

p:only-child { background: #ff0000; }

我是子级，在父级中是唯一一个子元素。
我是span标签，在父级中并不是唯一的子元素，因为还有一个p标签。
我是p标签，在父级中并不是唯一的子元素，因为还有一个span标签。
我是p标签，而我并没有父级。

10、:only-of-type 选择一个元素是它的上级元素的唯一一个相同类型的子元素；

        <div>
            <p>我是子级p元素，在父级中是唯一的一个p元素。所以会被选择中。</p>
            <span>我是子级span元素，在父级中并不是唯一的span元素。</span>
            <span>我是子级span元素，在父级中并不是唯一的span元素。</span>
            <span>我是子级span元素，在父级中并不是唯一的span元素。</span>
        </div>
        <div>
            <p>我是p标签，在父级中并不是唯一的p元素，因为还有一个和我相同的p元素。所以不会被选中。</p>
            <p>我是p标签，在父级中并不是唯一的p元素，因为还有一个和我相同的p元素。所以不会被选中。</p>
        </div>

p:only-of-type { background:#ff0000; }

我是子级p元素，在父级中是唯一的一个p元素。所以会被选择中。

我是子级span元素，在父级中并不是唯一的span元素。 我是子级span元素，在父级中并不是唯一的span元素。 我是子级span元素，在父级中并不是唯一的span元素。

我是p标签，在父级中并不是唯一的p元素，因为还有一个和我相同的p元素。所以不会被选中。
我是p标签，在父级中并不是唯一的p元素，因为还有一个和我相同的p元素。所以不会被选中。

11、:empty 选择的元素里面没有任何内容。

        <p>我是一个p标签，我<span style="color: red;">下面</span>有个p标签，内容是空的，所以它会被选中。</p>
        <p></p>
        <p>我是一个p标签，我<span style="color: red;">上面</span>有个p标签，内容是空的，所以它会被选中。</p>
        <p>我是一个p标签。</p>
        <p>我是一个p标签。</p>

p:empty { background:#ff0000; }

第2行的p标签会被选中，因为它没有内容。