HHMLCSS 选择器总结

    所有标签

标签名称 所有同名的标签

#id     指定此id的标签

className 含有此className的标签

E F  包含选择器，选择所有被E元素包含的F元素。

E>F  子选择器，选择所有作为E元素的子元素F。

E+F  相邻选择器，选择紧贴在E元素之后的F元素。

E~F   兄弟选择器，选择E元素之后所有兄弟元素F。

E:nth-child(n)   择父元素的第n个子元素E，如果第n个子元素不是E，则是无效选择器，但n会递增，支持2n+1，3n+2等公式

:nth-last-child(n) 倒数第n个子元素

:only-child     只有1个子标签(匹配父元素仅有的一个子元素)

:first-child 第1个子标签(必须是它的兄弟元素中的第一个元素,换言之，必须是父元素的第一个子元素)

:last-child 最后1个子标签(必须是它的兄弟元素中的最后一个元素，换言之，必须是父元素的最后一个子元素)

:nth-of-type(n)     第n个同类型的兄弟标签

:nth-last-of-type(n) 同类型中的倒数第n个同级兄弟元素

:only-of-type 匹配同类型中的唯一的子元素

:first-of-type  匹配同类型中的第一个同级兄弟元素

:last-of-type  匹配同类型中的最后一个同级兄弟元素

:empty  匹配没有任何子元素（包括text节点）的元素

:lang()  匹配使用特殊语言的元素

:link      超链接在未被访问前的样式

:visited  超链接在其链接地址已被访问过时的样式

:hover    元素在其鼠标悬停时的样式

:active    元素在被用户激活（在鼠标点击与释放之间发生的事件）时的样式

::first-letter      设置对象内的第一个字符的样式，能实现类似印刷的首字放大的效果

::first-line        设置对象内的第一行的样式

::before            前缀 (设置在对象前发生的内容。用来和content属性一起使用，并且必须定义content属性)

::after            后缀 (设置在对象后发生的内容。用来和content属性一起使用，并且必须定义content属性)

注意:CSS3将伪对象选择器前面的单个冒号(:)修改为双冒号(::)用以区别伪类选择器，但以前的写法仍然有效，

但因为兼容性的问题，所以现在大部分还是统一的单冒号，抛开兼容性的问题，我们在书写时应该尽可能养成好习惯，区分两者

[a]     选择具有属性a的元素。

[a="b"]     选择具有属性a且属性值等于b的元素。

[a~="b"] 选择具有属性a且属性值用空格分隔的字词列表，其中一个等于b的元素。

[a^="b"] 选择具有属性a且属性值为以b开头的字符串的元素。

[a$="b"] 选择具有属性a且属性值为以b结尾的字符串的元素。

[a="b"]    选择具有属性a且属性值为包含b的字符串的元素。

[a|="b"]    选择具有属性a且属性值为以b开头并用连接符"-"分隔的字符串的元素，如果属性值仅为b，也将被选择。

, 同时选取多个元素

单独的文字不是标签（是文档节点），所以不能用大部分选择器 *** 作

同一个标签可以使用多个样式类（用空格分隔）因此常将通用的样式定义为样式类以供组合使用

在一个产品中，使用的字号是有限的几种，因此可以定义如 f1，f2，f3，f4，f5等字号类

还可以定义文字颜色，如black，gray1，gray2，gray3，blue1，blue2，gold1，gold2

使用时可以组合，如 f2 gray1表示2号大的1号灰文字

所谓的层叠性与优先级，其实说白了可以理解为，不同的规则起冲突的情况下，听谁的呢？有的时候这种冲突很容易解决，有的时候我们自己都难以决断，比如好声音三位导师都选你，该跟谁走呢。索性css给出了这些规则的优先级，不需要我们去苦恼。

元素的样式该如何去展现呢，首先看一下某个元素某个属性可能作用样式的情况：

下面我们来详细分析一下这三种情况。

我们先来看有唯一指定样式的情况，因为，这种情况最简单，就一个选择，也别挑了，说啥就是啥。我们还是来大致看看。

结论：若只有唯一指定样式，以该样式为准。

多个样式规则冲突，其实有很多种情况。还记得我们学过样式引入方式有四种，涉及三种样式，分别是内联，内部和外部（参考 CSS入门4-引入CSS ）。首先我们来看只引入其中一种类型的情况下，出现冲突该如何解决。

仅有内联的情况下，要出现冲突，只可能是在style中多次对同一个属性赋值。

