1.基础的选择器
选择器 |
含义 |
示例 |
* |
通用元素选择器,匹配任何元素 |
* { margin:0; padding:0; } |
E |
标签选择器,匹配所有使用E标签的元素 |
p { font-size:2em; } |
.info和E.info |
class选择器,匹配所有class属性中包含info的元素 |
.info { background:#ff0; } p.info { background:#ff0; } |
#info和E#info |
id选择器,匹配所有id属性等于footer的元素 |
#info { background:#ff0; } p#info { background:#ff0; } |
2.组合选择器
选择器 |
含义 |
示例 |
E,F |
多元素选择器,同时匹配所有E元素或F元素,E和F之间用逗号分隔 |
Div,p { color:#f00; } |
E F |
后代元素选择器,匹配所有属于E元素后代的F元素,E和F之间用空格分隔 |
#nav li { display:inline; } li a { font-weight:bold; } |
E > F |
子元素选择器,匹配所有E元素的子元素F |
div > strong { color:#f00; } |
E + F |
毗邻元素选择器,匹配所有紧随E元素之后的同级元素F |
p + p { color:#f00; } |
3.CSS 2.1 属性选择器
选择器 |
含义 |
示例 |
E[att] |
匹配所有具有att属性的E元素,不考虑它的值。(注意:E在此处可以省略,比如“[cheacked]”。以下同。) |
p[title] { color:#f00; } |
E[att=val] |
匹配所有att属性等于“val”的E元素 |
div[class=”error”] { color:#f00; } |
E[att~=val] |
匹配所有att属性具有多个空格分隔的值、其中一个值等于“val”的E元素 |
td[class~=”name”] { color:#f00; } |
E[att|=val] |
匹配所有att属性具有多个连字号分隔(hyphen-separated)的值、其中一个值以“val”开头的E元素,主要用于lang属性,比如“en”、“en-us”、“en-gb”等等 |
p[lang|=en] { color:#f00; } |
注:CSS 2.1 属性选择器还有一个特点就是使用多个选择器,同事满足这多个选择器:blockquote[class=quote][cite] { color:#f00; }
4.CSS 2.1 中的伪类
选择器 |
含义 |
示例 |
E:first-child |
匹配父元素的第一个子元素 |
p:first-child { font-style:italic; } input[type=text]:focus { color:#000; background:#ffe; } input[type=text]:focus:hover { background:#fff; } q:lang(sv) { quotes: “\201D” “\201D” “\2019″ “\2019″; } |
E:link |
匹配所有未被点击的链接 |
|
E:visited |
匹配所有已被点击的链接 |
|
E:active |
匹配鼠标已经其上按下、还没有释放的E元素 |
|
E:hover |
匹配鼠标悬停其上的E元素 |
|
E:focus |
匹配获得当前焦点的E元素 |
|
E:lang(c) |
匹配lang属性等于c的E元素 |
5.CSS 2.1中的伪元素
选择器 |
含义 |
示例 |
E:first-line |
匹配E元素的第一行 |
p:first-line { font-weight:bold; color;#600; } .preamble:first-letter { font-size:1.5em; font-weight:bold; } .cbb:before { content:””; display:block; height:17px; width:18px; background:url(top.png) no-repeat 0 0; margin:0 0 0 -18px; } a:link:after { content: ” (” attr(href) “) “; } |
E:first-letter |
匹配E元素的第一个字母 |
|
E:before |
在E元素之前插入生成的内容 |
|
E:after |
在E元素之后插入生成的内容 |
6.CSS 3的同级元素通用选择器
选择器 |
含义 |
示例 |
E ~ F |
匹配任何在E元素之后的同级F元素 |
p ~ ul { background:#ff0; } |
7.CSS 3 属性选择器
选择器 |
含义 |
示例 |
E[att^=”val”] |
属性att的值以”val”开头的元素 |
div[id^=”nav”] { background:#ff0; } |
E[att$=”val”] |
属性att的值以”val”结尾的元素 |
|
E[att*=”val”] |
属性att的值包含”val”字符串的元素 |
8. CSS 3中与用户界面有关的伪类
选择器 |
含义 |
示例 |
E:enabled |
匹配表单中激活的元素 |
input[type=”text”]:disabled { background:#ddd;} |
E:disabled |
匹配表单中禁用的元素 |
|
E:checked |
匹配表单中被选中的radio(单选框)或checkbox(复选框)元素 |
|
E::selection |
匹配用户当前选中的元素 |
9. CSS 3中的结构性伪类
选择器 |
含义 |
示例 |
E:root |
匹配文档的根元素,对于HTML文档,就是HTML元素 |
p:nth-child(3) { color:#f00; } p:nth-child(odd) { color:#f00; } p:nth-child(even) { color:#f00; } p:nth-child(3n+0) { color:#f00; } p:nth-child(3n) { color:#f00; } tr:nth-child(2n+11) { background:#ff0; } tr:nth-last-child(2) { background:#ff0; } p:last-child { background:#ff0; } p:only-child { background:#ff0; } p:empty { background:#ff0; } |
E:nth-child(n) |
匹配其父元素的第n个子元素,第一个编号为1 |
|
E:nth-last-child(n) |
匹配其父元素的倒数第n个子元素,第一个编号为1 |
|
E:nth-of-type(n) |
与:nth-child()作用类似,但是仅匹配使用同种标签的元素 |
|
E:nth-last-of-type(n) |
与:nth-last-child() 作用类似,但是仅匹配使用同种标签的元素 |
|
E:last-child |
匹配父元素的最后一个子元素,等同于:nth-last-child(1) |
|
E:first-of-type |
匹配父元素下使用同种标签的第一个子元素,等同于:nth-of-type(1) |
|
E:last-of-type |
匹配父元素下使用同种标签的最后一个子元素,等同于:nth-last-of-type(1) |
|
E:only-child |
匹配父元素下仅有的一个子元素,等同于:first-child:last-child或 :nth-child(1):nth-last-child(1) |
|
E:only-of-type |
匹配父元素下使用同种标签的唯一一个子元素,等同于:first-of-type:last-of-type或 :nth-of-type(1):nth-last-of-type(1) |
|
E:empty |
匹配一个不包含任何子元素的元素,注意,文本节点也被看作子元素 |
10.CSS 3的反选伪类
选择器 |
含义 |
示例 |
E:not(s) |
匹配不符合当前选择器的任何元素 |
:not(p) { border:1px solid #ccc; } |
11. CSS 3中的 :target 伪类
选择器 |
含义 |
|
E:target |
匹配文档中特定”id”点击后的效果 |
CSS选择器浏览器支持情况,其中包括最新的CSS3和Safari 4.0 Beta的支持情况。感谢Estelle Weyl的总结。(转载请注明出处:WEB前端开发 http://www.css88.com/)
注:绿色 / √ 表示目前支持; 橙色/ Δ 表示浏览器部分支持当前CSS选择器;红色/ Χ 表示浏览器完全不支持;
推荐一个检测浏览器对CSS1-4选择器的支持情况的网页工具http://css4-selectors.com/browser-selector-test/
小志哪里搞了张图过来,更新一下,嘎嘎。
相关推荐
包含CSS1~CSS3的所有选择器,同时说明各选择器的浏览器支持情况
基础选择器 组合选择器 属性选择器 伪类选择器 层叠性和继承性 CSS选择器
CSS3选择器--关系选择器 关系选择器 01 子代选择器(>) 子代选择器主要用来选择某个元素的第一级子元素。 定义 语法结构 E>F{ CSS样式属性 } 说明 选择所有作为E元素的子元素F。 子代选择器(>) 示例:设置 h1 ...
CSS3选择器-- 伪元素选择器 伪元素选择器 01 伪元素选择器 所谓伪元素选择器,是针对CSS中已经定义好的伪元素使用的选择器。CSS中常用的伪元素选择器有:before伪元素选择器和:after伪元素选择器 :before选择器 :...
在定义CSS时,需要知道其书写语法和影响范围,此文档给你说明
今天我们就来“前瞻”一下CSS3的一个伪类选择器“:nth-child()”。 语法: :nth-child(an+b) 为什么选择她,因为我认为,这个选择器是最多学问的一个了。很可惜,据我所测,目前能较好地支持她的只有Opera9+和Safari...
CSS选择器生成器基准 这是为各种JavaScript库创建基准以生成CSS选择器的尝试。 它受到@dandv的启发。 用法 npm install npm test index.html应该在浏览器选项卡中打开,并带有进一步的说明。 结果 @antonmedv NPM包...
HTML介绍、HTML细节、...HTML美容师CSS,包括CSS介绍、CSS细节、CSS的各种属性、CSS布局、CSS框架等;DreamWeaver基础及应用DreamWeaver画表格和表单、用DreamWeaver来应用CSS等,Javascript介绍及Javascript语言等。
一些新手朋友对选择器一知半解,不知道在什么情况下运用什么样的选择器,这是一个比较头疼的问题,针对新手朋友,对CSS选择器作一些简单的说明,希望能对大家的学习工作有一定的帮助,更多的CSS知识请参考Webjx.com...
组合选择符说明了两个选择器直接的关系。 CSS组合选择符包括各种简单选择符的组合方式。 在 CSS3 中包含了四种组合方式: 后代选择器(以空格分隔) 子元素选择器(以大于号分隔) 相邻兄弟选择器(以加号分隔) 普通...
路恩CSS学习助手,可快速查找css1、css2、css3...对CSS语法规则和CSS选择器也做了详细介绍;并内置了CSS布局向导式学习教程。可以把本软件看作是一个CSS词典和CSS教程软件,是前端CSS新手学习CSS样式的理想辅助工具。
Css选择器命名规则 操作系统版本:Windows 7 浏览器版本:IE6,IE7,IE8,Firefox 3.6.2,Safari 4.0.4,Chrome 5.0.356.2 dev 受影响的浏览器:所有浏览器. 经常讲到css选择器命名规则,其实不只是在团队合作基础上来讲...
CSS选择器用于选择你想要的元素的样式的模式。 “CSS”列表示在CSS版本的属性定义(CSS1,CSS2,或对CSS3)。 选择器 示例 示例说明 CSS .class .intro 选择所有class=”intro”的元素 1 #id #firstname 选择...
rcs是重命名css选择器的缩写 为什么? 较长CSS选择器(例如main-menu__item--disabled )可以增加文件大小。 使用此rcs-core可以很容易地重命名选择器,从而减小文件大小。 通过缩短CSS文件中CSS选择器,可以节省...
:snake: 帕塞尔纤巧的选择器解析器和特异性计算器有关使用说明等,请访问
就是指定CSS要作用的标签,那个标签的名称就是选择器。意为:选择哪个容器。 选择器共有三种: a)html标签选择器。 b)class选择器。 c)id选择器。 每一个标签都定义了class属性和id属性。用于对标签进行标识,方便对...
:white_heavy_check_mark: 支持PostCSS v7或v8 一个插件,该插件为CSS样式添加了选择器,以限制它们对页面中父元素的影响。如何使用这个插件? 这些说明仅适用于此插件。 请参阅网站以获取框架信息。安装使用yarn ...
结构伪类选择器属性说明表 属性 描述 E:first-child 匹配E元素的第一个子元素。 E:last-child 匹配E元素的最后一个子元素。 E:nth-child(n) 匹配E元素的第n个子元素。 E:nth-child(2n)或者E:nth-...