Bootstrap顿时 30 类 CSS 选择器,你要明白!

  CSS
选择器是如出一辙栽模式,用于选择要丰富样式的素。
平时运最多也是极端简便的即是
#id、.class 和标签选择器,在 CSS
中还有为数不少更加有力更加灵敏的挑选方式,尤其是在 CSS3
中,增加了过多初的选择器,使得选择素尤为简便易行,所以必须知道这些选择器,只有先了解了,多为此几差,自然而然就记住了。

1、* 【CSS2】

  通配符,选择页面所有因素。

1 *{
2     margin:0;
3     padding:0;
4 }

  上面代码的打算是将页面及享有因素的左右边距设置为
0,这是无比基本的消默认 CSS
样式的道。在平时习时使用这没有问题,但于实际上的色中莫建议采用,可以采用世界级专家 Eric
Meyer 的 CSS
Reset
 方案来重置浏览器默认样式,也可动用
Normalize.css, CSS
reset
和 Normalize 存着在向意见上的差异,前者是将兼具浏览器自带的体裁重置掉,以担保各浏览器渲染之一致性,而后者则是竭尽保存浏览器的默认样式,是一个可定制的
CSS 文件,使浏览器渲染所有因素尤为一致,符合现代正式,Bootstrap
就运了该方案。也可以百度参考各大网站 CSS 代码初始化样式。

  *
也足以用来挑选某个元素的兼具子元素。

1 #box *{
2     background-color:blue;
3 }

  上面的代码,会择则
ID 为 box 下的保有因素。

2、#ID 【CSS1**】**

  ID
选择器,选择具有指定 id 属性的元素。

1 #content{
2     width:960px;
3     margin:0 auto;
4 }

  ID
就比如身份证同等,具有唯一性,所以 ID 选择器是 CSS
中效率最高的选择器。

3、.Class 【CSS1】

  类选择器,选择有指定类的备因素。

1 .main{
2     color:red;
3 }

  class
选择器和 id 选择器不同的凡,一个页面可以生差不多个 class,并且 class
可以以不同的签中使用,如果体制一样之话语。当您想对几近独元素设置样式时就好采用
class,而只是针对某特定的因素设置样式那即便运 id。

  (1)、什么时用 ID,什么时用
Class

  ID 和
Class 最要紧的界别就在 ID 不能够重新,只能使用相同差,一个 ID
只能用来一个标签。而 Class 可以重复使用,同一个 Class
可以定义在差不多个标签及,且一个签可以定义多单 Class。简单明了,就是 ID
只能调用一糟,而 Class 可以调用无数赖。

  在同一个页面中单单出现同不良的片好下
ID 定义,比如网站的布局:头部、主体、侧边栏和页脚等。ID
主要用来特殊之要素,针对性强。

  而
Class 是一个公声明,当相同样式应用为广大要素时,则使用 Class
定义。在一个网站遭遇,需要调用的公用类比较多,所以采用 Class
可以形容有公用类,在动时调用就可了。

  总结:惟有发生一个独门样式的因素用
ID,而大多单要素拥有同样样式时用 Class。

  另外,document
的不二法门被 getElementById() 这个法只有能够调用指定 ID
属性的要素,因此当页面中因故到 JS
或者一旦动态调用对象时,就要用到 ID。当然也可以透过标签名、name
属性获取元素,还可由此元素的 className
来博元素,所以还是如基于实际的求来支配利用谁。如果一个因素采用 JS
进行相互,在命名时,可以于称呼前加上一个
J,这样能够增强代码的可读性,在页面量大之情事下,便于调用,但非可知用加了 J
的名称来定义 CSS 样式。

4、X 【CSS1】

  标签选择器,选择指定标签号的具有因素。

1 a{
2     text-decoration:none;
3 } 

  如果您想叫页面上拥有指定标签的体改变,可以一直用标签选择器。

5、X, Y 【CSS1】

  分组选择器,在样式表中负有相同样式的素,就得用分组选择器,把有元素组合在一起,元素中为此逗号分隔,这样就待定义一组
CSS 声明。

1 h1, h2, h3, h4, h5, h6 ,p{
2     color:red;
3 }

  上面的代码,选择页面上装有
h1 – h6 因素和段落。

6、X Y 【CSS1】

  后代选择器,选择指定元素中的享有子元素,包括子元素、孙元素、曾孙元素等等。

1 li a{
2     text-decoration:none;
3 }

  如果你想选更具体的素,就可以以后选择器。比如:并不需要去丢页面中所来链接的下划线,而单独是错过丢所有列表链接的下划线,这时便好使用后选择器。

7、X > Y 【CSS2】

  子元素选择器,选择指定父元素的保有直接子元素,不包括孙元素、曾孙元素等等。

1 div > ul{ 
2     border:1px solid black;
3 }

  如果不愿意选择随机的后裔元素,而光是择某个元素的子元素,那么即便以子元素选择器。

  X Y 和 X > Y
