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

选择器和权重

时间:2017-11-12 20:13:18      阅读:182      评论:0      收藏:0      [点我收藏+]

标签:ext   语法   样式   奇数   head   内嵌   冲突   input   伪元素   

 

1、通配符

语法:
* {
/*样式*/
}

2、元素选择器

语法:
div {
/*样式*/
}

3、类选择器

语法:

.main {

/*样式*/

}

4、id选择器

#main {

/*样式*/
}

5、属性选择器: input[type=“text”]
{
/*样式*/
}

6、伪类

a:link/visited/hover/active

点击前/点击后/悬停/点击时

li:nth-child(4) /*选中正数第4个*/
li:ntt-last-child(6)/*选中倒数第6个*/
li:last-child /*倒数第一个*/
li:frist-child/*第一个*/
li:nth-child(odd/even)/*奇数/偶数*/
li:nth-child(3n/3n+1)/*每隔三个/第一个再往后每隔三个*/

7、伪元素选择器

strong:before {
content:“内容”;
}
strong:after {
content:"内容";
}

div:frist-line {
/*第一行加样式*/
}
div:frist-letter {

/*第一个字*/
}

8、组合选择器

ul li {

/*样式*/
}

9、并集选择器

P,.box,input[type=“password”]
{
/*样式*/

}

10、后代选择器

ol li {

/*样式*/
}

11、子级选择器

header>nav>ul>li {
/*样式*/

}


声明冲突

行内、内部、外部样式表,统称为作者样式表
层叠:多个相同的css声明用到一个元素上,声明发生冲突才会发生层叠。

优先级—特殊性—源次序

权重/特制度


内嵌 id class 元素
a b c d
元素 1 0 0 0
id 0 1 0 0
class、属性、伪类 0 0 1 0
元素、伪元素 0 0 0 1
通配符 0
!important 最高

选择器和权重

标签:ext   语法   样式   奇数   head   内嵌   冲突   input   伪元素   

原文地址:http://www.cnblogs.com/opacity-m/p/7822610.html

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