本篇文章给大家带来《css3新增的选择器》，石家庄人才网对文章内容进行了深度展开说明，希望对各位有所帮助，记得收藏本站。

CSS3新增了很多选择器，极大地增强了我们对页面元素的控制能力。掌握好这些选择器，可以让我们编写更加简洁、高效的CSS代码。下面就来介绍一些常用的CSS3新增选择器。

1. 属性选择器

属性选择器可以根据元素的属性及属性值来选择元素，非常灵活强大。

• `[attribute]`：选择拥有指定属性的元素，例如`[title]`可以选择所有拥有`title`属性的元素。
• `[attribute=value]`：选择属性值等于指定值的元素，例如`[target=_blank]`可以选择所有`target`属性值为"_blank"的链接。
• `[attribute~=value]`：选择属性值包含指定单词的元素，例如`[class~=important]`可以选择所有`class`属性值包含"important"单词的元素。
• `[attribute|=value]`：选择属性值以指定值开头的元素，例如`[lang|=en]`可以选择所有`lang`属性值以"en"开头的元素。
• `[attribute^=value]`：选择属性值以指定字符串开头的元素，例如`[href^=https]`可以选择所有`href`属性值以"https"开头的元素。
• `[attribute$=value]`：选择属性值以指定字符串结尾的元素，例如`[src$=.jpg]`可以选择所有`src`属性值以".jpg"结尾的元素。
• `[attribute○=value]`：选择属性值包含指定字符串的元素，例如`[title○=css]`可以选择所有`title

  

  `属性值包含"css"字符串的元素。

2. 结构伪类选择器

结构伪类选择器可以根据元素在文档树中的位置关系来选择元素。

• `:root`：选择文档的根元素，在HTML中通常是`html`元素。
• `:nth-child(n)`：选择父元素下的第n个子元素，n可以是数字、关键字或公式。例如`:nth-child(2)`选择第二个子元素，`:nth-child(even)`选择偶数位置的子元素。
• `:nth-last-child(n)`：选择父元素下的倒数第n个子元素，用法与`:nth-child(n)`类似。
• `:nth-of-type(n)`：选择父元素下指定类型的第n个子元素，例如`:nth-of-type(2)`选择第二个`p`元素。
• `:nth-last-of-type(n)`：选择父元素下指定类型的倒数第n个子元素，用法与`:nth-of-type(n)`类似。
• `:first-child`：选择父元素的第一个子元素。
• `:last-child`：选择父元素的最后一个子元素。
• `:first-of-type`：选择父元素下指定类型的第一个子元素。
• `:last-of-type`：选择父元素下指定类型的最后一个子元素。
• `:only-child`：选择父元素中唯一的子元素。
• `:only-of-type`：选择父元素下指定类型的唯一子元素。
• `:empty`：选择没有子元素的元素（包括文本节点）。

3. 状态伪类选择器

状态伪类选择器可以根据元素的当前状态来选择元素，例如链接的悬停状态、表单元素的选中状态等。

• `:enabled`：选择可用的表单元素。
• `:disabled`：选择禁用的表单元素。
• `:checked`：选择被选中的单选框、复选框或选项。
• `:indeterminate`：选择状态不确定的复选框。
• `:default`：选择默认选中的表单元素。
• `:valid`：选择内容有效的表单元素。
• `:invalid`：选择内容无效的表单元素。
• `:in-range`：选择数值在指定范围内的表单元素。
• `:out-of-range`：选择数值不在指定范围内的表单元素。
• `:required`：选择必须填写的表单元素。
• `:optional`：选择非必须填写的表单元素。
• `:read-only`：选择只读的表单元素。
• `:read-write`：选择可读写的表单元素。
• `:focus`：选择获得焦点的表单元素。

4. 目标伪类选择器

`:target`选择器用于选择当前活动的目标元素。例如，如果 URL 中包含哈希值 `#section2`，则 `:target` 选择器将选择 ID 为 `section2` 的元素。

5. 否定伪类选择器

`:not(s)`选择器用于选择除指定选择器以外的所有元素。例如，`:not(.special)` 选择器将选择除类名为 `special` 的元素以外的所有元素。石家庄人才网小编提醒大家，`s` 可以是任何简单的选择器，例如元素选择器、类选择器或 ID 选择器。

总结

以上只是一些常用的CSS3新增选择器，还有其他一些选择器，大家可以根据自己的需要去学习和使用。熟练掌握CSS3选择器，可以让我们编写更加简洁、高效、易维护的CSS代码。

石家庄人才网小编对《css3新增的选择器》内容分享到这里，如果有相关疑问请在本站留言。