Css 选择器

CSS 选择器

CSS 选择器规定了 CSS 规则会被应用到哪些元素上。

备注:暂时没有能够选择 父元素、父元素的同级元素,或 父元素的同级元素的子元素 的选择器或者组合器。

基本选择器

通用选择器Universal selector
选择所有元素。(可选)可以将其限制为特定的名称空间或所有名称空间。
语法:* ns|* *|*
例子:* 将匹配文档的所有元素。
元素选择器Type selector
按照给定的节点名称,选择所有匹配的元素。
语法:elementname
例子:input 匹配任何 <input> 元素。
类选择器Class selector
按照给定的 class 属性的值,选择所有匹配的元素。
语法.classname
例子.index 匹配任何 class 属性中含有 “index” 类的元素。
ID 选择器ID selector
按照 id 属性选择一个与之匹配的元素。需要注意的是,一个文档中,每个 ID 属性都应当是唯一的。
语法:#idname
例子:#toc 匹配 ID 为 “toc” 的元素。
属性选择器Attribute selector
按照给定的属性,选择所有匹配的元素。
语法:[attr] [attr=value] [attr~=value] [attr|=value] [attr^=value] [attr$=value] [attr*=value]
例子:[autoplay] 选择所有具有 autoplay 属性的元素(不论这个属性的值是什么)。

分组选择器(Grouping selectors)

选择器列表Selector list
, 是将不同的选择器组合在一起的方法,它选择所有能被列表中的任意一个选择器选中的节点。
语法AB
示例div, span 会同时匹配 <span> 元素和 <div> 元素。

组合器(Combinators)

后代组合器Descendant combinator
 (空格)组合器选择前一个元素的后代节点。
语法:A B
例子:div span 匹配所有位于任意 <div> 元素之内的 <span> 元素。
直接子代组合器Child combinator
> 组合器选择前一个元素的直接子代的节点。
语法A > B
例子ul > li 匹配直接嵌套在 <ul> 元素内的所有 <li> 元素。
一般兄弟组合器General sibling combinator
~ 组合器选择兄弟元素,也就是说,后一个节点在前一个节点后面的任意位置,并且共享同一个父节点。
语法A ~ B
例子p ~ span 匹配同一父元素下,<p> 元素后的所有 <span> 元素。
紧邻兄弟组合器Adjacent sibling combinator
+ 组合器选择相邻元素,即后一个元素紧跟在前一个之后,并且共享同一个父节点。
语法:A + B
例子:h2 + p 会匹配所有紧邻在 <h2> (en-US) 元素后的 <p> 元素。
列组合器Column combinator
|| 组合器选择属于某个表格行的节点。
语法: A || B
例子: col || td 会匹配所有 <col> 作用域内的 <td> 元素。

伪选择器(Pseudo)

伪类
: 伪选择器支持按照未被包含在文档树中的状态信息来选择元素。
例子:a:visited 匹配所有曾被访问过的 <a> 元素。
伪元素
:: 伪选择器用于表示无法用 HTML 语义表达的实体。
例子:p::first-line 匹配所有 <p> 元素的第一行。

规范

规范 状态 备注
Selectors Level 4 Working Draft 增加 || 列组合器,网格结构选择器(grid structural selectors),逻辑选择器(logical combinators), location, time-demensional, resource state, linguistic and UI pseudo-classes, modifier for ASCII case-sensitive and case-insensitive attribute value selection.
Selectors Level 3 Recommendation 新增 ~ 一般兄弟选择器和 伪类
规定伪元素选择器使用 :: 前缀。增加 属性 选择器。
CSS Level 2 (Revision 1) Recommendation 新增 > 子元素选择器和 + 相邻兄弟选择器。
新增 通用 选择器和 属性 选择器。
CSS Level 1 Recommendation 最初定义版本.

伪类伪元素的规范位于各自的页面中。

参见

THE END
喜欢就支持一下吧
点赞7赞赏 分享
评论 抢沙发
头像
欢迎您留下宝贵的见解!
提交
头像

昵称

取消
昵称表情代码图片

    暂无评论内容