阅读量:0
HTML5新增的CSS选择器和伪类包括:
:nthchild(), :nthoftype(), :nthlastchild(), :nthlastoftype(), :firstchild, :lastchild, :onlychild, :onlyoftype。在HTML5中，CSS3的引入极大地丰富了网页设计的灵活性和表现力，以下是一些HTML5新增的CSS选择器和伪类的介绍：
CSS选择器
1、属性选择器：通过元素的属性及属性值来选择HTML元素。input[type="text"]会选择所有类型为文本输入框的<input>元素；而p[class~="myClass"]则会选择所有类名包含“myClass”单词的<p>元素。
2、结构伪类选择器：允许开发者根据文档结构选择元素，如:firstchild选择第一个子元素，:lastchild选择最后一个子元素，以及:nthchild(n)选择第n个子元素。
3、否定伪类：通过:not()选择器排除某些元素，例如:not(p)将选择除<p>之外的所有元素。
伪类
1、动态伪类：这类伪类基于用户与页面的交互来改变元素的样式。:hover在鼠标悬停时改变元素的样式，:active在元素被激活（如点击）时改变样式。
2、UI元素状态伪类：包括:enabled、:disabled等，用于描述表单控件的启用或禁用状态。
3、结构性伪类：如:firstoftype选择同类元素中的第一个，:lastoftype选择同类元素中的最后一个，这些选择器提供了更精确的元素选择能力。
4、否定伪类：通过:not(selector)可以选择不符合特定选择器条件的元素，这在需要排除某些元素时非常有用。
表格归纳
| 类别 | 选择器/伪类 | 功能说明 |
| 属性选择器 | [attr=value] | 选择具有特定属性值的元素 |
| 结构伪类 | :firstchild | 选择指定父级下的第一个子元素 |
| 动态伪类 | :hover | 当鼠标悬停在元素上时应用样式 |
| UI状态伪类 | :enabled | 选择启用状态的UI元素 |
| 否定伪类 | :not(p) | 选择除指定类型外的所有元素 |
相关问答FAQs
问题1：如何使用CSS选择器选择所有带有特定类名的元素？
答案：使用点号（.）后跟类名作为选择器，例如.myClass，这将选择所有具有myClass类名的元素。
问题2：如何利用CSS伪类来高亮显示表格的偶数行？
答案：可以使用:nthchild(even)伪类，结合tr标签选择器，如下所示：
tr:nthchild(even) { backgroundcolor: #f2f2f2; }这将使表格中的偶数行背景色变为浅灰色，从而突出显示。
HTML5 新增的 CSS 选择器和伪类介绍
新增的 CSS 选择器
1、属性选择器
attr(value)：选择具有指定属性值的元素。
```css
[type="text"] {
backgroundcolor: lightblue;
}
```
attr(value, operator)：选择具有指定属性值且符合操作符条件的元素。
```css
[type="text"][name="username"] {
fontweight: bold;
}
```
attr(value, operator, value)：选择具有指定属性值和操作符及新值的元素。
```css
[type="text"][name$="name"] {
color: red;
}
```
2、结构伪类
:firstchild：选择其父元素中的第一个子元素。
```css
p:firstchild {
color: red;
}
```
:lastchild：选择其父元素中的最后一个子元素。
```css
p:lastchild {
color: blue;
}
```
:onlychild：选择其父元素中的唯一子元素。
```css
p:onlychild {
fontsize: 20px;
}
```
:nthchild(n)：选择其父元素中第 n 个子元素。
```css
p:nthchild(2) {
fontweight: bold;
}
```
:nthlastchild(n)：选择其父元素中倒数第 n 个子元素。
```css
p:nthlastchild(2) {
fontstyle: italic;
}
```
:nthoftype(n)：选择其父元素中特定类型的第 n 个子元素。
```css
p:nthoftype(2) {
backgroundcolor: lightgreen;
}
```
:nthlastoftype(n)：选择其父元素中特定类型的倒数第 n 个子元素。
```css
p:nthlastoftype(2) {
border: 1px solid black;
}
```
:firstoftype：选择其父元素中第一个特定类型的子元素。
```css
p:firstoftype {
color: green;
}
```
:lastoftype：选择其父元素中最后一个特定类型的子元素。
```css
p:lastoftype {
fontsize: 16px;
}
```
:onlyoftype：选择其父元素中唯一特定类型的子元素。
```css
p:onlyoftype {
textdecoration: underline;
}
```
:even：选择所有偶数位置的元素。
```css
tr:nthchild(even) {
backgroundcolor: #f2f2f2;
}
```
:odd：选择所有奇数位置的元素。
```css
tr:nthchild(odd) {
backgroundcolor: #fff;
}
```
3、伪元素
::before：在元素内容之前插入内容。
```css
div::before {
content: "Hello, ";
color: red;
}
```
::after：在元素内容之后插入内容。
```css
div::after {
content: "World!";
color: blue;
}
```
新增的伪类
1、动态伪类
:active：当用户点击元素时触发。
```css
a:active {
color: red;
}
```
:focus：当元素获得焦点时触发。
```css
input:focus {
bordercolor: blue;
}
```
:hover：当鼠标悬停在元素上时触发。
```css
a:hover {
backgroundcolor: lightgray;
}
```
:link：选择未被访问过的链接。
```css
a:link {
color: blue;
}
```
:visited：选择已被访问过的链接。
```css
a:visited {
color: purple;
}
```
2、UI 元素状态伪类
:disabled：选择禁用的元素。
```css
input:disabled {
backgroundcolor: #ccc;
}
```
:enabled：选择启用的元素。
```css
input:enabled {
backgroundcolor: #fff;
}
```
:checked：选择处于选中状态的复选框或单选按钮。
```css
input:checked {
border: 2px solid green;
}
```
3、其他伪类
:not(selector)：选择不匹配指定选择器的元素。
```css
div:not(.container) {
backgroundcolor: lightblue;
}
```
:root：选择文档的根元素。
```css
:root {
fontfamily: sansserif;
}
```
::selection：选择用户通过鼠标选择的内容。
```css
::selection {
backgroundcolor: yellow;
color: black;
}
```
通过以上介绍，我们可以看到 HTML5 新增的 CSS 选择器和伪类提供了更多的灵活性和功能，使得 CSS 的使用更加丰富和强大。
