CSS中9种选择器及权重

CSS选择器：只能从高往低找，兄弟间也是只能哥哥找弟弟，不能反过来

目录

CSS选择器种类

1.（元素）标签选择器

2.（类）class选择器

3.id选择器

4.后代选择器

5.子代选择器

6.交集选择器

7.全局选择器

8.伪类选择器

9.兄弟选择器

CSS选择器优先级（权重）

---

CSS选择器种类

1.（元素）标签选择器

 div{color:red;}

2.（类）class选择器

 .name{color:red;}

3.id选择器

 #name{color:red;}

4.后代选择器

　标签嵌套多层关系（包含一层）(影响全部后代)

 a p{
     color:red;
 }
 ​
 <a>
     <p>子代
         <p> 后代 </p>
     </p>
 </a>

5.子代选择器

　标签嵌套只有一层关系(只影响子代)

 a>p{
     color:red;
 }
 ​
 <a>
     <p>子代</p>
 </a>

6.交集选择器

如果加标签种类的话要写前面，不能把标签写在后面 如 .ap p

 #k.aa{
     color:red;
 }
 ​
 <p id="k" class="aa">急急急</p>

7.全局选择器

又叫 通配符选择器

 //语法格式为：
 *{
     propery:value
 }
 //其中“*”表示对所有元素起作用

8.伪类选择器

伪类选择器主要应用在<a>标签上

 a:link {color:#FF0000;} /* 未访问的链接 */
 a:visited {color:#00FF00;} /* 已访问的链接 */
 a:hover {color:#FF00FF;} /* 鼠标划过链接 */
 a:active {color:#0000FF;} /* 已选中的链接 */

9.兄弟选择器

1、相邻兄弟选择器（必须是兄弟且严格相邻）

（1）格式：当前+兄弟

（2）例子

p + span{color: greenyellow;}

2、全部兄弟选择器

（1）格式：当前~兄弟

（2）例子（第一个是选择p的span标签兄弟，而第二个是所有兄弟）

p ~ span{
    color: black;
}
p ~ *{
    color: white;
}

CSS选择器优先级（权重）

• 内联样式表的权重值最高(style=" ")，值为1000。‘

  • id选择器的权重值为100。

  • class选择器的权值为10。

  • 类型（元素、标签）选择器的优先级为1。

  • 通配符选择器（*）的优先级为0。

  (1)  作用范围越大的选择器，它的权重越低

（2）当权值相等时，后定义的样式表要优于先定义的样式表。

（3）在同一组属性设置中表有“!important"规则的优先级最大。

!important > 行内样式>ID选择器 > 类选择器 > 标签 > 通配符 > 继承 > 浏览器默认属性