看上图，审查一下元素，可以看到该元素样式中，前面的red被覆盖了，color最后的取值是blue。最右边文字的颜色确实也是蓝色。

结论：只有内联样式，后面的属性赋值优先级大于前面的属性赋值。

内部样式，已经可以选择多种选择器来指定样式。所以，这里情况比内联会复杂很多。首先来复习一下选择器的种类，可以参考 CSS入门5-选择器 。这么多的选择器类型和组合关系，可能都会产生冲突，这个时候怎么办呢，想想都复杂，我们继续拆分问题。将选择器分为四类:

可以看到div中两个类对颜色的定义冲突时，不管class定义的顺序如何，以style中类的顺序为准，后面的覆盖前面的样式。如果是同一选择器，也是后者覆盖前者，这种情况可以涵盖在同类选择器的情况下。

结论：同类型选择器（类型一样，即同为元素选择器，类选择器，id选择器或者属性选择器），按style中的先后顺序，后者优先级更高。

我们选择正反两种顺序，来看不同选择器之间的比较。首先，四种选择器在一起时，id选择器获胜。然后排除id选择器，剩余三种选择器比较时，类和属性谁在下边谁赢，也就是后者覆盖前者。最后，元素分别与类和属性比较，发现元素都输了。

结论：id > (类和属性) > 元素，类和属性同级，遵循同级元素后者覆盖前者的规则。

注：查看某个元素样式的时候，调试窗口是按照优先级规则从小到大往上排的，越往上的规则优先级越高，对同个属性的样式规定将会覆盖下面低优先级的样式规定。

注：要想在调试器看到动态伪类效果，需要在styles中勾选该效果。

看上面示例，我们在style内先按id，类，属性，元素，静态伪类(只应用于超链接)，动态伪类(可应用于任何元素)，目标伪类:target(IE8-不支持，匹配锚点对应的目标元素)，UI元素伪类(IE8-不支持)，结构伪类(IE8-不支持)的顺序指定规则。结果发现其表现如下：

a：id > 结构伪类 > 动态伪类 > 静态伪类 > 属性 > 类 > 元素 > 浏览器默认属性 > 继承属性

input：id > 结构伪类 > UI元素伪类 > 目标伪类 > 动态伪类 > 类 > 元素 > 浏览器默认属性 > 继承属性

我们合并一下这两个结论，有如下结论：

321221-1 id > 结构伪类 > UI元素伪类 > 目标伪类 > 动态伪类 > 静态伪类 > 属性 > 类 > 元素 > 浏览器默认属性 > 继承属性

（当然，需要注意的是，并不是每个元素都有这些属性的）

然后，我们将style内各规则倒序一下:

结果发现其表现如下：

a：id > 类 > 属性 > 静态伪类 > 动态伪类 > 结构伪类 > 元素 > 浏览器默认属性 > 继承属性

input：id > 类 > 动态伪类 > 目标伪类 > UI元素伪类 > 结构伪类 > 元素 > 浏览器默认属性 > 继承属性

我们合并一下这两个结论，有如下结论：

321221-2 id > 类 > 属性 > 静态伪类 > 动态伪类 > 目标伪类 > UI元素伪类 > 结构伪类 > 元素 > 浏览器默认属性 > 继承属性

综合321221-1和321221-2来看，我们再次验证了类和属性同级，并且发现它们和伪类也是同级的。有如下结论：

结论：id > (类，属性，伪类) > 元素，类，属性和伪类同级，遵循同级元素后者覆盖前者的规则。

伪元素，说是元素，但又不是真实的元素，是一个虚拟的元素。如何详细理解这段话呢，我们来看一下下面这个例子。

先按后代，子代，通用兄弟，相邻兄弟在style中排序，发现后面的优先级高。然后顺序反过来：

由以上几点结论可以得出， 亲戚关系发生冲突时，先看id选择器数量，谁多谁大，一样多就看类（及其同级）选择器，谁多谁大，若还是一样多，则看元素选择器，谁多谁大。如果仍然一样多，谁在后面谁优先。

可以看出， 通配选择器样式优先级仅比浏览器默认样式和继承样式优先级高一些 。

总结3212 仅有内部样式的情况，有如下结论：

ps:对于社群关系，在比较优先级时，将其理解为在该位置拆按顺序成一个个单独的个体即可。

这种情况的表现形式与内部样式一样。