的区别:
前端作用为指定元素的持有后代元素,而后人仅图被指定元素的第一替后,即直接子元素。

8、X + Y 【CSS2】

  相邻兄弟选择器,选择同一父元素下,紧跟着指定元素之后的哥们元素。

1 ul + p{
2     color:red;
3 }

  上面的代码,选择有同一父元素下紧跟着
ul 元素之后的第一只 p 元素。

9、X ~ Y 【CSS3】

  普通兄弟选择器,选择同一父元素下,指定元素后的富有兄弟元素。

1 ul ~ p{
2     color:red;
3 }

  上面的代码,选择有同一父元素下
ul 元素之后的各级一个 p 元素。

  跟邻座兄弟选择器不同,普通兄弟选择器,兄弟元素不必紧跟在指定元素的尾,并且选择指定元素后面有的小兄弟元素。

10、X[attr] 【CSS2】

  属性选择器,选择具有指定属性的元素。

1 a[target]{ 
2     background-color:red;
3 }

  上面的代码,选择有带有 target
属性的 a 元素。那些尚未这属性之锚点将无见面下这体制。

11、X[attr=value] 【CSS2】

  属性与值选择器,选择有指定属性和价值的要素。

1 a[target=_blank]{ 
2     background-color:red;
3 }

  上面的代码,选择有属性为 target=”_blank”
的 a 元素。只应用于在新标签页打开的链接,其他锚点将非叫影响。

12、X[attr~=value] 【CSS2】

  这个选择器用于选择属性值包含一个点名单词的因素。~
符号可以择指定属性值是空格分隔多值的元素。

1 img[title~=flower]{
2     border:2px solid blue;
3 }

  上面的代码,选择有带有
title 属性值包含 flower 单词之 img 元素。

13、X[attr|=value] 【CSS2】

  这个选择器用于选择属性为靠定值开始之素。

  注意:该值必须是整整单词,无论是单独的例如
lang=”en”,或者诸如连字符(-)连接的如 lang =”en-us” 都可以。

1 [class|=test]{
2     background-color:yellow;
3 }

  上面的代码,选择具有
class 属性以 test 开头的要素。

  当 CSS2 中定义之 ~=、|= 和在 CSS3 中定义的
*=、^=、$= 之间的分别:

  ~=
和 *=
都好选属性值包含指定值的要素,前者必须是一个独自的单词,比如 test-a
和 test a 可吃选中,而 testa
不可知于入选。而后者即三只都得选中,只要是价值的子串就可以了。

  其他选择器和上面的法则同,即 |=
和 ~= 特性相同,^=、$= 和 *= 特性相同。

14、X[attr*=value] 【CSS3】

  这个选项器匹配元素属性值包含指定值的要素。该选择器类似于同地方的选择器,但是正如地方的选择器更强劲又灵敏。*
符号可以选择指定属性值包含子字符串的素,也便说,只要属性值中富含指定的价值,无需是一个单词,无需空格分开,就可以兼容。

1 div[class*="test"]{
2     background-color:red;
3 }

  上面的代码,选择有
class 属性的值包含子字符串 “test” 的 div 元素。

  DEMO:留意观察下代码,各要素 title
属性的定义及所采用的选择器,在页面截图中比就简单独选择器的别:

 1 <!DOCTYPE html>
 2 <html>
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>属性包含选择器的区别</title>
 6 <style>
 7 *{
 8     margin:0;
 9     padding:0;
10 }
11 img{
12     width:90px;
13     height:90px;
14 }
15 
16 img[title~=boy]{
17     border:5px solid blue;
18 }
19 
20 img[title*=girl]{
21     border:5px solid red;
22 }
23 
24 img[title~=boy]{
25     width:60px;
26     height:60px;
27 }
28 
29 img[title*=girl]{
30     width:120px;
31     height:120px;
32 }
33 </style>
34 </head>
35 <body>
36 <img src="images/1.jpg" title="xxgirl-a" alt="Bootstrap 1">
37 <img src="images/2.jpg" title="boy a" alt="Bootstrap 2">
38 <img src="images/3.jpg" title="xxgirloo-b" alt="Bootstrap 3">
39 <img src="images/4.jpg" title="boy-b" alt="Bootstrap 4">
40 </body>
41 </html>

  以
Chrome 中形如下:

Bootstrap 5

  X[attr*=value]
选择器那是一对一强的,在某些时候以显示愈加重大,比如页面被产生好多不一之链接地址时,想使改变某平等地面名相同之链接的体制时,使用这个选择器那简直是从来不谁了。

1 a[href*="ximo"]{
2     background-color:red;
3     font-size:20px;
4 }

  上面的代码,就指定了所有 href
