选择器和权重

Posted 2020-10-14 opacity-m

 

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 最高