神通广大的CSS3选择器

时间 2019-11-12

原文原文链接

做者：大额_skylar

http://www.cnblogs.com/skylar/p/css3-selector.htmlcss

每一个前端工程师可能天天都会写一些css，其中选择器是很主要的一部分。可是，你们可能天天写的大可能是#id,.class这样的选择器，这并不稀奇，可是若是咱们了解而且熟用css3为咱们提供的强大而且优雅的选择器，就能够简化咱们的代码。html

我在学习和整理css3的选择器的时候都不会去考虑它的浏览器的支持程度，若是有须要，能够在这里查看它的浏览器支持状况：「caniuse.com」。前端

1、基本选择器

1. 通配选择器「*」css3

1 *{margin: 0;padding: 0} //选择页面中的全部元素并设置margin和padding值为0
2 .demo *{background:#000} //选择类名为demo的元素下面的全部元素并设置背景为黑色

2.元素选择器「Element」git

1 body{background:#ccc} //选择body元素 
2 ul{background:#fff} //选择列表ul元素

3.ID选择器「#id」web

1 html:
2 <div id="demo"></div>
3 css:
4 #demo{do something}

4.类选择器「.class」浏览器

1  html:
2  <ul></ul>
3  css:
4  .demo{do something}
5  ul.demo{do something} //这样只会选择有demo类名的ul元素

须要注意的是：多个页面元素能够有相同的类名，可是元素的id在页面中必须是惟一的。前端工程师

5.群组选择器「selector1，…，selectorN」学习

1 html:
2 <div></div>
3 <div></div>
4 <div></div>
5 ccss:
6 .section-1,.section-2,.section-3{do something} //给三个页面元素定义公用的样式

2、层次选择器

6.后代选择器「E F」字体

选择匹配E的元素内的全部匹配F的元素。

1 html：  2 <div>  3         <div></div>  4         <div>  5              <div>  6                   <div></div>  7             </div>  8         </div>     9 </div> 10  11 css: 12  13 .parent div{do something} //会选择parent里面的全部div，不论是子元素.child仍是孙元素.c-child和.c-c-child

7.子选择器「E > F」

选择配配E的元素的匹配F的直系子元素。

 1    html：  2   <div>  3           <div></div>  4           <div>  5                <div>  6                     <div></div>  7               </div>  8           </div>     9   </div> 10   11  css: 12  .parent > div{do something} //只会选择.parent元素的直系子元素，也就是只会选择到 .child元素

8.相邻兄弟元素选择器「E + F」

E和F是同辈元素，具备相同的父元素，而且F元素紧邻在E元素的后面，此时可使用相邻兄弟选择器。

1 html:  2 <div>  3     <div>1</div>  4     <div>2</div>  5     <div>3</div>  6 </div>  7   8 css:  9 10 .demo + div {do something}//会选中内容为2的div

9.通用兄弟选择器「E ~ F」

E和F是同辈元素，具备相同的父元素，而且F元素在E元素以后，E ~ F将选中E元素后面的全部F元素。

 1  html:  2   <div>  3       <div>1</div>  4       <div>2</div>  5       <div>3</div>  6       <div>4</div>  7   </div>  8     9   css: 10    11  .demo ~ div {do something}//会选中内容为2,3,4的div

3、伪类选择器

10.动态伪类选择器「E:link,E:visited,E:active,E:hover,E:focus」

1 E:link{do something} //选择定义了超连接但连接还未被访问过的元素
2 E:visited{do something} //选择定义了超连接而且连接已经被访问过的元素
3 E:active{do something} //选择匹配的E元素，且元素被激活，经常使用在锚点和按钮上
4 E:hover{do something} //选择鼠标停留的匹配的E元素
5 E:focus{do something} //选择匹配的E元素，且元素得到焦点

11.目标伪类选择器「E:target」

选择匹配E的全部元素，且匹配元素被相关URL指向。

通俗点说，页面的url若是带有#something这样的字样(https://rawgit.com/zhangmengxue/Practice/master/demo.html#section-1)那么:target就是用来匹配页面中id为#something(section-1)的元素的。

12.语言伪类选择器「E:lang(language)」

用来选择指定了lang属性的元素，其值为language。

1 html:
2 <html></html>
3 
4 css:
5 :lang(en-US) {do something}

有时候网页切换不一样的语言版本的时候，能够经过这个选择器作一些特殊的处理。

13.状态伪类选择器「E:checked,E:enabled,E:disabled」

1 E:checked{do something} //匹配表单中被选中的单选按钮或复选按钮
2 E:enabled{do something} //匹配全部起用的表单元素
3 E:disabled{do something} //匹配全部禁用的表单元素

14.结构伪类选择器「E:first-child,E:last-child,E:root,E:nth-child(n),E:nth-last-child(n),E:nth-of-type(n),E:nth-last-of-type(n),E:first-of-type,E:last-of-type,E:only-child,E:only-of-type,E:empty」

14.1 [E:first-child]

用来选取特定元素的第一个子元素。

 1 html:  2 <ul>  3     <li>1</li>  4     <li>2</li>  5     <li>3</li>  6     <li>4</li>  7     <li>5</li>  8 </ul>  9 css:10 11 ul > li:first-child {do something} //用来选取ul中的第一个li元素

14.2 [E:last-child]

用来选取特定元素的最后一个子元素。

 1  html:  2   <ul>  3       <li>1</li>  4       <li>2</li>  5       <li>3</li>  6       <li>4</li>  7       <li>5</li>  8   </ul>  9   css:10   ul > li:last-child {do something} //用来选取ul中的最后一个li元素

14.3 [E:nth-child()],[E:nth-last-child()]

用来选取某个父元素的一个或多个特定的子元素，其中的n能够是数值(从1开始)，也能够是包含n的表达式，也能够是odd(奇数)，even(偶数)。

E:nth-last-child()选择器的使用方法于E:nth-child()是相同的，不一样的是E:nth-last-child()选择的元素是从父元素的最后一个子元素开始算起。

 1   html:  2     <ul>  3         <li>1</li>  4         <li>2</li>  5         <li>3</li>  6         <li>4</li>  7         <li>5</li>  8     </ul>  9   css:10    ul > li:nth-child(2n+1) {do something} //用来选取ul中的第2n+1(奇数)个li元素

14.4 [E:root]

用来匹配元素E所在的文档中的根元素，在html文档中根元素就始终是html。

14.5 [E:nth-of-type(),E:nth-last-of-type()]

E:nth-of-type()只计算父元素中指定的某种类型的子元素，当某个元素的子元素类型不仅是一种时，使用nth-of-type来选择会比较有用。

E:nth-last-of-type()的用法同E:nth-of-type()相同，不一样的是:nth-last-of-type()也是从父元素的最后一个子元素开始算起。

li:nth-of-type(3)的话就会标识它只会选择第三个li元素，别的元素会忽略掉，如：

 1 html:  2 <ul>  3     <li>1</li>  4     <li>2</li>  5     <div>3</div>  6     <div>4</div>  7     <li>5</li>  8     <li>6</li>  9     <li>7</li> 10     <li>8</li>11 </ul> 12  13 ul > li:nth-of-type(3){do something} //会选中内容为5的li元素

可是使用nth-child就会是这样：

 1 html:  2 <ul>  3     <li>1</li>  4     <li>2</li>  5     <div>3</div>  6     <div>4</div>  7     <li>5</li>  8     <li>6</li>  9     <li>7</li> 10     <li>8</li>11 </ul> 12  13 ul > li:nth-child(3){do something} //会选中内容为3的div元素

14.6 [E:first-of-type,E:last-of-type]

:first-of-type和:last-of-type这两个选择器相似于:first-child和:last-child，不一样的就是指定了元素的类型。

 1  html:  2   <ul>  3       <div>1</div>  4       <div>2</div>  5       <li>3</li>  6       <li>4</li>  7       <li>5</li>  8       <li>6</li>  9  </ul> 10  CSS： 11  ul > li:first-of-type{do something} //会选中内容为3的li元素

14.7 [E:only-child]

匹配的元素E是其父元素的惟一子元素，也就是说匹配元素的父元素只有一个子元素。

 1 html:  2 <div>  3    <p>1-1</p>  4    <p>1-2</p>  5 </div>  6 <div>  7    <p>2-1</p>  8 </div>  9  10 css: 11 .demo > p:only-child{do something}//会选取到内容为2-1的p元素

14.8 [E:only-of-type]

:only-of-type用来选择一个元素，他的类型在他父元素的全部子元素中是惟一的。也就是说，一个父元素有不少子元素，而其中只有一个子元素的类型是惟一的，那么就可使用:only-of-type来选取这个元素。

这个属性提及来有点绕口，写了个简陋的demo说明意思：[查看源码][运行demo]

14.9 [E:empty]

:empty用来选择没有任何内容的元素，哪怕是一个空格都没有的元素。

15 否认伪类选择器「E:not(F)」

能够用来选取全部除了F外的全部元素。

input:not([type=submit]){do something} //能够用来给表单的全部input元素定义样式，除了submit按钮以外

4、伪元素

之前咱们使用的伪元素是:first-letter,:first-line,:before,:after,这样的。但css3定义的伪元素变成了双冒号，主要用来区分伪类和伪元素。对于IE6-8,仅支持单冒号表示方法，可是其余现代浏览器两种表示方法是均可以的，也就是说在现代浏览器中伪元素使用双冒号和单冒号都是会识别的。

16「::first-letter」

::first-letter用来选择文本块的第一个字母,经常使用于文本排版方面。

1  html：
2  <div>
3      <p>this is test line.....</p>
4  </div> 5  6 css: 7  8 div p::first-letter{do something} //将会选中<p>中的第一个字母t

17「::first-line」

::first-line用于匹配元素的第一行文本，也是经常使用于文本排版。

 1  html：  2   <div>  3       <p>  4          this is first line..........省略.......  5          this is the second line ...省略....  6      </p>  7   </div>  8   
 9  css:
 10  
 11  div p::first-line{do something} //将会选中<p>中的第一行文字

18「::before,::after」

::before,::after同咱们以前熟用的:before和:after使用方法相同，它们不是指存于标记中的内容，是配合使用content属性能够插入额外内容的位置，尽管生成的内容不会成为DOM的一部分，但它一样能够设置样式。

19「::selection」

css3新定义的伪元素::selection用来匹配突出显示的文本。可是使用前须要确认浏览器对它的支持程度。

浏览器默认的状况下，咱们选中的文本背景是蓝色，字体是白色。经过使用::selection，咱们能够改变它的效果。

::selection{background:#ccc;color:red} //这样改写后咱们选中的文本背景颜色和文字颜色就能够自定义了

可是须要注意的是，::selection仅接受两个属性，一个是background，一个是color。

5、属性选择器

在html中，经过给元素添加属性，给以给元素添加一些附加的信息，属性选择器就能够经过定位属性来选取特定的元素。

20「 E[attr] 」

用来选择有某个属性的元素，不论这个属性的值是什么。

1 html:
2 <div id="demo">
3   <a href="" id="test"></a>
4   <a href="www.taobao.com"></a>
5   <a href="#"  id="show">
6 </div> 7 css: 8 a[id]{do something} //将会选择具备id属性的a标签

21「 E[attr=val] 」

用来选取具备属性attr而且属性值为val的元素。

1  html:
2  <div id="demo">
3    <a href="" id="test" title="test"></a>
4    <a href="www.taobao.com"></a>
5    <a href="#"  id="show" title="test">
6 </div> 7  css: 8  a[id=test][title]{do something} //将会选择具备id属性值为test且具备title属性的a标签

22「 E[attr|=val] 」

E[attr|=val]用来选择具备属性attr且属性的值为val或以val-开头的元素(其中-是不可或缺的)。

1  html:
2   <div id="demo">
3     <a href="" id="test" title="test"></a>
4     <a href="www.taobao.com"></a>
5     <a href="#"  id="show" title="test">
6  </div> 7  css: 8   a[lang|=zh]{do something} //将会选择具备lang属性值为zh或属性值以zh开头的a标签

23「 E[attr~=val] 」

当某个元素的某个属性具备多个用空格隔开的属性值，此时使用E[attr~=val]只要attr属性多个属性值中有一个于val匹配元素就会被选中。

1  html:
2   <div id="demo">
3     <a href="" id="test" title="test first"></a>
4     <a href="www.taobao.com" class="taobao web" title="second test"></a>
5     <a href="#"  id="show" title="test">
6  </div> 7   css: 8   a[title~=test]{do something} //将会选择具备title属性且其中一个属性值为test的a标签

24「 E[attr^=val] 」

用来选择属性attr的属性值是以val开头的全部元素，注意它与E[attr|=val]的区别，attr|=val中-是必不可少的，也就是说以val-开头。

1  html:
2      <div id="demo">
3        <a href="http://zhangmengxue.com" id="test" title="test first"></a>
4        <a href="www.taobao.com" class="taobao web" title="secondtest"></a>
5        <a href="#"  id="show" title="testlink">
6     </div> 7   css: 8      a[href^=http]{do something} //将会选择href属性以http开头的a标签

25「 E[attr$=val] 」

这个选择器恰好跟E[attr^=val]相反，用来选择具备attr属性且属性值以val结尾的元素。

1  html:2      <div id="demo">3         <a href="http://zhangmengxue.com/header.png" id="test" title="test first"></a>4         <a href="www.taobao.com/title.jpg" class="taobao web" title="secondtest"></a>5         <a href="#"  id="show" title="testlink">6      </div> 7  css: 8       a[href$=png]{do something} //将会选择href属性以png结尾的a标签