属性值中含有 ximo 的链接的体,那无论是其是 http 的 ximo 还是 https 的
ximo,也无它是 ximo.com 还是 ximo.cn,更无她是
ximo.com/index.php?postid=1234567 还是
ximo.com/#zh/a%b%C%2B,只要该属性值中涵盖
ximo,统统吃少,是都都改样式。

  强大固然好,但往往最强大的物,就产生或超越控制,所以采用此选择器还得小心行事,避免造成不必要的结果。比如这样的:http://www.domo.com/ximo
也会见配合。

15、X[attr^=value] 【CSS3】

  这个选项器用于匹配元素属性值带有指定的值开始的要素。

1 a[href^="https"]{
2     background-color:red;
3 }

  上面的代码,选择有
href 属性的值为 “https” 开头的 a 元素。

16、X[attr$=value] 【CSS3】

  这个选项器匹配元素属性值带有指定的价结尾的元素。

1 img[src$=".png"]{
2     border:2px solid red;
3 }

  上面的代码,选择有
src 属性的价为 “.png” 结尾的 img 元素。

17、:link 和 :visited 【CSS1】

  伪类选择器。

  :link
选择具有非访问的链接。

  :visited
选择有访问过之链接。

1 a:link{
2     color:red;
3 }
4 a:visited{
5     color:purple;
6 }

  上面的代码,所有未访问的链接显示也红,所有访问过的链接显示为紫色。

18、:active 【CSS1】

  伪类选择器。

  用于选择走之链接,当鼠标点击一个链接时,他尽管会见成活动链接,该选择器主要用以为移动链接添加特殊体制。

1 a:active{ 
2     background-color:yellow;
3 }

  上面的代码,当点击页面每个链接时,显示黄色背景色。

19、:target 【CSS3】

  伪类选择器。

  用于选择时倒之靶子元素。

1 #news:target{
2     background-color:yellow;
3 }

  上面代码,选择时移动之
ID 为 #news 的元素,#news 即包含该锚名称的点击的 URL。

  URL
带有 # 锚的名,指向文档中一个切实可行的要素,即链接到某元素的
URL,这个叫链接的素即是目标元素(target element)。

  下面的例子,突出展示活动的
HTML 锚:

 1 <!DOCTYPE html>
 2 <html>
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>:target</title>
 6 <style>
 7 :target{
 8     border:2px solid red;
 9     background-color:#CFCFCF;
10 }
11 </style>
12 </head>
13 <body>
14 <h1>我是大标题</h1>
15 
16 <p><a href="#news1">跳转至内容 1</a></p>
17 <p><a href="#news2">跳转至内容 2</a></p>
18 
19 <p>点击上面的链接,:target 选择器会突出显示当前活动的 HTML 锚。</p>
20 
21 <p id="news1"><b>内容 1 ...</b></p>
22 <p id="news2"><b>内容 2 ...</b></p>
23 </body>
24 </html>

  注意:IE9+
以及有浏览器还支持该选择器,IE8 以及重新早版本的浏览器不支持。

  在
Chrome 中显得如下:

Bootstrap 6

20、:hover 【CSS1】

  伪类选择器。

  :hover
用于当鼠标移入链接时增长的奇体制。

  :hover
选择器可用于所有因素,不仅是链接,主要用于定义鼠标滑动了效果。

1 div:hover{
2     background-color:pink;
3 }
4 a:hover{
5     border-bottom: 1px solid red;
6 }

  上面的代码,当鼠标移入所有
div 元素时显示粉色背景色,当鼠标移入所有链接时显得 1
像素的最底层框。

21、:before 和 :after 【CSS2】

  伪元素选择器,在网上有好多创造性用法,主要用以在指定元素周围好成有内容。

  :before
和 :after 这俩有些伙伴,用于在指定元素之前与之后栽内容,使用 content
属性来指定要插入的始末,现实运用可以触这里。

  (1)、:before

  配合
CSS 的 content 属性在指定元素之前插入内容。

1 p:before{
2     content:"看这里 - ";
3     color:red;
4     font-weight:bold;
5 }

  上面的代码,在颇具段落之前插入
“看这里 – ”并显示为革命的粗体字。

  (2)、:after

  配合  CSS
的 content 属性在指定元素之后栽内容。

  拖欠伪元素有一个于神奇之创造性用法,那就是 clearfix:after,即排浮动。

  于
CSS
中,浮动会使元素于左或朝向右侧走,直到外的异乡缘碰到含有框或其它一个浮动框的边框为止,其周围的要素呢会见重新排列。浮动元素之后的素将圈它们,由于浮动框不在文档的便流中,所以文档的日常流中的块框表现得就如浮动框不有同样。简单了解就是是,变元素脱离了文档流,包围图片与文书的 div
不占空间。
如下:

 1 <!DOCTYPE html>
 2 <html>
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>浮动问题</title>
 6 <style>
 7 *{
 8     margin:0;
 9     padding:0;
10 }
11 #box{
12     border:2px solid red;
13     width:800px;
14 }
15 .float{
16     width:200px;
17     height:200px;
18     float:left;
19     background:#9C9C9C;
20     margin-right:10px;
21 }
22 </style>
23 </head>
24 <body>
25 <div id="box" class="clearfix">
26     <div id="" class="float">
27     </div>
28     <div id="" class="float">
29     </div>
30     <p>浮动元素脱离了文档流,包围图片和文本的 div 不占据空间。</p>
31     <img src="images/1.jpg" width="90px" height="90px" alt="Bootstrap 7">
32 </div>
33 <img src="images/4.jpg" alt="Bootstrap 8">
34 </body>
35 </html>

  于
