介绍

一个选择器表示一个结构。该结构可以作为判断文档树中的哪些元素匹配该选择器的条件，或者对结构所对应的HTML或XML片段的描述。

下表简述了选择器的语法：

模式 意义 描述 CSS
Level
MAC WINDOWS
Chrome Firefox Opera Safari Chrome Firefox Opera Safari IE
5 3.6 10 4 4 3.6 3 10 10.5 4 6 7 8
* 任意元素。 通配选择符 2
E 任意类型为E的元素。 类型选择器 1
E[foo] 一个E元素，其拥有“foo”属性的。 属性选择器 2
E[foo="bar"] 一个E元素，其“foo”属性的值完全等于“bar”。 属性选择器 2
E[foo~="bar"] 一个E元素，其“foo”属性的值是一个以空白字符分割的列表，其中一个元素完全等于“bar”。 属性选择器 2
E[foo^="bar"] 一个E元素，其“foo”属性的值以字符串“bar”开始。 属性选择器 3
E[foo$="bar"] 一个E元素，其“foo”属性的值以字符串“bar”结束。 属性选择器 3
E[foo*="bar"] 一个E元素，其“foo”属性的值包含子字符串“bar” 属性选择器 3
E[foo|="en"] 一个E元素，其“foo”属性是一个以连字符分割的列表，其中第一个（从左侧开始）元素完全等于“en”。 属性选择器 2
E:root 一个E元素，且为文档的根。 结构伪类 3
√ √ √ √ √ √ √ √ √ √ × × ×
E:nth-child(n) 一个E元素，且为其父亲的第n个孩子。 结构伪类 3
√ √ √ √ √ √ × √ √ √ × × ×
E:nth-last-child(n) 一个E元素，且从其父亲的最后一个孩子开始计数，为其父亲的第n个孩子。 结构伪类 3
√ √ √ √ √ √ × √ √ √ × × ×
E:nth-of-type(n) 一个E元素，且为该类型的第n个兄弟。 结构伪类 3
√ √ √ √ √ √ × √ √ √ × × ×
E:nth-last-of-type(n) 一个E元素，且从该类型的最后一个兄弟开始计数，为该类型的第n个兄弟。 结构伪类 3
√ √ √ √ √ √ × √ √ √ × × ×
E:first-child 一个E元素，且为其父亲的第一个孩子。 结构伪类 2
E:last-child 一个E元素，且为其父亲的最后一个孩子。 结构伪类 3
√ √ √ √ √ √ √ √ √ √ × × ×
E:first-of-type 一个E元素，且为该类型的第一个兄弟。 结构伪类 3
√ √ √ √ √ √ × √ √ √ × × ×
E:last-of-type 一个E元素，且为该类型的最后一个兄弟。 结构伪类 3
√ √ √ √ √ √ × √ √ √ × × ×
E:only-child 一个E元素，且为其父亲的唯一一个孩子。 结构伪类 3
√ √ √ √ √ √ √ √ √ √ × × ×
E:only-of-type 一个E元素，且为该类型的唯一一个兄弟。 结构伪类 3
√ √ √ √ √ √ × √ √ √ × × ×
E:empty 一个E元素，且其不包含孩子（包含Text节点） 结构伪类 3
√ √ √ √ √ √ √ √ √ √ × × ×
E:link
E:visited 		一个E元素，且其为一个尚未被访问（:link）或已经被访问（:visited）的超链接的源锚点。 链接伪类 1
E:active
E:hover
E:focus 		一个E元素，且其处于某一用户操作期间。 用户操作伪类 1&2
E:target 一个E元素，且其为引用URI的目标。 目标伪类 3
√ √ √ √ √ √ √ √ √ √ × × ×
E:lang(fr) 一个类型为E，语言为“fr”的元素（文档语言决定如何判断其语言）。 语言伪类 2
E:enabled
E:disabled 		一个用户界面元素E，其可用或者被禁用。 UI元素状态伪类 3
√ √ √ √ √ √ √ √ √ √ × × ×
E:checked 一个用户界面元素E，其被选中（例如单选按钮或复选框）。 UI元素状态伪类 3
√ √ × √ √ √ √ × √ √ × × ×
E::first-line E元素的第一个有格式的行。 首行伪元素 1
E::first-letter E元素的第一个有格式的字母。 首字母伪元素 1
E::before 在E元素之前产生的内容。 前置伪元素 2
E::after 在E元素之后产生的内容。 后置伪元素 2
E.warning 一个E元素，其类为“warning”（文档语言决定如何判断类）。 类选择器 1
E#myid 一个E元素，其ID等于“myid”。 ID选择器 1
E:not(s) 一个E元素，其不匹配简单的选择器s。 否定伪类 3
√ √ √ √ √ √ √ √ √ √ × × ×
E F 一个F元素，且其为E元素的后裔。 后裔组合 1
E > F 一个F元素，且其为E元素的孩子。 孩子组合 2
E + F 一个F元素，且其紧紧跟随E元素。 相邻兄弟组合 2
E ~ F 一个F元素，且其跟随E元素。 一般兄弟组合 3
√ √ √ √ √ √ √ √ √ √ × √ √

通配选择符

通配选择符被写作一个本地名称为星号（* U+002A）的CSS限定名。如果没有对该选择器定义默认命名空间，其表示在文档中任意命名空间下（包括不属于命名空间）的任意单独的元素。

