`
wb1991wb
  • 浏览: 151297 次
  • 来自: 上海
社区版块
存档分类
最新评论

CSS选择器说明

    博客分类:
  • CSS
 
阅读更多

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的总结。
注:
绿色 / √  表示目前支持。
橙色/ Δ   表示浏览器部分支持当前CSS选择器。
红色/ Χ   表示浏览器完全不支持。

CSS选择器浏览器支持情况,其中包括最新的CSS3和Safari 4.0 Beta的支持情况。感谢Estelle Weyl的总结。(转载请注明出处:WEB前端开发 http://www.css88.com/)

注:绿色 / √  表示目前支持; 橙色/ Δ   表示浏览器部分支持当前CSS选择器;红色/ Χ   表示浏览器完全不支持;

css-browsers-1-500x142

css-browsers-2

推荐一个检测浏览器对CSS1-4选择器的支持情况的网页工具http://css4-selectors.com/browser-selector-test/

小志哪里搞了张图过来,更新一下,嘎嘎。

 

 

 

54c9a9ecgw1eqxhciyimxj21h72e04qp

 

分享到:
评论

相关推荐

    CSS选择器 CSS 选择器 CSS3

    包含CSS1~CSS3的所有选择器,同时说明各选择器的浏览器支持情况

    四大类CSS选择器的使用说明

    基础选择器 组合选择器 属性选择器 伪类选择器 层叠性和继承性 CSS选择器

    HTML5&CSS3网页制作:关系选择器.pptx

    CSS3选择器--关系选择器 关系选择器 01 子代选择器(>) 子代选择器主要用来选择某个元素的第一级子元素。 定义 语法结构 E>F{ CSS样式属性 } 说明 选择所有作为E元素的子元素F。 子代选择器(>) 示例:设置 h1 ...

    HTML5&CSS3网页制作:伪元素选择器.pptx

    CSS3选择器-- 伪元素选择器 伪元素选择器 01 伪元素选择器 所谓伪元素选择器,是针对CSS中已经定义好的伪元素使用的选择器。CSS中常用的伪元素选择器有:before伪元素选择器和:after伪元素选择器 :before选择器 :...

    CSS3 样式选择器

    在定义CSS时,需要知道其书写语法和影响范围,此文档给你说明

    CSS3 伪类选择器 nth-child()说明

    今天我们就来“前瞻”一下CSS3的一个伪类选择器“:nth-child()”。 语法: :nth-child(an+b) 为什么选择她,因为我认为,这个选择器是最多学问的一个了。很可惜,据我所测,目前能较好地支持她的只有Opera9+和Safari...

    css-selector-generator-benchmark:用于生成CSS选择器的各种JavaScript库的基准

    CSS选择器生成器基准 这是为各种JavaScript库创建基准以生成CSS选择器的尝试。 它受到@dandv的启发。 用法 npm install npm test index.html应该在浏览器选项卡中打开,并带有进一步的说明。 结果 @antonmedv NPM包...

    html css javascript教程课件ppt.ppt

    HTML介绍、HTML细节、...HTML美容师CSS,包括CSS介绍、CSS细节、CSS的各种属性、CSS布局、CSS框架等;DreamWeaver基础及应用DreamWeaver画表格和表单、用DreamWeaver来应用CSS等,Javascript介绍及Javascript语言等。

    最常用的五类CSS选择器

    一些新手朋友对选择器一知半解,不知道在什么情况下运用什么样的选择器,这是一个比较头疼的问题,针对新手朋友,对CSS选择器作一些简单的说明,希望能对大家的学习工作有一定的帮助,更多的CSS知识请参考Webjx.com...

    CSS 组合选择符

    组合选择符说明了两个选择器直接的关系。 CSS组合选择符包括各种简单选择符的组合方式。 在 CSS3 中包含了四种组合方式: 后代选择器(以空格分隔) 子元素选择器(以大于号分隔) 相邻兄弟选择器(以加号分隔) 普通...

    路恩CSS学习助手

    路恩CSS学习助手,可快速查找css1、css2、css3...对CSS语法规则和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”列表示在CSS版本的属性定义(CSS1,CSS2,或对CSS3)。 选择器 示例 示例说明 CSS .class .intro 选择所有class=”intro”的元素 1 #id #firstname 选择...

    node-rcs-core:重命名所有文件中CSS选择器

    rcs是重命名css选择器的缩写 为什么? 较长CSS选择器(例如main-menu__item--disabled )可以增加文件大小。 使用此rcs-core可以很容易地重命名选择器,从而减小文件大小。 通过缩短CSS文件中CSS选择器,可以节省...

    parsel:一个很小的,允许CSS选择器解析器

    :snake: 帕塞尔纤巧的选择器解析器和特异性计算器有关使用说明等,请访问

    css介绍快速学习

    就是指定CSS要作用的标签,那个标签的名称就是选择器。意为:选择哪个容器。 选择器共有三种: a)html标签选择器。 b)class选择器。 c)id选择器。 每一个标签都定义了class属性和id属性。用于对标签进行标识,方便对...

    postcss-prefixwrap:PostCSS插件,用于使用css选择器包装css样式,以限制其对页面中父元素的影响

    :white_heavy_check_mark: 支持PostCSS v7或v8 一个插件,该插件为CSS样式添加了选择器,以限制它们对页面中父元素的影响。如何使用这个插件? 这些说明仅适用于此插件。 请参阅网站以获取框架信息。安装使用yarn ...

    详解如何使用CSS3中的结构伪类选择器和伪元素选择器

    结构伪类选择器属性说明表  属性 描述 E:first-child 匹配E元素的第一个子元素。 E:last-child 匹配E元素的最后一个子元素。 E:nth-child(n) 匹配E元素的第n个子元素。 E:nth-child(2n)或者E:nth-...

Global site tag (gtag.js) - Google Analytics