开发者社区> 肥仔john> 正文
阿里云
为了无法计算的价值
打开APP
阿里云APP内打开

CSS魔法堂:选择器及其优先级

简介:
+关注继续查看

一、前言                              

首先看看一道阿里这期网申的题目吧!

1.找出下面优先级相同的选择器

  A. img.thumb:after  B.[data-job="frontend"]::first-letter

  C. #main::before     D. [type="checkbox"]:checked  E. ul#shop-list

 

二、回顾选择器类型                              

 html片段

<body>
  <div id="content">
    <div>Hello world</div>
    <div class="block-end">EOF</div>
  </div>
</body>

 基本选择器


 

  1. 元素(类型)选择器


div{
  color: red;
}

  2. 类选择器


.block-end{
  color: #000;
}

  3. ID选择器


#content{
  color: blue;  
}

  4. 通用元素选择器,匹配任何元素(IE5.5不支持)



*{
  width: 1000px;
}

组合选择器


 

1. 群组选择器




/** 格式
 * 选择器A, 选择器B{样式规则}
 */
div, body{
  width: 1200px;
}

对N个选择器获取的dom元素应用同一个样式,减少重复代码。

2. 后代选择器(派生选择器)




/** 格式
 * 父选择器 后代选择器{样式规则}
 */
body div{
  color: #888;
}

body下的所有div元素均应用上述样式。

3. 子元素选择器(IE5.5~IE6不支持




/** 格式
 * 父选择器 > 子元素选择器{样式规则}
 */
body > div{
  color: #111;
}

仅body的div孩子元素才应用上述样式。

4. 毗邻弟弟元素选择器(原名相邻兄弟元素选择器)IE5.5~IE6不支持





/** 格式
 * 选择器A + 选择器B{样式规则}
 */
#content + div{
  color: #111;
}


仅div#content后紧跟着的同级div应用上述样式,若如 <div id="content"></div><br/><div id="block-end">EOF</div> ,由于div#block-end不是紧跟在div#content后,因此不会应用上述样式。

5. 弟弟元素选择器(原名为兄弟选择器)(IE5.5~IE6不支持





/** 格式
 * 选择器A ~ 选择器B{样式规则}
 */
#content ~ div{
  color: #222;
}

仅div#content后的同级div都会应用上述样式,如 <div id="content"></div><br/><div id="block-end">EOF</div>  ,div#block-end都会应用上述样式。

 

属性选择器


 

