最常用的css选择器及兼容性 +几个好用却不多见的 nth-child等
你也许已经掌握了id、class、后台选择器这些基本的css选择器。但这远远不是css的全部。下面向大家系统的解析css中30个最常用的选择器,包括我们最头痛的浏览器兼容性问题。掌握了它们,才能真正领略css的巨大灵活性。
1. *
* { margin: 0; padding: 0; }
星状选择符会在页面上的每一个元素上起作用。web设计者经常用它将页面中所有元素的margin和padding设置为0。*选择符也可以在子选择器中使用。
#container * { border: 1px solid black; }
上面的代码中会应用于id为container元素的所有子元素中。除非必要,我不建议在页面中过的的使用星状选择符,因为他的作用域太大,相当耗浏览器资源。兼容浏览器:IE6+、Firefox、Chrome、Safari、Opera
2. #X
#container { width: 960px; margin: auto; }
井号作用域有相应id的元素。id是我们最常用的css选择器之一。id选择器的优势是精准,高优先级(优先级基数为100,远高于class的10),作为javascript脚本钩子的不二选择,同样缺点也很明显优先级过高,重用性差,所以在使用id选择器前,我们最好问下自己,真的到了非用id选择器的地步?兼容浏览器:IE6+、Firefox、Chrome、Safari、Opera
3. .X
.error { color: red; }
这是一个class(类)选择器。class选择器与id选择器的不同是class选择器能作用于期望样式化的一组元素。兼容浏览器:IE6+、Firefox、Chrome、Safari、Opera
4. X Y
li a { text-decoration: none; }
这也是我们最常用的一种选择器——后代选择器。用于选取X元素下子元素Y,要留意的点是,这种方式的选择器将选取其下所有匹配的子元素,无视层级,所以有的情况是不宜使用的,比如上述的代码去掉li下的所有a的下划线,但li里面还有个ul,我不希望ul下的li的a去掉下划线。使用此后代选择器的时候要考虑是否希望某样式对所有子孙元素都起作用。这种后代选择器还有个作用,就是创建类似命名空间的作用。比如上述代码样式的作用域明显为li。 兼容浏览器:IE6+、Firefox、Chrome、Safari、Opera
5. X
a { color: red; } ul { margin-left: 0; }
标签选择器。使用标签选择器作用于作用域范围内的所有对应标签。优先级仅仅比*高。兼容浏览器:IE6+、Firefox、Chrome、Safari、Opera
6. X:visited和X:link
a:link { color: red; } a:visted { color: purple; }
使用:link伪类作用于未点击过的链接标签。:hover伪类作用于点击过的链接。兼容浏览器:IE7+、Firefox、Chrome、Safari、Opera
7. X+Y
ul + p { color: red; }
相邻选择器,上述代码中就会匹配在ul后面的第一个p,将段落内的文字颜色设置为红色。(只匹配第一个元素)兼容浏览器:IE7+、Firefox、Chrome、Safari、Opera
8. X>Y
div#container > ul { border: 1px solid black; } <div id="container"> <ul> <li> List Item <ul> <li> Child </li> </ul> </li> <li> List Item </li> <li> List Item </li> <li> List Item </li> </ul> </div>
子选择器。与后代选择器X Y不同的是,子选择器只对X下的直接子级Y起作用。在上面的css和html例子中,div#container>ul仅对container中最近一级的ul起作用。从理论上来讲X > Y是值得提倡选择器,可惜IE6不支持。兼容浏览器:IE7+、Firefox、Chrome、Safari、Opera
9. X ~ Y
ul ~ p { color: red; }
相邻选择器,与前面提到的X+Y不同的是,X~Y匹配与X相同级别的所有Y元素,而X+Y只匹配第一个。兼容浏览器:IE7+、Firefox、Chrome、Safari、Opera
10. X[title]
a[title] { color: green; }
属性选择器。比如上述代码匹配的是带有title属性的链接元素。
兼容浏览器:IE7+、Firefox、Chrome、Safari、Opera
11. X[title="foo"]
a[href="http://css9.net"] { color: #1f6053; }
属性选择器。 上面的代码匹配所有拥有href属性,且href为http://css9.net的所有链接。
这个功能很好,但是多少又有些局限。如果我们希望匹配href包含css9.net的所有链接该怎么做呢?看下一个选择器。兼容浏览器:IE7+、Firefox、Chrome、Safari、Opera
12. X[title*="css9.net"]
a[href*="css9.net"] { color: #1f6053; }
属性选择器。正如我们想要的,上面代码匹配的是href中包含"css9.net"的所有链接。
兼容浏览器:IE7+、Firefox、Chrome、Safari、Opera
13. X[href^="http"]
a[href^="http"] { background: url(path/to/external/icon.png) no-repeat; padding-left: 10px; }
属性选择器。上面代码匹配的是href中所有以http开头的链接。兼容浏览器:IE7+、Firefox、Chrome、Safari、Opera
13. X[href$=".jpg"]
a[href^="http"] { background: url(path/to/external/icon.png) no-repeat; padding-left: 10px; }
属性选择器。在属性选择器中使用$,用于匹配结尾为特定字符串的元素。在上面代码中匹配的是所有链接到扩展名为.jpg图片的链接。(注意,这里仅仅是.jpg图片,如果要作用于所有图片链接该怎么做呢,看下一个选择器。)
兼容浏览器:IE7+、Firefox、Chrome、Safari、Opera
14. X[data-*="foo"]
在上一个选择器中提到如何匹配所有图片链接。如果使用X[href$=".jpg"]实现,需要这样做:
a[href$=".jpg"], a[href$=".jpeg"], a[href$=".png"], a[href$=".gif"] { color: red; }
看上去比较麻烦。另一个解决办法是为所有的图片链接加一个特定的属性,例如‘data-file’
html代码
<a href="path/to/image.jpg" data-filetype="image"> 图片链接 </a>
css代码如下:
a[data-filetype="image"] { color: red; }
这样所有链接到图片的链接字体颜色为红色。
兼容浏览器:IE7+、Firefox、Chrome、Safari、Opera
15. X[foo~="bar"]
属性选择器。属性选择器中的波浪线符号可以让我们匹配属性值中用空格分隔的多个值中的一个。看下面例子:
html代码
<a href="path/to/image.jpg" data-info="external image"> Click Me, Fool </a>
css代码
a[data-info~="external"] { color: red; } a[data-info~="image"] { border: 1px solid black; }
在上面例子中,匹配data-info属性中包含“external”链接的字体颜色为红色。匹配data-info属性中包含“image”的链接设置黑色边框。
兼容浏览器:IE7+、Firefox、Chrome、Safari、Opera
17. X:checked
checked伪类用来匹配处于选定状态的界面元素,如radio、checkbox。
input[type=radio]:checked { border: 1px solid black; }
上面代码中匹配的是所有处于选定状态的单选radio,设置1px的黑色边框。
兼容浏览器:IE9+、Firefox、Chrome、Safari、Opera
18. X:after和X:before
这两个伪类与content结合用于在元素的前面或者后面追加内容,看一个简单的例子:
h1:after {content:url(/i/logo.gif)}
上面的代码实现了在h1标题的后面显示一张图片。
我们也经常用它来实现清除浮动,写法如下:
.clearfix:after { content: ""; display: block; clear: both; visibility: hidden; font-size: 0; height: 0; } .clearfix { *display: inline-block; _height: 1%; }
19. X:hover
div:hover { background: #e3e3e3; }
:hover伪类设定当鼠标划过时元素的样式。上面代码中设定了div划过时的背景色。
需要注意的是,在ie 6中,:hover只能用于链接元素。
这里分享一个经验,在设定链接划过时出现下滑线时,使用border-bottom会比text-decoration显得更漂亮些。代码如下:
a:hover { border-bottom: 1px solid black; }
兼容浏览器:IE6+、Firefox、Chrome、Safari、Opera
20. X:not(selector)
div:not(#container) { color: blue; }
否定伪类选择器用来在匹配元素时排除某些元素。在上面的例子中,设定除了id为container的div元素字体颜色为blue。
兼容浏览器:IE9+、Firefox、Chrome、Safari、Opera
21. X::pseudoElement
::伪类用于给元素片段添加样式。比如一个段落的第一个字母或者第一行。需要注意的是,这个::伪类只能用于块状元素。
下面的代码设定了段落中第一个字母的样式:
p::first-letter { float: left; font-size: 2em; font-weight: bold; font-family: cursive; padding-right: 2px; }
下面的代码中设定了段落中第一行的样式:
p::first-line { font-weight: bold; font-size: 1.2em; }
兼容浏览器:IE6+、Firefox、Chrome、Safari、Opera
(IE6竟然支持,有些意外啊。)
22. X:nth-child(n)
li:nth-child(3) { color: red; }
这个伪类用于设定一个序列元素(比如li、tr)中的第n个元素(从1开始算起)的样式。在上面例子中,设定第三个列表元素li的字体颜色为红色。
看一个更灵活的用法,在下面例子中设定第偶数个元素的样式,可以用它来实现隔行换色:
tr:nth-child(2n) { background-color: gray; }
兼容浏览器:IE9+、Firefox、Chrome、Safari
23. X:nth-last-child(n)
li:nth-last-child(2) { color: red; }
与X:nth-child(n)功能类似,不同的是它从一个序列的最后一个元素开始算起。上面例子中设定倒数第二个列表元素的字体颜色。
兼容浏览器:IE9+、Firefox、Chrome、Safari、Opera
24. X:nth-of-type(n)
ul:nth-of-type(3) { border: 1px solid black; }
与X:nth-child(n)功能类似,不同的是它匹配的不是某个序列元素,而是元素类型。例如上面的代码设置页面中出现的第三个无序列表ul的边框。
兼容浏览器:IE9+、Firefox、Chrome、Safari
25. X:nth-last-of-type(n)
ul:nth-last-of-type(3) { border: 1px solid black; }
与X:nth-of-type(n)功能类似,不同的是它从元素最后一次出现开始算起。上面例子中设定倒数第三个无序列表的边框
兼容浏览器:IE9+、Firefox、Chrome、Safari、Opera
26. X:first-child
:first-child伪类用于匹配一个序列的第一个元素。我们经常用它来实现一个序列的第一个元素或最后一个元素的上(下)边框,如:
ul:nth-last-of-type(3) { border: 1px solid black; }
兼容浏览器:IE7+、Firefox、Chrome、Safari、Opera
27. X:last-child
ul > li:last-child { border-bottom:none; }
与:first-child类似,它匹配的是序列中的最后一个元素。
兼容浏览器:IE9+、Firefox、Chrome、Safari、Opera
28. X:only-child
div p:only-child { color: red; }
这个伪类用的比较少。在上面例子中匹配的是div下有且仅有一个的p,也就是说,如果div内有多个p,将不匹配。
<div><p> My paragraph here. </p></div> <div> <p> Two paragraphs total. </p> <p> Two paragraphs total. </p> </div>
在上面代码中第一个div中的段落p将会被匹配,而第二个div中的p则不会。
兼容浏览器:IE9+、Firefox、Chrome、Safari、Opera
29. X:only-of-type
li:only-of-type { font-weight: bold; }
这个伪类匹配的是,在它上级容器下只有它一个子元素,它没有邻居元素。例如上面代码匹配仅有一个列表项的列表元素。
兼容浏览器:IE9+、Firefox、Chrome、Safari、Opera
30. X:first-of-type
:first-of-type伪类与:nth-of-type(1)效果相同,匹配出现的第一个元素。我们来看个例子:
<div> <p> My paragraph here. </p> <ul> <li> List Item 1 </li> <li> List Item 2 </li> </ul> <ul> <li> List Item 3 </li> <li> List Item 4 </li> </ul> </div>
在上面的html代码中,如果我们希望仅匹配List Item 2列表项该如何做呢:
方案一:
ul:first-of-type > li:nth-child(2) { font-weight: bold; }
方案二:
p + ul li:last-child { font-weight: bold; }
方案三:
ul:first-of-type li:nth-last-child(1) { font-weight: bold; }
兼容浏览器:IE9+、Firefox、Chrome、Safari、Opera。
总结:
如果你正在使用老版本的浏览器,如IE 6,在使用上面css选择器时一定要注意它是否兼容。不过,这不应成为阻止我们学习使用它的理由。在设计时,你可以参考浏览器兼容性列表,也可以通过脚本手段让老版本的浏览器也支持它们。
另一点,我们在使用javascript类库的选择器时,例如jquery,要尽可能的使用这些原生的css3选择器,因为类库的选择器引擎会通过浏览器内置解析它们,这样会获得更快的速度。
原文:http://net.tutsplus.com/tutorials/html-css-techniques/the-30-css-selectors-you-must-memorize/
转载于:https://blog.51cto.com/mowenchuxin/1316643
最常用的css选择器及兼容性 +几个好用却不多见的 nth-child等相关推荐
- 设计中最常用的CSS选择器
准确而简洁的运用CSS选择器会达到非常好的效果.我们不必通篇给每一个元素定义类(class)或ID,通过合适的组织,可以用最简单的方法实现同样的效果.在实际工作中,最常用的选择器有以下五类: 一.标签 ...
- 一文带你快速了解常用的CSS选择器场景
说明 近期做了一个小测验,上面设计的题目能够覆盖较多的CSS选择器的场景,特此将其总结记录出来可以更直观的参考. 1 定位到ul元素中的第一个li元素 <ul><li>< ...
- 快速拿捏常用的CSS选择器
文章目录 一.基本语法掌握 二.CSS的引入方式 2.1 内部样式 2.2 行内样式 2.3 外部样式 三.选择器 3.1 基础选择器 3.1.1 标签选择器 3.1.2 类选择器 3.1.3 id选 ...
- 30个最常用css选择器解析
你也许已经掌握了id.class.后台选择器这些基本的css选择器.但这远远不是css的全部.下面向大家系统的解析css中30个最常用的选择器,包括我们最头痛的浏览器兼容性问题.掌握了它们,才能真正领 ...
- html5类选择器用什么表示,HTML_揭秘常用的五类CSS选择器用法,有许多新手朋友不知道在什么 - phpStudy...
揭秘常用的五类CSS选择器用法 有许多新手朋友不知道在什么情况下运用什么样的CSS选择器,针对新手朋友,对CSS选择器作一些简单的说明,这里重点介绍一下最常用的五类CSS选择器的使用. 本文向大家描述 ...
- 常用的css选择符,CSS选择器五大基本选择符
原标题:CSS选择器五大基本选择符 1. *(通配符) *通配符选择器,经常用于css reset(样式重置),清理标签的默认样式,但现在一般不提倡直接使用*了,主要是*会匹配所有标签,相当耗资源.* ...
- HTML5 CSS选择器总结(强烈推荐)
你也许已经掌握了id.class.后台选择器这些基本的css选择器.但这远远不是css的全部.下面向大家系统的解析css中30个最常用的选择器,包括我们最头痛的浏览器兼容性问题.掌握了它们,才能真正领 ...
- html5--6-5 CSS选择器2
html5--6-5 CSS选择器2 实例 学习要点 掌握常用的CSS选择器 了解不太常用的CSS选择器 什么是选择器 当我们定义一条样式时候,这条样式会作用于网页当中的某些元素,所谓选择器就是样式作 ...
- html5--6-4 CSS选择器
html5--6-4 CSS选择器 实例 学习要点 掌握常用的CSS选择器 了解不太常用的CSS选择器 什么是选择器 当我们定义一条样式时候,这条样式会作用于网页当中的某些元素,所谓选择器就是样式作用 ...
最新文章
- Cocos2d-x3.2 屏幕截图
- 《C++语言基础》程序阅读——和对象找感觉
- linux-basic(11)认识和学习bash
- 软件测试课程学习总结
- linux用户命令解释器,Linux下的命令解释器 ash.exe
- Spring Boot (16)---优雅的入门篇
- String 类实现 以及 流插入/流提取运算符重载
- 【VRP】基于matlab节约里程算法求解车辆路径规划问题【含Matlab源码 1166期】
- yaahp层次分析法(文末含破解版软件)
- 安卓WebView调起本地文件选择
- JavaFX TableView 自定义可编辑状态的切换和监听
- 抢跑俞敏洪,教培人“玩命”直播
- java判断时间日期是否等于当前日期
- 美团3年阿里4年,我的坎坷进阶之路
- Apache Pivot教程 -- Calendars
- 测试工程师之【python】按工龄开始日期和司龄开始日期计算当年法定年假
- [置顶]《游戏引擎架构》信息总汇
- java 1st 2nd 3rd 4th_1st怎么输入excel “st”在1的右上角 EXCEL excel 1st 2nd 3rd 4th 怎么设置上标 如何改为上标...
- 【Paper Reading】
- python计算绩效工资编程_Python实战精选:计算销售提成
热门文章
- linux环境编程-- ftok()函数
- expires与etag控制页面缓存的优先级
- PHP 调用C的代码
- Qt简介、安装及在Ubuntu14.04 32位上简单使用举例
- SSE2 Intrinsics各函数介绍
- OpenCV中resize函数五种插值算法的实现过程
- 【FFmpeg】如何通过字符串到对应的封装器,以flv为例
- python分块处理功能_Python-numpy实现灰度图像的分块和合并方式
- 微信同步通讯录服务器繁忙,企业微信同步通讯录时提示 mobile existed
- wpf窗口向左向上_PaperWM:GNOME 下的平铺窗口管理