码迷,mamicode.com
首页 > Web开发 > 详细

CSS中几种选择器和他们的优先级

时间:2017-06-27 00:01:22      阅读:268      评论:0      收藏:0      [点我收藏+]

标签:nbsp   分割   之间   bsp   计算   交集   其他   数值   空格   

CSS的基本选择器(三种)
id或者class值不能用纯数字表示 可以有 “字母数字-_“
 
1.元素选择器                                         h1{.......}
2.ID选择器      只能作用于一个标签 因为一个页面中的id不能重复       #id1{......} 
 
3.类选择器    可以作用于多个标签                                .class1{......}
 
 
 
 
 
CSS的其他选择器
在不更改内容的情况下(不添加id或class来使用基本选择器)使用其他选择器
后代选择器去掉空格就是交集选择器,4 5中选择器不是必须元素选择器开头
1.通用选择器 *{ margin: 0; padding: 0;} 作用于全部元素
2.交集选择器 #id1.class2{} 选择器1选择器2选择器3........
选择器紧挨着没有间隙 必须同时满足这些选择器的元素才可以被修饰
3.并集选择器 #id1,.class2{} 选择器1,选择器2,选择器3
选择器之间用逗号隔开 满足其中一个选择器就可以被修饰
4.后代选择器 div ul .id1{} .class1 #id1 .class2{}
选择器之前用空格分割 后一个选择器是前一个选择器的后代(包括隔代)才被修饰
5.子代选择器 div>.id1 .class1>#id1{}
后一个选择器是前一个选择器的直接后代才被修饰
6.属性选择器
<input type="password"/> input[type=‘password’]{......}
 
 
 
优先级
第一原则: 近者优先,作用于最里层的选择器,生效
 
同一个标签时: id选择器>类选择器>标签选择器>通用选择器
<div class="class1" id="id1" style="style1"></div>
  1. 标签选择器 占权重1
  2. 类选择器 占权重10
  3. id选择器 占权重100
  4. 行级样式表 占权重1000
  • 当交集后代子代选择器都指向一个标签时 通过权重相加 去高数值的 如果数值相同 则取后一个
  • 并集选择器将代码分开 不能通过权重相加计算
如果4个选择都指向一个标签 则取他们所有的修饰,相同属性的取优先级最高的值

CSS中几种选择器和他们的优先级

标签:nbsp   分割   之间   bsp   计算   交集   其他   数值   空格   

原文地址:http://www.cnblogs.com/wangwenjian/p/7082687.html

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