Chrome 中显如下:

Bootstrap 9

  如达到图所示,容器中以了变,浮动的父层不见面跟着浮动框的高度增加而多,浮动元素脱离了文档流,包围图片及文件的
div 不占用空间。当 IE、Firefox 等符合
W3C 的规范浏览器被,如果起一个 DIV 作为外部容器,内部的 DIV 如果设置了
float 样式,则外部的容器 DIV 因为其中从不
clear,导致不克叫顶起来。
如下所示:

Bootstrap 10

  苟解决浮动问题,可以给父容器设置 overflow:hidden;
属性,父容器的万丈可被电动撑起来。现在为我们来询问一下再度尖端的用法,即使用 :after
伪元素来排除浮动。上面的例证中,给父容器设置了一个 class
类 clearfix,现在受他动用如下样式:

1 .clearfix:after{
2     content:" ";
3     display:block;
4     height:0;
5     clear:both;
6 }

  以
Chrome 中显得如下:

Bootstrap 11

  可以看来父容器高度给顶起来了,这即是 clearfix:after
清除浮动的
应用,他的原理大凡:创建一个情节为空高度为0的块来吧对象元素清除浮动。在规范浏览器下,.clearfix:after
会在采取至 clearfix 的元素后面栽一个 clear:both
的块级元素,从而达到消除浮动的打算。这样于急需破除浮动时,只要声明一个
.clearfix,然后以需要彻底浮动的素中上加 clearfix 类名就吓了。

22、:focus 【CSS2】

  这个选择器用于选择有关键的元素,该选择器接受键盘事件要其他用户输入的因素。

1 input:focus{ 
2     background-color:yellow;
3 }

  上面的代码,当负入域获得焦点时显得为香艳背景。

23、:first-child 【CSS2】和 :last-child 【CSS3】

  (1)、:first-child

  :first-child 选择器匹配父元素中首先只子元素。如果非是指定的子元素,则匹配失败。

  p:first-child
等同于 p:nth-child(1)。

1 p:first-child{ 
2     color:red;
3 }

  上面代码,选择具有同一父元素中率先单
p 元素。

  (2)、:last-child

  :last-child
选择器匹配父元素中最后一个子元素。如果未是指定的子元素,则匹配失败。

  p:last-child
等同于 p:nth-last-child(1)。

1 p:last-child{
2     background:red;
3 }

  上面的代码,选择具有同一父元素中最后一个
p 元素。

 

  如出一辙、他们发生啊界别吧?

  :first-child
和 :first-of-type 这简单只选择器都足以择父元素中的首先个子元素,

  :last-child
和 :last-of-type 这片只选择器都可选取父元素中最终一个子元素。

  用 :first-child
和 :first-of-type 做比较:

  :first-child 是以
CSS2 中定义的,:first-of-type 是在 CSS3 中定义之。

  前者用于匹配同父元素下第一个子元素,而后者是相当指定项目的首先单子元素。如下:

1 <div>
2     <p>我是第一个子元素</p>
3     <h1>我是第二个子元素</h1>
4     第三个子元素
5     第四个子元素
6 </div>

  :first-child

    p:first-child
匹配到 p 元素,因为 p 元素是 div 的首先个子元素。

    h1:first-child
匹配失败,因为 h1 是 div 的次独子元素,而不是首先个。

    span:first-child
匹配失败,因为就简单只 span 元素都无是 div 的率先个子元素。

  :first-of-type

    p:first-of-type
匹配到 p 元素,因为 p 是 div 中具备项目为 p 的子元素中的首先个。

    h1:first-of-type
匹配到 h1 要素,因为 h1 是 div 中颇具类型为 h1
的子元素中之率先个。

    span:first-of-type
 匹配到第三独子元素 span,上面代码中 div 有半点个类型也 span
的子元素,该选择器匹配它们遭的率先只。

  总结:
:first-child
匹配同父元素的第一只子元素,即组织及之率先个子元素。而
:first-of-type
匹配的是千篇一律父元素下同类型子元素中之第一个,该选择器主要指定的是同类型,不再限制是率先独子元素,只要是依定类型的素中首先单就是尽了。

  :last-child
和 :last-of-type 都是以 CSS3
中定义的,他们的分别及方总结的规律同。

24、:first-of-type 和 :last-of-type 【CSS3】

  (1)、:first-of-type

  :first-of-type
