CSS 1.0~3.0选择器(中)

HTML5学堂:上一篇 讲到CSS1.0~CSS3.0选择器的兼容问题等,CSS选择器的使用是特别广泛的,大家也会经常用到,而用到的选择器有哪些?接下来本文会介绍CSS1~CSS3的选择器,而本章针对css1-css2的一个整理。希望对大家有帮助!谢谢!

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之间用空格分隔

p { font-size:2em; }

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 F

后代元素选择器,匹配所有属于E元素后代的F元素,E和F之间用空格分隔

p { font-size:2em; }

E > F

子元素选择器,匹配所有E元素的子元素F

div > strong { color:#f00; }

E + F

毗邻元素选择器,匹配所有紧随E元素之后的同级元素F

p + p { 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元素之后插入生成的内容

原文发布于微信公众号 - HTML5学堂(h5course-com)

原文发表时间:2015-11-30

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏MelonTeam专栏

Bitmap 源码阅读笔记

导语: Android 系统上的图片的处理,跟Bitmap 这个类脱不了关系,我们有必要去深入阅读里面的源码,以便在工作中能更好的处理Bitmap相关的问题...

2498
来自专栏搞前端的李蚊子

Html5模拟通讯录人员排序(sen.js)

// JavaScript Document  var PY_Json_Str = ""; var PY_Str_1 = ""; var PY_Str_...

5896
来自专栏Petrichor的专栏

Dataset 列表:机器学习研究

In computer vision, face images have been used extensively to develop face recog...

1501
来自专栏我和未来有约会

简练的视图模型 ViewModel

patterns & practices Developer Center 发布了 Unity Application Block 1.2 for Silver...

2169
来自专栏一个会写诗的程序员的博客

java.base.jmod

/Library/Java/JavaVirtualMachines/jdk-9.jdk/Contents/Home/jmods$ jmod list java....

1112
来自专栏余生开发

echarts太阳分布图-饼图来回穿梭

var dom = document.getElementById("container");

1172
来自专栏marsggbo

Udacity并行计算课程 CS344 编程作业答案

832
来自专栏专知

2018年SCI期刊最新影响因子排行,最高244,人工智能TPAMI9.455

2018年6月26日,最新的SCI影响因子正式发布,涵盖1万2千篇期刊。CA-Cancer J Clin 依然拔得头筹,其影响因子今年再创新高,达244.585...

1282
来自专栏linux驱动个人学习

高通Audio中ASOC的machine驱动

ASoC被分为Machine、Platform和Codec三大部分,其中的Machine驱动负责Platform和Codec之间的耦合以及部分和设备或板子特定的...

9764
来自专栏WOLFRAM

向日葵中的数学之美

1833

扫码关注云+社区