码迷,mamicode.com
首页 > 其他好文 > 详细

选择器和特殊性

时间:2015-05-22 11:01:07      阅读:131      评论:0      收藏:0      [点我收藏+]

标签:

css选择器:类型选择器(元素选择器),后代选择器,ID和类选择器,伪类,通用选择器,子选择器,相邻同胞选择器,属性选择器。

1  其中类型选择器即元素选择器,如:

p{
  color:black;  
}

h1{
  font-weight:bold;  
}

2  后代选择器选择一个元素的所有后代,子选择器只选择元素的直接后代,例如:

    li{
        list-style:none;
    }
    #nav>li{
        padding-left:20px;
        background:url(folder.png) no-repeat left top;
    }



<ul id="nav">
        <li>Home</li>
        <li>Services
            <ul>
                <li>Design</li>
                <li>Development</li>
                <li>Consyltancy</li>
            </ul>
        </li>
        <li>Contact us</li>
</ul>

技术分享

通过#nav>li 只有他的三个直接后代Home Services Contact被选中。

 

3 相邻同胞选择器

    h2+p{
        color:#777;
        font-weight:bold;
        font-size:1.4em;
    }


<h2>html5</h2>
    <p>万维网的核心语言、标准通用标记语言下的一个应用超文本标记语言(HTML)的第五次重大修改</p>
    <p>2014年10月29日,万维网联盟宣布,经过接近8年的艰苦努力,该标准规范终于制定完成</p>

技术分享

h2相邻的p标签收到了影响。

 

4 属性选择器:可以根据某个属性是否存在或属性值来寻找元素。

 

二 特殊性

选择的特殊性分成四个等级:a b c d。(a的等级最高)

1)如果样式是行内样式,那么a=1.

2)b等于ID选择器的总数

3)c等于类 伪类和属性选择器的数量

4)d等于类型选择器和伪元素选择器的数量

a)用style属性编写的规则总是比其他任何规则特殊(a=1),具有ID选择器的规则比没有ID选择器的规则特殊,具有类选择器的规则比只有类型选择器的规则特殊。最后两个规则的特殊性相同,那么后定义的规则优先。

b)直接应用于元素的任何样式总会覆盖继承而来的样式,这是因为继承而来的样式特殊性为空。

 

选择器和特殊性

标签:

原文地址:http://www.cnblogs.com/mingbao/p/4521044.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!