这种情况遵循后者覆盖前者的原则，后面的link优先于前面的link，而不管其加载的顺序如何。

内联 > 内部 > 外部

CSS的继承性、层叠性、权重

css知多少（3）——样式来源与层叠规则

深入理解CSS中的层叠上下文和层叠顺序

下面例子通过documentgetElementsByClassName("class1")获取所有同一class的元素，使用for循环把取得的div元素的值存入数组arr中，完成的代码如下：

运行结果，打印数组如下：

扩展资料：

js或jQuery获取html元素的值的常用方法：

例如：<div id="aa">值</div>

js写法：

alert(documentgetElementById('aa')innerHTML);

jQuery写法：

alert($('#aa')html());

说明如下：

innerHTML是取元素的内部html代码，此例中即div内部的所有html代码。

html()方法作用也是取dom节点的内部html内容，是jQuery中的函数方法。

id：指定标签的唯一标识，定位到页面上唯一的元素。

使用场景： 使用#name定义（name为id名，可任意取名），使用id="name"调用，其优先级高于类选择器，一个标签只能有一个id且每个id只能使用一次，多用于页面分块的块级标签上。

class ：类选择器，指定标签的类名，定位到页面上某一类的元素 。

使用场景：使用name定义（name为类名，可任意取名），使用class="name"调用，一个标签可以有多个类且同一个类可以用到不同的标签上，多用于多个标签样式相似或完全相同时。

{} / a=0 b=0 c=0 d=1 -> 0,0,0,0 /

p {} / a=0 b=0 c=0 d=1 -> 0,0,0,1 /

a:hover {} / a=0 b=0 c=1 d=1 -> 0,0,1,1 /

ul li {} / a=0 b=0 c=0 d=2 -> 0,0,0,2 /

ul ol+li {} / a=0 b=0 c=0 d=3 -> 0,0,0,3 /

h1+input[type=hidden]{} / a=0 b=0 c=1 d=2 -> 0,0,1,1 /

ul ol liactive {} / a=0 b=0 c=1 d=3 -> 0,0,1,3 /

#ct box p {} / a=0 b=1 c=1 d=1 -> 0,1,1,1 /

div#header:after {} / a=0 b=1 c=0 d=2 -> 0,1,0,2 /

style="" / a=1 b=0 c=0 d=0 -> 1,0,0,0 /

先比较a，a大的权重最大，再依次比较b，c，d

#header{ }

id选择器，匹配特定id为header的元素

header{ }

类选择器，匹配class包含header的元素

header logo{ }

后代选择器，匹配class为header元素所有的后代（不只是子元素、子元素向下递归）

calss为logo的元素

headermobile{ }

匹配class既有header又有logo的元素

header p, header h3{ }

同时匹配class为header所有后代元素p和class为header所有后代元素h3

#header nav>li{ }

匹配id为header元素所有后代中calss为nav的所有直接子元素li

#header a:hover{ }

匹配id为header所有后代中鼠标悬停其上的a元素

#header logo~p{ }

匹配id为header所有后代中class为logo之后的同级元素p（无论直接相邻与否）

#header input[type="text"]{ }

匹配id为header所有后代中属性type值为text的元素

n的取值

1，2，3，4，5

2n+1, 2n, 4n-1

odd, even

<style> item1:first-child{ color: red; } item1:first-of-type{ background: blue; } </style> <div class="ct"> <p class="item1">aa</p> <h3 class="item1">bb</h3> <h3 class="item1">ccc</h3> </div>

实际应用，更多的使用italic属性值

实际应用中， 行高的数值通过设计图获取， 量取数值时需要使用一些辅助软件工具

选中文字工具，属性选中：不消除锯齿

字体、 字号、 行高、 加粗、 斜体 都是font综合属性的单一属性。

font属性五个单一属性的值可以进行合写， 属性值可以有2到多个， 值之间用空格进行分隔。

font进行综合书写时， 必须有字号和字体参与， 而且必须字号在前， 字体在后， 不能颠倒顺序。

font属性经常对字体、 字号、 行高进行合写， 书写顺序必须是字号、 行高、 字体， 字号和行高之间必须用/进行分隔

如果font属性需要设置加粗和斜体， 两个属性值只能写在最前面， 两个值之间可以互换位置。 后面的字号、 行高、 字体不能更改位置

作用：设置文本整体是否有线条的装饰效果

作用：设置段落首行是否进行缩进

实际应用中，常用em