如果“*”所表示的通配选择符（例如没有命名空间前缀）不是简单选择序列选择器的唯一组成部分或者其后紧跟一个伪元素，则“*”可以省略。

  • *[hreflang|=en]等价于[hreflang|=en]。
  • *.warning等价于.warning。
  • *#myid等价于#myid。

我们建议保留“*”，因为这样能够减少潜在的歧义可能。例如：div :first-child与div:first-child，前者应写为div *:first-child。

通配选择符允许一个可选的命名空间组件。

ns|*
命名空间ns下的所有元素。
*|*
所有元素。
|*
所有没有命名空间的元素。
*
如果没有标记的默认命名空间，其等价于*|*。否则，其等价于ns|*，其中ns为默认命名空间。

引用

CSS限定名
……

转载于:https://www.cnblogs.com/niuweb/archive/2012/01/10/selectors.html

[W3C][CSS]选择器（Selectors Level 3）[未完成]相关推荐

  1. CSS第三级选择器 Selectors Level 3 文档翻译

    Selectors Level 3 CSS第三级选择器 译者目前在做前端,博客内容主要是文档翻译.如果读者希望我翻译某些和前端相关的文档,欢迎留言告诉我.对于已有在网络上能够搜到质量较高译文的文章,我 ...

  2. 学习《CSS选择器Level-4》不完全版

    1 概述 1.1 前言 选择器是CSS的核心组件.本文依据W3C的Selectors Level 4规范,概括总结了Level1-Level4中绝大多数的选择器,并做了简单的语法说明及示例演示.希望对 ...

  3. 学习《CSS选择器Level-4》不完全版 1

    1 概述 1.1 前言 选择器是CSS的核心组件.本文依据W3C的Selectors Level 4规范,概括总结了Level1-Level4中绝大多数的选择器,并做了简单的语法说明及示例演示.希望对 ...

  4. CSS快速入门 CSS选择器字体排版

    一.CSS的概述 CSS的使用方式:4种                 1.行内式样式css设置                     在标签中有一个属性可以设置css样式            ...

  5. css选择器(css Selectors)的语法分析

    css选择器分为以下几类: 1.元素选择符 Element Selectors 2.关系选择符 Relationship Selectors 3.属性选择符 Attribute Selectors 4 ...

  6. 33个高能CSS选择器让我受益匪浅

    作者:陈大鱼头 github:KRISACHA 大家好,我是"前端点线面",一位新生代农民工,欢迎关注我获取最新前端知识和<前端百题斩>pdf版(包括JS基础篇.浏览器 ...

  7. name选择器_这33个超级好用的CSS选择器，你可能见都没见过

    作者:陈大鱼头 转发链接:https://mp.weixin.qq.com/s/tLD4Rfr2c-MAXXtbC7nEwQ 前言 CSS 选择器是 CSS 世界中非常重要的一环. 在 CSS 2 之 ...

  8. “〜”（波浪号/波浪形/旋转）CSS选择器是什么意思？

    本文翻译自:What does the "~" (tilde/squiggle/twiddle) CSS selector mean? Searching for the ~ ch ...

  9. CSS选择器的权重详解

    在我们开始之前,先搞明白几个概念吧.下面是一段CSS代码: a {   border-bottom: 0px;   color: #5DB0E6; } a:focus {   outline: 1px ...

最新文章

  1. 技术图文：字典技术在求解算法题中的应用
  2. 外贸网络推广浅析怎么能更有效地提升网站的收录？
  3. 两行代码完成特征工程-基于Python的特征自动化选择代码（提供下载）
  4. Apache Spark 2.0： 机器学习模型持久化
  5. asp.net webapi 自定义身份验证
  6. Mybatisplus 自动生成字段 强制覆盖 null或者空字符串也覆盖
  7. python控制灯_Python 控制树莓派 GPIO 输出：控制 LED 灯
  8. SQL解析引擎Apache Calcite
  9. Ubuntu 20.04安装Ros Noetic及Ubuntu 18.04安装ROS Melodic（两版本详细填坑）
  10. python 柱状图和折线图放在一起_Excel怎样把柱状图和折线图放在一起（超详细）...
  11. Elasticsearch[2.0] ☞ Java Client API ☞ Percolate API
  12. 中国现代书画家——鞠宗霖
  13. 北欧“双城记”——爱立信和诺基亚一季度财报分析
  14. error [XXX.zip]: start of central directory not found； zipfile corrup
  15. Ubuntu安装Microsoft office
  16. Django学习笔记（五）
  17. 485串口服务器协议,RS485串口服务器
  18. 标准对联广告Js代码
  19. vb考试试卷分析评价系统
  20. 科技爱好者周刊（第 129 期）：创业的凸函数和凹函数

热门文章

  1. 以算法重构视频技术前沿，超分辨率算法那些事
  2. 直播 | 智能仓库：端侧 AI 和 OpenVINO 落地实践
  3. 一行命令搞定图像质量评价
  4. 崩坏3人物模型详解—是次世代还是手绘？
  5. 超赞！3行代码可视化Transformer
  6. 面部识别数据研究：43年，100个数据集
  7. 解析 | 如何从频域的角度解释CNN（卷积神经网络）？
  8. 重磅 | 《机器学习综述》算法分类及特征工程手写笔记
  9. 这就是数据分析之数据变换
  10. 自动驾驶路径规划论文解析(4)