匹配同父元素的首先单指定项目的子元素,简单明了就是是选项指定元素的第一独哥们元素。等同于
:nth-of-type(1)。

1 li:first-of-type{
2     background-color:red;
3 }

  上面的代码,选择有列表(无序列表和平稳列表)中率先个列表项。

  (2)、:last-of-type

  :last-of-type
匹配同父元素的终极一个点名项目的子元素,简单明了就是是选项指定元素的末尾一个兄弟元素。等同于
:nth-last-of-type(1)。

1 li:last-of-type{
2     background-color:red;
3 }

  上面的代码,选择具有列表中最终一个列表项。

  注意:IE9+
以及有着浏览器还支持即半独选择器,IE8 以及重复早版本不支持。

25、:nth-of-type(n) 和 :nth-last-of-type(n) 【CSS3】

  (1)、:nth-of-type(n)

  :nth-of-type(n)
匹配同父元素的第 N 独指定项目的子元素,也可领略呢挑选指定元素的第 N
单弟兄元素。

1 p:nth-of-type(2){
2     background-color:red;
3 }

  上面的代码,选择具有同级
p 元素的第 2 个哥们元素,即同父元素下第 2 只 p 元素。

  (2)、:nth-last-of-type(n)

  :nth-last-of-type(n)
匹配同父元素的倒数第 N
单指定项目的子元素,也足以解呢挑选指定元素的倒数第 N
独小兄弟元素。

1 p:nth-last-of-type(2){
2     background:red;
3 }

  上面的代码,选择具有同级
p 元素的倒数第 2 只小兄弟元素,即同父元素下之倒数第 2 个 p 元素。

  注意:
JS 中元素的下标是起 0 开始算的,而当 CSS 选择器中是正常计算的,即于 1
开始。

  IE9+
以及具有浏览器还支持即简单个选择器,IE8 以及重复早版本不支持。

26、:nth-child(n) 和 :nth-last-child(n) 【CSS3】

  (1)、:nth-child(n)

  :nth-child(n)
匹配父元素中的第 N 独子元素,不论元素的花色。如果第 N
单不是点名的子元素,则相当失败。

1 li:nth-child(2){
2     color:red;
3 }

  上面的代码,选择有列表的第
2 个列表项。

  (2)、:nth-last-child(n)

  :nth-last-child(n)
匹配父元素中的倒数第 N 独子元素,不论元素的类别。如果倒数第 N
单不是点名的子元素,则相当失败。

1 li:nth-last-child(2){
2    color:red;
3 }

  上面的代码,选择具有列表的倒数第
2 单列表项。

  注意:IE9+
以及有浏览器还支持即简单个选择器,IE8 以及重复早版本不支持。

 

  一、25 和 26 所列的**顿时
4
个选择器都好选取父元素中的子元素,那她们到底出嘛区别为?**

  :nth-of-type
和 :nth-child,其实别为蛮简短,从字面量就可以看出,前者为什么而是
of-type,因为他俩是因 “type” 来分的。也就是说:X:nth-of-type(n)
是据父元素下第 N 单指定项目的子元素。而 X:nth-child(n) 是凭父元素下第 N
独要素,且这因素是指定的素,若未是,则匹配失败。
看下面的例子:

 1 <!DOCTYPE html>
 2 <html>
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>:nth-of-type 和 :nth-child</title>
 6 <style>
 7 /* 选择第 3 个类型为 p 的子元素,显示为蓝色背景 */
 8 p:nth-of-type(3){
 9     background:blue;
10 }
11 /* 选择倒数第 3 个类型为 p 的子元素,显示为绿色背景 */
12 p:nth-last-of-type(3){
13     background:green;
14 }
15 
16 /* 选择第 3 个子元素 p,红色背景,失败 */
17 p:nth-child(3){
18     background:red;
19 }
20 
21 /* 选择倒数第 3 个子元素 p,黄色背景,失败 */
22 p:nth-last-child(3){
23     background:yellow;
24 }
25 </style>
26 </head>
27 <body>
28 <div>
29     <p>我是第一个段落</p>
30     <p>我是第二个段落</p>
31     <ul>
32         <li>列表 1</li>
33         <li>列表 2</li>
34     </ul>
35     <p>我是第三个段落</p>
36     <p>我是第四个段落</p>
37 </div>
38 </body>
39 </html>

  以 IE
中显如下:

Bootstrap 12

  其次、这 4 个选择器也可称为奇偶选择器,参数
n 可以是一个数字,一个要字,或者一个公式。

  ①、关键字

  奇数(odd)和偶数(even)可以当作根本字用,可用以匹配索引是奇数或偶数的子元素,第一单子元素的下标是
1。 

  下面的例证,为奇数和偶数的列表项指定两种植不同的背景色:

 1 <!DOCTYPE html>
 2 <html>
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>奇偶</title>
 6 <style>
 7 li:nth-of-type(odd){
 8     background:red;
 9 }