属性值区分正负， 正数表示向右缩进， 负数表示向左缩进

浏览器控制台中的盒模型图

作用： 设置可以添加元素内容的区域的宽度。

作用： 设置可以添加元素内容的区域的高度。

如果一个元素不添加 height 属性， 默认属性值为auto， 浏览器会自动计算出实际高度， 也就是是内部元素内容自动撑开的高度。 元素的高度自适应内部内容的高度。

书写四个方向单一属性时， 一般是按照顺时针规律书写： 上、 右、 下、 左

设置四个属性值， 分配方向上、 右、 下、 左。

设置三个值分配给上、 左右、 下。

设置两个值， 分配给上下、 左右 。

设置属性值只有一个， 四边的值相同。

作用： 设置边框的颜色。

属性值： 颜色名或颜色值， 整体类似 padding 综合属性写法。

每个单一属性都必须与复合属性 border 一致， 设置三个属性值。

书写四个方向单一属性时， 一般是按照顺时针规律书写： 上、 右、 下、 左

设置四个属性值， 分配方向上、 右、 下、 左。

设置三个值分配给上、 左右、 下。

设置两个值， 分配给上下、 左右 。

设置属性值只有一个， 四边的值相同。

给 <body> 标签设置整体文字样式， 让大部分后代标签全部去继承

设计图中盒子高度占位是固定的， 后面同级元素在高度下面加载。多余内容会溢出盒子。

设置了高度的盒子， 如果内部元素的加载高度超过父级， 会溢出。可以通过一个溢出的属性 overflow， 进行溢出部分内容的显示效果设置。

要求盒子高度必须自适应内部内容的高度。

或者设置height的属性值是自动的。

一个元素内部嵌套的子元素， 在父元素中居中。

针对类似 <div> 样式上必须独占一行的盒子， 如果子盒子宽度低于父盒子宽度， 可以设置子盒子的 margin 值， 水平方向的值都设置为 auto。

原因： auto 只在水平方向有作用， 水平方向的 margin 如果设置为 auto， 边距会自动无限增大， 直到撑满整个父元素除了子元素宽度之外剩余的区域， 如果两个水平方向都是 auto， 两边都要无限大， 只能达到一个平衡， 两边距离相同， 导致盒子居中。

一般情况下， 一个父元素内部可以放一个或多个子元素， 而且多个子元素要排成一行显示， 必须保证父元素的宽度一定要足够（不考虑溢出情况） ， 需要遵循一个设置尺寸的规律： 所有子元素的宽度加在一起不能大于父元素的宽度 width。父元素的width ≥ 所有子元素width + padding + border + margin

如果不满足条件： 要么多余的子元素掉下来不能在一排， 要么溢出父元素

父子盒模型中， 只有一个子元素， 且子元素是类似 <div> 标签必须占一行的。不设置子元素的 width 属性， 子元素的 width 属性值会自动加载父级元素的 width。如果同时设置了子元素水平方向的 padding 和 border 、 margin， 不需要手动去进行内减， 子元素的 width 会自动收缩尺寸。

子元素所有的水平方向的位置所有属性的加和等于父元素的 width 。

在垂直方向如果有两个元素的外边距有相遇的， 浏览器中加载的真正的外边距不是两个间距的加和， 而是两个边距中值较大的， 边距值小的塌陷到了边距值大的值内部。

上面的元素有下边距， 下面的元素有上边距， 两个边距相遇， 真正的盒子间距离是较大的那个值

父子元素之间也会出现 margin 塌陷， 父元素和子元素都设置了同方向的margin-top 值， 两个属性之间没有其他的内容进行隔离， 导致两个属性相遇， 发生margin 塌陷。

本身父元素与上一个元素的距离是0， 子元素如果设置了垂直方向的上边距， 会带着父级一起掉下来。

水平方向的 margin 没有塌陷现象。

在标准流中， 大部分元素是区分等级的， 习惯将元素划分为几种常见的加载级别：块级元素、 行内元素、 行内块元素等。

大部分容器级标签包括p标签都是块级元素， 比如 <div> 、 <h1> 等。

大部分的文本级标签， 比如 <span>、 <a>、 <b> 等。

比如 <img>、 <input> 等。

可以通过 display 属性更改一个标签的显示模式。

属性值： 元素根据属性值不同， 可以加载对应元素等级的显示模式的特点。

