这里写自定义目录标题

• 伪类选择器
• • 什么是伪类
• 动态伪类
• • 五个常用动态伪类
  • 常用动态伪类举例
  • 动态伪类的顺序关系
• 结构伪类
• • 六个常用结构伪类
  • :first-child
  • :last-child
  • :nth-child()
  • :first-of-type
  • :last-of-type
  • :nth-of-type()
  • 几个不常用的结构伪类
• 否定伪类
• UI 伪类
• 目标伪类
• 语言伪类

伪类选择器

什么是伪类

伪类（Pseudo-Class）： 伪类用于选择 HTML 元素的某个 状态 或特定的 位置；

例如，动态伪类 中存在 :hover，用于选择元素在鼠标悬停时的 状态；结构伪类 中存在 :first-child 用于选择元素作为父元素的第一个子元素的 状态；

浅浅举个例子：

去百度去京东

动态伪类

五个常用动态伪类

a:link		/* 表示样式将应用于 HTML 中未被访问过的链接；*/
a:visited		/* 表示样式将应用于 HTML 中已被访问过的链接；*/
a:hover		/* 表示样式将应用于当用户将鼠标悬停在 HTML 中链接上时的状态；*/
a:active		/* 表示样式将应用于当用户点击 HTML 中链接时的状态；*/
select:focus		/* 表示样式将应用于当链接被选中或获得焦点时的状态；*/

常用动态伪类举例

a:link a:visited a:hover a:active

去百度去京东

上述代码产生效果为：链接未被访问时，呈现橙色效果，鼠标悬浮在链接上，呈现天蓝色效果，点击未松开，呈现绿色效果，访问后，呈现灰色效果；

select:focus input:focus

北京上海

动态伪类的顺序关系

要注意的是，动态伪类之间存在有顺序关系，思考如下情形：

在我们点下 去百度 并不松开的时候，我们其实是同时处于以上几种状态中的三种：:link :hover :active，而在 CSS 中，渲染存在覆盖效果；所以CSS中表现的样式是几种状态中最下方的状态，即若将 a:active 置于状态中的最下方，则会呈现点击未松开的绿色效果；

结构伪类

六个常用结构伪类

:first-child	/* 表示样式将应用于一个元素的第一个子元素 */
:last-child		/* 表示样式将应用于一个元素的最后一个子元素 */
:nth-child()	/*  表示样式将应用于某个元素的指定子元素 */
:first-of-type		/* 表示样式将应用于一个类型的元素中的第一个元素 */
:last-of-type		/* 表示样式将应用于一个类型的元素中的最后一个元素 */
:nth-of-type()		/* 表示样式将应用于一个类型的元素中的指定位置的元素 */

:first-child

:first-child

测试1
测试2
测试3
张三:98分
李四:88分
王五:78分
赵六:68分

结果展示：

:last-child

:last-child

测试1
测试2
测试3
张三:98分
李四:88分
王五:78分
赵六:68分

效果展示：

:nth-child()

:nth-child

/* 选择第二个子元素 */
:nth-child(2) {color: red;
}/* 选择奇数子元素 */
:nth-child(odd) {background-color: yellow;
}/* 选择奇数子元素 */
:nth-child(2n+1) {background-color: blue;
}/* 选择偶数子元素 */
:nth-child(even) {background-color: green;
}/* 选择偶数子元素 */
:nth-child(2n) {background-color: yellow;
}/* 选择从第三个子元素开始的子元素 */
:nth-child(n+3) {font-size: 1.2em;
}/* 选择前三个子元素 */
:nth-child(-n+3) {font-weight: bold;
}

举例：

第一个元素
第二个元素
第三个元素
第四个元素
第五个元素
第六个元素
第七个元素
第八个元素
第九个元素
第十个元素

:first-of-type

:first-of-style

/* 第一个段落元素 */
p:first-of-type {color: blue;
}/* 第一个 div 元素 */
div:first-of-type {background-color: yellow;
}/* 第一个 h2 元素 */
h2:first-of-type {font-size: 2em;
}

举例：

第一个元素
第二个元素
第三个元素
第四个元素
第五个元素
第六个元素

:last-of-type

/* 最后一个段落元素 */
p:last-of-type {color: blue;
}/* 最后一个 div 元素 */
div:last-of-type {background-color: yellow;
}/* 最后一个 h2 元素 */
h2:last-of-type {font-size: 2em;
}

:nth-of-type()

/* 选择第二个子元素 */
:nth-of-type(2) {color: red;
}/* 选择奇数子元素 */
:nth-of-type(odd) {background-color: yellow;
}/* 选择偶数子元素 */
:nth-of-type(even) {background-color: green;
}/* 选择从第三个子元素开始的子元素 */
:nth-of-type(n+3) {font-size: 1.2em;
}/* 选择前三个子元素 */
:nth-of-type(-n+3) {font-weight: bold;
}

几个不常用的结构伪类

/* 选择一个父元素中倒数第二个子元素 */
p:nth-last-child(2) {color: red;
}/* 选择一个与其同类型的兄弟元素中倒数第二个元素 */
p:nth-last-of-type(2) {color: red;
}/* 选择一个父元素中唯一的子元素 */
p:only-child {color: red;
}/* 选择一个父元素中唯一的子元素 */
p:only-child {color: red;
}/* 全局样式 */
:root {/* 全局样式 */
}html {/* 更具体的样式 */
}/* 选中的是没有内容的div元素 */
div:empty {background-color: #eee;
}
即：
 
 
 

否定伪类

/* 选择所有除了 class="highlight" 的段落元素 */
p:not(.highlight) {color: blue;
}/* 选择所有除了 id="footer" 的元素 */
*:not(#footer) {background-color: yellow;
}/* 选择所有除了 type="checkbox" 的表单控件 */
input:not([type="checkbox"]) {border: 1px solid gray;
}/* 选择所有除了 title 以"你要加油"开头的表单控件 */
div>p:not([type^="你要加油"]) {color: orange;
}

UI 伪类

:checked		/* 用于匹配已被选中的表单元素 */
:enable			/* 选择处于启用状态的表单元素 */
:disabled		/* 选择处于禁用状态的表单元素 */

input:checked {width: 100px;height: 100px;
}

input[type="text"]:enabled {background-color: gray;
}

input[type="text"]:disabled {background-color: gray;
}

目标伪类

:target		/* 用于选择当前页面中被 URL 中的片段标识符（#）指定的元素 */

举例：

Section 1
Section 2
Section 3
Section 1
Content of section 1 goes here...
Section 2
Content of section 2 goes here...
Section 3
Content of section 3 goes here...

语言伪类

:lang()		/* 选择使用特定语言属性的元素 */

This is a paragraph in English.
Ceci est un paragraphe en français.
Dies ist ein Absatz auf Deutsch.
This is another paragraph in English.