1. 基础选择器[attr](如: div[id] )(IE5.5~IE6不支持

  匹配所有具有该属性,且符合基础选择器条件的元素。

2. 基础选择器[attr=value](如 div[id=content] )IE5.5~IE6不支持

  匹配所有attr的属性值等于value,且符合基础选择器条件的元素。

3基础选择器[attr~=value](如 div[val~=content] IE5.5~IE6不支持

  匹配如<div val="content dir"></div>的元素,就是匹配属性值具有多个空格分隔的值,其中一个值等于value的元素。

4. 基础选择器[attr|=value](如 div[lang|=en] )IE5.5~IE6不支持

 匹配如<div lang="en-us"></div>的元素,就是匹配属性值以value或value-为开头的元素。

5. 基础选择器[attr^=value](如 div[id^=cont] )IE5.5~IE6不支持

 匹配如<div id="content"></div>或<div id="contdummy"></div>的元素,就是匹配属性值以value开头的元素。

6. 基础选择器[attr$=value](如 div[id$=tent] )IE5.5~IE6不支持

 匹配如<div id="content"></div>或<div id="dummytent"></div>的元素,就是匹配属性值以value结尾的元素。

7. 基础选择器[attr*=value](如 div[id*=ten] )IE5.5~IE6不支持

 匹配如<div id="content"></div>或<div id="dummytent"></div>的元素,就是匹配属性值含value的元素。

 

伪类选择器


 

  我们可将伪类选择器再细分一下,以便记忆!

  结构性伪类选择器

    1. E:first-child:当元素E作为其父元素下的第一个子元素时,匹配成功。IE5.5~IE6不支持

    2. E:root:当元素E为文档的根元素(就是HTMLHtmlElement元素)时,匹配成功。(IE均不支持)

    3. E:nth-child(n):当元素E作为其父元素下第N个子元素时,匹配成功。n从1开始。IE5.5~IE8不支持

    4. E:nth-last-child(n):与E:nth-child(n)效果一样,只不过是反方向遍历。n从1开始。IE5.5~IE8不支持

    5. E:nth-of-type(n):当元素E为其父元素下同类标签的第N个时,匹配成功。n从1开始。IE5.5~IE8不支持

    6. E:nth-last-of-type(n):与E:nth-last-of-type(n)效果一样,只不过时反方向遍历。n从1开始。IE5.5~IE8不支持

    7. E:last-child:当E元素作为其父元素下最后一个子元素时,匹配成功。IE5.5~IE8不支持

    8. E:first-of-type:与E:nth-of-type(1)效果一样。IE5.5~IE8不支持

    9. E:last-of-type:与E:nth-last-of-type(1)效果一样。IE5.5~IE8不支持

    10.E:only-child:当E元素为其父元素下的唯一一个子元素,匹配成功。IE5.5~IE8不支持

    11.E:only-of-type:当E元素为其父元素下的唯一一个该标签类型的子元素时,匹配成功。IE5.5~IE8不支持

    12.E:empty:当E元素下不包含任何子元素时,匹配成功。注意:文本节点也被视为子元素。IE5.5~IE8不支持

  注意:nth-child(n)中n的合法写法如下

  ①.纯数字,指定位置索引,索引从1开始;

  ②.n,指定匹配所有位置索引,n会自动从1开始自增长,至于何时才停止就不得而知了;

  ③.纯数字n,如2n,指定匹配偶数位置索引的元素,n会自动从1开始自增长,至于何时才停止就不得而知了;

  ④.纯数字n +/- 纯数字,如2n+1,指定匹配奇数位置索引的元素,n会自动从1开始自增长,至于何时才停止就不得而知了。

  动态伪类选择器(E:hover,IE5.5~7只支持在a元素上应用,IE8+支持在其他元素上使用

  1. E:link:当元素E(a标签)未被点击时,匹配成功。

  2. E:visited:当元素E(a标签)点击过时,匹配成功。

    3. E:hover:必须在E:link、E:visited后声明才有效。当元素E(IE5.5~7时为a标签,IE8+可为其他标签)正被鼠标悬停时,匹配成功。

    4. E:active:必须在E:hover后声明才有效。当鼠标已经在元素E(a标签)按下,但未释放左键时,匹配成功。

    5. E:focus:当元素E(元素E必须为可以接收键盘或用户输入的元素)获得焦点时,匹配成功。(IE8的标准模式开始支持

  语言 :lang伪类选择器(IE5.5~8不支持

   1. E:lang(c):当元素的lang属性等于c时,则匹配成功。

  UI元素状态伪类选择器(IE5.5~8不支持

     1. E:enabled:元素E(E为表单元素)可用时,匹配成功。

     2. E:disabled:元素E(E为表单元素)不可用时,匹配成功。

     3. E:checked:元素E(E为input[type=radio]或input[type=checkbox]元素)被钩选时,匹配成功。

  否定伪类选择器(IE5.5~8不支持

     1. E:not(其他类型的选择器):当元素E不符合其他类型的选择器条件时,匹配成功。

   E:target 伪类选择器( IE浏览器完全不支持:target伪类,另一个小问题就是Opera 在使用“前进”和后退按钮时不支持该选择器

     1. E:target:当你使用锚点(片段标识符 fragment identifier)的时候,比如,http://www.smashingmagazine.com/2009/08/02/bauhaus- ninety-years-of-inspiration/#comments,这“#comments”就是一个片段标识符,你就可以使 用:target伪类来控制目标的样式。

   ::selection 伪类选择器IE5.5~8不支持

     1. E::selection:被用户选区的元素部分

 

伪元素选择器


  伪元素就是浏览器自动在匹配的匹配元素前、后增加的元素,或者是截取匹配元素内的一部分。

1. E:before(新写法E::before):用于向元素E前添加内容(IE8的标准模式开始支持

2. E:after(新写法E::after):用于向元素E后添加内容(IE8的标准模式开始支持

示例:

<style type="text/css">
div:before{
  content: "beforeDiv"
}
div:after{
  content: "afterDiv"
}
</style>
<div>content</div>

效果是: beforeDivcontentafterDiv 

3. E:first-line(新写法E::first-line):仅仅当元素E为块级元素时有效。用于向元素E中的文字的首行添加特殊样式。

4. E:first-letter(新写法E::first-letter):用于向元素E的首个字母添加特殊样式

5. E:input-placeholder:用于向元素E的placeholder添加特殊样式。由于未成为W3C规范,因此需要加浏览器厂商前缀,具体如下

/*for old version of ff*/
input:-moz-input-placeholder{
}
input:-ms-input-placeholder{
}
/*for modern browsers*/
input::-webkit-input-placeholder{
}
input::-moz-input-placeholder{
}

而且仅有以下属性可用:color、font-size、font-style、font-weight、letter-spacing、line-height、padding、text-align、text-decoration。

注意:




/* 由于伪元素选择器必须为最后一个选择器,因此下列css样式将失效 */
div::before div{
    width: 100px;
    height: 100px;
    background-color: red;   
}


三、选择器的优先级计分规则                      

  优先级是决定不同选择器的相同样式规则对同一元素的生效情况,优先级高的将覆盖优先级低的样式规则。而优先级又受到样式来源和选择器特殊性的影响,下面我们一起来了解以下。

  1. 来源

    行内样式 > 页内样式 > 外部引用样式 > 浏览器默认样式

  2. 特殊性(由四个纬度组合)

选择器类型 纬度(a,b,c,d)
行内样式 1,0,0,0
ID选择器 0,1,0,0
类选择器、属性选择器、伪类选择器 0,0,1,0
元素(类型)选择器,伪元素(类型)选择器 0,0,0,1
通用元素选择器、伪类:not选择器 0,0,0,0

                  注意:多种选择器类型时,同位叠加即可得到总纬度。

                                                                   参考:http://www.w3.org/TR/CSS21/cascade.html#specificity

  3. 计算优先级的流程

     (a). 首先根据选择器类型计算出总纬度

     (b). 若纬度相同则比较来源

     (c). 若前两者相同,则后面声明的优先级高。

  4. 通过!important提高优先级(IE5.5~6不支持)

    通过在样式规则后面添加!important关键词,可以将该样式规则提高到最高优先级。



.test{
  color: red !important;
  color: blue;
}

   IE5.5~6下, 匹配元素的文字为blue;而其他浏览器则为蓝色;IE7+下就显示红色。

   但!important不是一个优雅的办法,而且会使得样式难以调试,下面是时是使用建议

   1. 永远不要在全局CSS规则中使用;

   2. 永远不要在自制的插件中使用;

   3. 只在需要覆盖全局或外部插件的css规则(如Extjs、YUI插件的样式)的特定页面中才使用;

   4. 首先考虑使用优先级来解决问题而不是!important.

   适合使用的场景:

        将行内样式提取出来时,但此时已经有一个全站样式了;

   覆盖!important:





/* 宽度为200px */
E {
  width: 200px; !important   
  width: 100px;
}




/* 宽度为300px */
E {
  width: 200px; important
  width: 100px;
  width: 300px; important
}

 参考:https://developer.mozilla.org/zh-CN/docs/Web/CSS/Specificity

 

 5. 伪类 :not 选择器纬度为0,0,0,0

  伪类 :not 选择器自身纬度为0,0,0,0 ,但其括号内部的选择器纬度则和上述表格一致。 div:not(.content) { width: 100px; } 优先级计算如下:

div ── 纬度 0,0,0,1

:not ── 纬度 0,0,0,0

.content ── 纬度 0,0,1,0

总纬度 ── 0,0,1,1

 

6. IE6中的bug

IE6中伪类 :hover 、 :active 和 :visited 选择器的纬度不是0,0,1,0,而是0,0,2,0。

// 纬度是0,0,2,1
.cls1 .cls2 a{
  color: red;
}
// IE6下的纬度是0,0,2,1
// IE7+的纬度是0,0,1,1
a:hover{
  color: blue;
}

参考:

http://www.cnblogs.com/ddshou/archive/2009/05/05/1449768.html

http://www.cnblogs.com/ddshou/archive/2009/05/05/1449770.html

 

四、浏览器解析选择器的顺序——key selector(关键字查询)          

  就是从右向左解析选择器,这样效率就更高了。

 

五、一起做题木吧!                        

A. img.thumb:after,总纬度是0,0,1,2

B.[data-job="frontend"]::first-letter,总纬度是0,0,1,1

C. #main::before,总纬度是0,1,0,1

D. [type="checkbox"]:checked,总纬度是0,0,2,0

E. ul#shop-list,总纬度是0,1,0,1

由于该题目假定样式来源一致,因此样式优先级相同的就是C和E了。

 

六、参考                                

  CSS选择器 http://www.cnblogs.com/liontone/archive/2010/12/29/1920437.html

  http://www.w3school.com.cn/cssref/css_selectors.asp

  http://blog.163.com/hongshaoguoguo@126/blog/static/1804698120134491240171/

  http://blog.csdn.net/stationxp/article/details/38736261

 

七、 总结                              

  选择器是连接标签和样式规则的桥梁,熟悉它们和浏览器支持情况并作适当的填坑,将方便我们开发。

版权声明:本文内容由阿里云实名注册用户自发贡献,版权归原作者所有,阿里云开发者社区不拥有其著作权,亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容,填写侵权投诉表单进行举报,一经查实,本社区将立刻删除涉嫌侵权内容。

相关文章
CSS选择器优先级(特异性)
CSS选择器优先级(特异性)
13 0
面试官:请说下CSS选择器优先级
面试官:请说下CSS选择器优先级
82 0
真正理解"CSS选择器的优先级"
![img_0236](https://user-images.githubusercontent.com/4645261/37966669-cd227ab0-31fb-11e8-8212-415a54ece5d1.JPG) > 题图、摄影:锦此 当我们在讨论CSS选择器优先级的时候,我们再讨论什么? 其实很多人都对此有点模糊,那我换个方式问: **一个CSS属性的最终值是怎么来
13140 0
CSS选择器优先级排列
原文:CSS选择器优先级排列 CSS选择器的效率从高到低做了一个排序: 1.id选择器(#myid) 2.类选择器(.myclassname) 3.标签选择器(div,h1,p) 4.相邻选择器(h1+p) 5.
744 0
第17天:CSS引入、选择器优先级(中级)
一、CSS 位置   1、行内式  css      aa   2、 内嵌式样式       .one {        width: 200px;    }   3、外链式   二、Font 字体综合写 Font: 字体加粗  字号/行高 字体;   必须有字号和字体。
692 0
***CSS魔法堂:选择器及其优先级
一、前言                                首先看看一道阿里这期网申的题目吧! 1.找出下面优先级相同的选择器   A. img.thumb:after  B.[data-job="frontend"]::first-letter   C.
709 0
css知多少(6)——选择器的优先级
原文:css知多少(6)——选择器的优先级 1. 引言   上一节《css知多少(5)——选择器》最后提到,选择器类型过多将导致一些问题,是什么问题呢?咱们直接举例子说明。      上图中,css中的两个选择器都是针对的,而且两个设置的颜色不一样,这里的到底听从谁的命令?   上面还是比较简单的,下面在来一个复杂的:      上图中的该显示成什么颜色呢? 2. 特指度   要解决以上问题,我们需要引入一个概念——特指度(specificity)。
888 0
+关注
肥仔john
偏前端的临栈工程师^_^
203
文章
0
问答
文章排行榜
最热
最新
相关电子书
更多
低代码开发师(初级)实战教程
立即下载
阿里巴巴DevOps 最佳实践手册
立即下载
冬季实战营第三期:MySQL数据库进阶实战
立即下载