10 li:nth-of-type(even){
11     background:blue;
12 }
13 </style>
14 </head>
15 <body>
16 <ul>
17     <li>列表 1</li>
18     <li>列表 2</li>
19     <li>列表 3</li>
20     <li>列表 4</li>
21     <li>列表 5</li>
22     <li>列表 6</li>
23     <li>列表 7</li>
24     <li>列表 8</li>
25     <li>列表 9</li>
26 </ul>
27 </body>
28 </html>

  以
Chrome 中显如下:

Bootstrap 13

  ②、公式

  使用公式
(an+b),a 代表一个循环往复的高低,N 是一个计数器(从0开始),b
是偏移值。

  上面的例证,使用了要字设置奇偶数,也可以使用公式来成功:

1 li:nth-of-type(2n-1){ /* 奇数行 */
2     background:red;
3 }
4 li:nth-of-type(2n){ /* 偶数行 */
5     background:blue;
6 }

  下面的代码,指定下标是
3 的翻番的有着列表项背景色:

1 li:nth-of-type(3n){
2     background:red;
3 }

  于
Chrome 中显示如下:

Bootstrap 14

27、:only-of-type 和 :only-child 【CSS3】

  (1)、:only-of-type

  :only-of-type
匹配属给与种中绝无仅有的同级元素。

  (2)、:only-child

  :only-child
匹配属给父元素中绝无仅有子元素的要素。

  下面的例子,是他俩之界别:

 1 <!DOCTYPE html>
 2 <html>
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>:only-of-type 和 :only-child</title>
 6 <style>
 7 p:only-of-type{
 8     background:green;
 9 }
10 p:only-child{
11     color:white;
12 }
13 </style>
14 </head>
15 <body>
16 <div>
17     <p>我是父元素下唯一的段落。</p>
18 </div>
19 
20 <div>
21     <p>我是第一个段落,我还有个列表兄。</p>
22     <ul>
23         <li>列表 1</li>
24         <li>列表 2</li>
25     </ul>
26 </div>
27 </body>
28 </html>

  以
IE 中展示如下:

Bootstrap 15

  注意:IE9+
以及拥有浏览器还支持该选择器,IE8 以及重复早版本的浏览器不支持。

28、:not(selector) 【CSS3】

  这个选择器还是生强大的,用于匹配非指定元素/选择器的每个元素,可以清楚呢取得反的意,即除指定的元素外有因素。

  下面的事例,指定页面被除了
p 元素之外的享有因素设置也绿色背景,白色字体:

 1 <!DOCTYPE html>
 2 <html>
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>:not(selector)</title>
 6 <style>
 7 p{
 8     color:red;
 9 }
10 *:not(p){
11     background:green;
12     color:white;
13 }
14 </style>
15 </head>
16 <body>
17 <h1>我是标题</h1>
18 <p>这是一个段落。</p>
19 <p>这是另一个段落。</p>
20 <div>这是 div 元素中的文本。</div>
21 <div>
22     <p>我是 div 中的段落。</p>
23 </div>
24 <ul>
25     <li>列表 1</li>
26     <li>列表 2</li>
27 </ul>
28 </body>
29 </html>

  在
Chrome 中展示如下,来感受一下他的劲吧:

Bootstrap 16

  页面中除去
p 元素之外还有 body、html
元素,反正他还不见面放过,那有人便说了,呢不是还有 title
元素么,这只要是都更改了,那简直就是超神了。

  :not(selector)
选择器不止是这般用,其实他在少数时刻要相当有效之,比如使将除了 ID 为
“main” 之外的备 div 元素都当选,那么以外即再度合适不过了。

1 div:not(#main){
2     border:1px solid black;
3 }

  注意:IE9+
以及独具浏览器还支持该选择器,IE8 以及重复早版本的浏览器不支持。

29、::selection 【CSS3】

  ::selection
选择器匹配元素中叫用户挑选还是地处高亮状态的有的。

  ::selection只堪运用叫个别底CSS属性:color、background、cursor
和 outline。

  下面的代码,当元素让用户选中后会见显得为红的字体:

1 ::selection{
2     color:red;
3 }
4 ::-moz-selection{
5     color:red;
6 }

  注意:IE9+
以及独具浏览器都支持该选择器,但是 Firefox
需要通过其个人属性 ::-moz-selection 才会得到支持 。

30、:empty 【CSS3】

  这个选择器用于匹配没有子元素的每个元素,包括文件节点。

  选择具有没有起任何子级的元素,也就是说选择页面被负有指定的空元素。

  下面的例证,指定所有空的
p 元素的背景色:

 1 <!DOCTYPE html>
 2 <html>
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>:empty</title>
 6 <style>
 7 p:empty{
 8     width:100px;
 9     height:20px;
10     background:#ff0000;
11 }
12 </style>
13 </head>
14 <body>
15 <p>第一个段落。</p>
16 <p></p>
17 <p>第三个段落。</p>
18 <p></p>
19 <p>第五个段落。</p>
20 </body>
21 </html>

  注意:IE9+
