CSS中的多种选择器和它们的优先级

CSS的基本选择器（三种）

id或者class值不能用纯数字表示 可以有 “字母数字-_“

1.元素选择器h1{.......}

2.ID选择器#id1{......} <a id="id1"...... />

只能作用于一个标签 因为一个页面中的id不能重复

3.类选择器.class1{......} <a class="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个选择都指向一个标签 则取他们所有的修饰，相同属性的取优先级最高的值