display 属性更改的显示模式并没有改变标准流本质性质， 页面还是只能从上往下加载， 存在空白折叠现象等微观性质。 要想实现更多的界面布局效果需要脱离标准流的限制。

标签元素脱离标准流的方法包括： 浮动、 绝对定位、 固定定位。

margin 塌陷现象出现在标准流中的， 浮动元素已经脱离标准流， 不再具有 margin塌陷现象。

与前面压盖效果结构类似， 同级元素中前面的元素浮动， 后面的元素不浮动， 不浮动的元素内部还有一些文字， 浮动的蓝盒子会压盖住粉盒子的一部分， 但是文字内容不会被盖住， 粉盒子中的文字会让开蓝盒子位置， 围绕它进行加载。这种效果称为字围现象。

可以利用字围现象制作一些特殊的图文混排布局效果

给标准流的父元素强制给一个合适的高度

作用： 清除标签元素自身受到的前面的浮动元素的影响。

给标准流父元素添加 clear 属性， 父元素不受前面浮动影响， 不会再占有浮动让出的位置。

给内部有浮动子元素的父元素添加溢出隐藏 overflow: hidden; 属性， 可以解决浮动的所有问题。

父元素有了高度后， 可以管理住内部所有的浮动元素， 不会延伸到后面标签中影响贴边。

<a> 标签可以根据用户行为不同， 划分为四种状态， 通过<a> 标签的伪类可以将四种状态选中设置为不同的样式效果， 用户触发对应行为， 就可以加载对应的样式。

一般会将访问前和访问后状态设置为一样的效果， 保证了页面的统一性， 可以选择性的设置鼠标移上和鼠标点击状态。

更加常用的一种设置方式如下：

<a> 标签任何普通的选择器， 可以同时选中四种状态， 可以将四种状态设置为相同的样式， 属性可以设置所有的 <a> 默认显示样式的属性， 包括盒模型、 文字等。

a:hover 伪类选择器： 设置鼠标移上时不一样的样式属性。

属性值都是使用代表方向的单词进行书写。

使用像素值作为背景定位的属性值。

百分比表示法使用百分比数字作为属性值。

100%代表的数值：

background 属性可以将五个单一属性的值进行合写。

属性值： 可以有 1-5 个属性值， 值之间用空格进行分隔， 背景定位的两个属性值算作一个属性值， 不能被分开也不能颠倒顺序。 五个属性值之间可以互换位置。

在<h1> 标签是权重最高的标签， 一般会在内部书写最重要的内容， 比如 logo 、 最大的标题等。

另外 <h1> 内部的文字， 可以帮助提高 SEO 搜索排名。

在设置的是 logo 时， 如果使用插入图， 就不能书写搜索关键字。

如果想解决 SEO 问题， 可以将 HTML 结构中， 插入图换成搜索关键字， 然后使用 css 添加背景图给 <a> 标签或 <h1> 标签。

在一个盒子中有背景图部分， 而且有文字内容， 文字会让开背景图区域进行加载，

背景区域应该使用 padding 挤出位置。

四个方向的 padding 都可能用于添加背景图。

当用户访问一个网站时， 需要向服务器发送请求， 网页上的每张图像都要经过一次求才能展现给用户。

然而， 一个网页中往往会应用很多小的背景图像作为修饰， 当网页中的图像过多时，服务器就会频繁地接受和发送请求， 这将大大降低页面的加载速度。为了有效地减少服务器接受和发送请求的次数， 提高页面的加载速度， 出现了 CSS精灵技术（也称 CSS Sprites、 CSS 雪碧） 。

CSS 精灵是一种处理网页背景图像的方式。

它将一个页面涉及到的所有零星背景图像都集中到一张大图中去， 然后将大图应用于网页， 这样， 当用户访问该页面时， 只需向服务发送一次请求， 网页中的背景图像即可全部展示出来。

通常情况下， 这个由很多小的背景图像合成的大图被称为精灵图。

CSS3 支持背景半透明的写法， 颜色值增加了一种 rgba 模式。

rgba 模式 ： 在 rgb 基础上增加了一个不透明度的设置， 不透明度 alpha 取值范围在0-1 之间， 0 表示完全透明， 1 表示完全不透明， 05 表示半透明。

书写方式： rgba(红色， 绿色， 蓝色， 不透明度)

注意： 背景半透明是指盒子背景半透明， 盒子里面的内容不受影响。

通过 background-size 设置背景的尺寸， 就像我们设置 <img> 的尺寸一样， 在移动 Web 开发中做屏幕适配应用非常广泛。