以及因此浏览器还支持该选择器,IE8 以及重复早版本的浏览器不支持。

  于
Chrome 中显如下:

Bootstrap 17

 

 

脚是其余
CSS 选择器:

31、:root 【CSS3】

  :root
匹配文档的根元素,在 HTML 中,根元素始终是 html 元素。

1 :root{
2     background:#E8E8E8;
3 }

  上面的代码,将
HTML 文档的背景设置也浅灰色。

  注意:IE9+
以及用浏览器都支持该选择器,IE8 以及重新早版本的浏览器不支持。

32、:first-line 【CSS1】

  :first-line
用于选择指定选择器的首行。

  该选择器适用于块级元素被。可以采用以下属性:

  font
| color | background | line-height | clear |

  word-spacing(字间距)
| letter-spacing(字母间距)|

  vertical-align
| text-decoration(文本修饰) | text-transform(指定大小写)。

1 p:first-line{ 
2     color:red;
3 }

  上面的代码,指定页面被具有段落的第一实践显示为革命的书体。

33、:first-letter 【CSS1】

  :first-letter
选择器用于选取指定选择器的首字母。

  该选择器仅适用于在块级元素被,可以运用以下属性:

  font
| color | background | margin | padding | border | line-height | float |
clear |

  vertical-align
(垂直对共同,只有在 float 为 ‘none’ 时)| text-decoration
| text-transform 。

1 p:first-letter{
2     font-size:32px;
3     color:#9B30FF;
4 }

  上面的代码,指定页面被拥有段落的率先独假名显示也
32 像素的紫字体。如果段落的首字符是华语,也会采取这体制。

34、:lang(language) 【CSS2】

  :lang
选择器用于选择含以靠定值开始之 lang 属性的要素。

  该值必须是总体单词,即可是单独的,比如
lang=”en”,也不过下并字符(-)比如 lang=”en-us”。

1 p:lang(en){
2     background:yellow;
3 }
4 
5 <p lang="en"> CSS :lang selector. </p>

  上面的代码,选择含以
“en” 开头的 lang 属性值的具有 p 元素。

 

下是 CSS3
中初增加的用于表单的选择器:

35、:enabled 【CSS3】

  用于匹配每个启用的元素,主要用于表单元素。

  下面的例证,设置有着
type=”text” 的就启用的 input 元素设置背景色:

 1 <!DOCTYPE html>
 2 <html>
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>:enabled</title>
 6 <style>
 7 input[type="text"]:enabled{
 8     background:yellow;
 9 }
10 </style>
11 </head>
12 <body>
13 <form action="">
14     姓名: <input type="text" value="小明" /><br/>
15     爱好: <input type="text" value="捣蛋" /><br/>
16     籍贯: <input type="text" disabled value="汉" />
17 </form>
18 </body>
19 </html>

  于
Chrome 中显得如下:

Bootstrap 18

  注意:IE9+
以及拥有浏览器都支持该选择器,IE8 以及重新早版本的浏览器不支持。

36、:disabled 【CSS3】

  用于匹配每个禁用的因素,主要用以表单元素。

  使用方面的事例,设置富有
type=”text” 的已经禁用的 input 元素设置背景色:

1 input[type="text"]:disabled{
2     background:#9C9C9C;
3 }

  在
Chrome 中显得如下:

Bootstrap 19

37、:checked 【CSS3】

  匹配每个选中的输入元素,仅适用于单纯选取按钮或复选框。

  下面的例证,为具受选中的
input 元素设置背景色:

 1 <!DOCTYPE html>
 2 <html>
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>:checked</title>
 6 <style>
 7 input:checked{
 8     background:red;
 9 }
10 </style>
11 </head>
12 <body>
13 <form action="">
14     <input type="radio" checked name="like" value="love" />喜欢<br>
15     <input type="radio" name="like" value="noLove" />不喜欢<br>
16     <input type="checkbox" checked value="散步" />散步<br>
17     <input type="checkbox" value="跑步" />跑步
18 </form>
19 </body>
20 </html>

  注意:脚下只有
IE9+ 和 Opera 浏览器支持该选择器,Chrome 和 Firefox 不支持。而且于
IE9/IE10/IE11 中展示有反差。

  在
IE9 和 IE10 中形如下:

Bootstrap 20

  以
IE11 中收回了针对复选框的支持,显示如下:

Bootstrap 21

38、:out-of-range 和  :in-range 【CSS3】

  :out-of-range 匹配元素的价在指定区间之外时展示的体制。

  :in-range
匹配元素的价在指定区间时展示的样式。

  注意:随即俩选器只作用为能指定区间值的因素,例如
input 元素中的 min 和 max 属性。如下:

 1 <!DOCTYPE html>
 2 <html>
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>:out-of-range 和 :in-range</title>
 6 <style>
 7 input:out-of-range{
 8     border:5px solid red;
 9 }
10 input:in-range{
11     border:5px solid green;
12 }
13 </style>
14 </head>
15 <body>
16 输入一个小于 5 或者 大于 10 的值:
17 <input type="number" min="5" max="10" value="12" />
18 <input type="number" min="5" max="10" value="8" />
19 </body></html>

  注意:除此之外
IE 之外所有浏览器还支持该选择器。

  以
Chrome 中展示如下:

Bootstrap 22

39、:read-write 【CSS3】

  用于匹配可读与可写的元素,即无设置 readonly
属性的素。

  时,在差不多浏览器中
:read-write 选择器只适应被安了 input 和 textarea 元素。如下:

 1 <!DOCTYPE html>
 2 <html>
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>:read-write</title>
 6 <style>
 7 input:read-write{
 8     background-color:yellow;
 9 }
10 input:-moz-read-write{
11     background-color:yellow;
12 }
13 </style>
14 </head>
15 <body>
16 <p>普通的 input 元素:<input type="text" value="Hello"></p>
17 
18 <p>只读的 input 元素:<input type="text" readonly value="Hello"></p>
19 </body></html>

  注意:除了
IE 之外所有浏览器还支持该选择器,但是 Firefox 需要通过该个人属性
:-moz-read-write 才能够得支持 。

  以
Chrome 中形如下:

Bootstrap 23

40、:read-only 【CSS3】

  用于匹配设置了
readonly 属性的要素。

  表单元素可以装
readonly 属性来定义元素就念。

  注意:当下,在大部分浏览器中 :read-only
选择器适用于 input 和 textarea 元素,但是其呢适用于安了 readonly
属性的素。如下:

1 input:read-only{
2     background-color:red;
3 }
4 input:-moz-read-only{
5     background-color:red;
6 }

  注意:除此之外
IE 之外所有浏览器都支持该选择器,但是 Firefox
需要经过该个人属性 :-moz-read-write 才能够取得支持 。

  于
Chrome 中显如下:

Bootstrap 24

41、:optional 【CSS3】

  匹配可挑选的输入元素,在表单元素是可选项时设置指定的样式,即非安装  required
属性的表单元素。

  required
属性是 HTML5
新增加的表单属性,用于规定必需在提交表单之前填写输入字段。

  表单元素中如果无专门设置
required 属性即为可卜的。

  注意:
:optional 选择器只适用于表单元素:input、select 和
textarea。如下:

 1 <!DOCTYPE html>
 2 <html>
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>:optional</title>
 6 <style>
 7 input:optional{
 8     background-color:yellow;
 9 }
10 </style>
11 </head>
12 <body>
13 <p>可选的 input 元素:<input type="text" /></p>
14 <p>必填的 input 元素:<input type="text" required /></p>
15 </body>
16 </html>

  注意:IE10+
以及独具浏览器都支持该选择器,IE9 以及更早版本的浏览器不支持。

  于
Chrome 中显得如下:

Bootstrap 25

42、:required 【CSS3】

  用于匹配设置了
required 属性的元素,在表单元素是自然填项时设置指定样式。

  表单元素可以应用
required 属性来设置必填项。

  注意:
:required 选择器只适用于表单元素:input、select 和
textarea。如下:

1 input:required{
2     background-color:green;
3 }

  注意:IE10+
以及有浏览器还支持该选择器,IE9 以及重复早版本的浏览器不支持。

  以 IE
中显示如下:

Bootstrap 26

43、:valid 【CSS3】

  匹配输入值为官的素,在表单元素的值需要根据指定条件证明时设置指定样式。

  注意:
:valid 选择器只打算为能指定区间值的因素,例如 input 元素中的 min 和 max
属性,及科学的 email 字段,合法的数字字段等。如下:

 1 <!DOCTYPE html>
 2 <html>
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>:valid</title>
 6 <style>
 7 input:valid{
 8     background-color:green;
 9 }
10 </style>
11 </head>
12 <body>
13 <p>合法邮箱:</p>
14 <input type="email" value="demo@xx.com" />
15 <p>非法邮箱:</p>
16 <input type="email" value="demo.com" />
17 </body>
18 </html>

  注意:IE10+
以及所有浏览器还支持该选择器,IE9 以及更早版本的浏览器不支持。

  于
Chrome 中形如下:

Bootstrap 27

44、:invalid 【CSS3】

  匹配输入值为非法的要素,在表单元素中之值是私自时设置指定样式。

  注意:
:invalid 选择器只打算为能指定区间值的元素,例如 input 元素中之 min 和
max 属性,及科学的 email 字段,合法的数字字段等。如下:

1 input:invalid{
2     border:2px solid red;
3 }

  注意:IE10+
以及有着浏览器还支持该选择器,IE9 以及更早版本的浏览器不支持。

  以 IE
中显示如下:

Bootstrap 28

 

 

 

当下,在
CSS 中,一共定义了 52 只选择器。

相关文章