CSS3 中规定， 一个盒子上， 可以添加多个背景。

background-image 的属性值书写时， 以逗号分隔多背景的 URL路径地址。

注意： 背景加载时， 先写的背景压盖后写的背景。

属性名： position。

作用： 设置定位的元素， 它需要根据某个参考元素发生位置的偏移。

定位的元素要想发生位置的移动， 必须搭配偏移量属性进行设置。

水平方向： left、 right。

垂直方向： top、 bottom。

属性值： 常用 px 为单位的数值， 或者百分比。

子绝父相、 子绝父绝、 子绝父固

属性值： absolute， 绝对的意思。

参考元素： 参考的是距离最近的有定位的祖先元素， 如果祖先都没有定位， 参考<body>。必须搭配偏移量属性才会发生位置移动。

性质： 绝对定位的元素脱离标准流， 会让出标准流位置， 可以设置宽高， 也可以随时定义位置， 绝对定位的元素不设置宽高只能被内容撑开。

注意1： 绝对定位的参考元素是不固定的， 不同的参考元素以及不同的偏移量组合，会导致绝对定位元素的参考点不同， 具体位移效果不同。

注意2： 在绝对定位中， 由于参考点不同， left 正值不再等价于 right 的负值。

以 <body> 为参考元素时， 参考点的确定与偏移量方向有关

第一， 如果有 top 参与的定位， 参考点就是 <body> 页面的左上顶点和右上顶点。 自身的对比点是盒子的所有盒模型属性最外面的左上角或右上角。

第二， 如果有 bottom 参与的绝对定位， 参考点是 <body> 页面首屏的左下顶点或右下顶点。 对比点是盒子的所有盒模型属性最外面的左下角或右下角。

实际应用中， 如果以 <body> 为参考元素， 不同分辨率的浏览器中， 绝对定位的元素位置是不同的， 所以较少使用 <body> 作为参考元素。

祖先级为参考元素

如果祖先级中有定位的元素， 就不会去参考 <body> 。

参考元素： 参考的是祖先元素中有任意定位的， 在 HTML 结构中距离目标最近的祖先。

如果绝对定位的参考元素是某个祖先级， 参考点是盒子 border 以内的四个顶点， 组合方向决定了参考点。 绝对定位的元素只关心对比点和参考点之间的距离， 会忽视参考元素的 padding 区域。

所有的定位类型都可以实现压盖效果。

由于绝对定位的元素脱标， 不占标准流位置， 压盖效果更彻底， 实际工作中， 常见的是 绝对定位制作压盖。

定位的元素不区分定位类型， 都会去压盖标准流或浮动的元素。

如果都是定位的元素， 在 HTML 中 后写定位压盖先写的定位 。

更改定位的元素的压盖顺序， 设置一个 z-index 属性。

属性值： 数字。

有的，包括：“:not(:first-child)”、“:nth-child(n+2)”两种方式。

1、:not(:first-child)：其中，E:not(s)表示匹配所有不匹配简单选择符s的元素E，E:first-child匹配同级兄弟元素中的第一个E元素。

2、:nth-child(n+2)：其中nth-child表示第几个son，n+2表示从第二个开始(即所有的n都是取从0开始的自然数)。

扩展资料：

css3中相关的选择器：

1、E:root ：匹配文档的根元素。在HTML（标准通用标记语言下的一个应用）中，根元素永远是HTML

2、E:nth-child(n)：匹配父元素中的第n个子元素E

3、E:nth-last-child(n)：匹配父元素中的倒数第n个结构子元素E

4、E:nth-of-type(n)：匹配同类型中的第n个同级兄弟元素E

5、E:nth-last-of-type(n)：匹配同类型中的倒数第n个同级兄弟元素E

6、E:last-child：匹配父元素中最后一个E元素

7、E:first-of-type：匹配同级兄弟元素中的第一个E元素

8、E:only-child：匹配属于父元素中唯一子元素的E

9、E:only-of-type：匹配属于同类型中唯一兄弟元素的E

参考资料来源：百度百科-css3

以上就是关于HHML/CSS 选择器总结全部的内容，包括:HHML/CSS 选择器总结、CSS入门8-三大特性之层叠特性与优先级、HTML5 js如何获取所有相同ID或class的元素等相关内容解答，如果想了解更多相关内容，可以关注我们，你们的支持是我们更新的动力！