CSS选择器

标签：权重   鼠标   sele   伪元素   作用   存在   color   选择器   通用   

CSS选择器的规则

    (1)selector{

      　　name1: value1;

      　　name2: value2

    　}

    (其中分号表示分隔符, 而不是像编程语言中表示语句结束符)

    (2)CSS选择器有不同的匹配规则

　 例如一个元素既可以通过元素选择器又可以通过类选择器来匹配

     (3)多个选择器可以进行叠加

     例如元素选择器和类选择器进行叠加: p .class_name

CSS选择器的作用

    用于匹配HTML中的元素

CSS选择器的分类

     (1)元素选择器 p{}

    (2)伪元素选择器 ::before{}

    (3)类选择器 .class_name{}

    (4)伪类选择器 :hover{}

    (5)属性选择器 [type=radio]{}

    (6)ID选择器 #id_name{}

    (7)组合选择器 [type=checkbox] + label{}

    (8)否定选择器 :not(.class_name){}

    (9)通用选择器 *{}

　其中有必要说明下伪类选择器和伪元素选择器的区别:

    伪类选择器，鼠标指向一个元素时, 附加一种状态的样式

    伪元素选择器，一种真实存在的元素，页面中可以有内容和样式

选择器权重

　　    ID选择器:                        +100

　　　类 、伪类选择器:             +10

　　   元素、伪元素选择器:        +1

　　   其他选择器:                      +0

　　　(1)谁的权重大，优先选择谁

　　　    #id .class_name1      (权重为110)

　　　    #.calss_name1 .classname2    (权重为20)

　　　    此外需要注意的是权重不进位，如下

　　　    .class_name1 .class_name2 .class_name3 .class_name4 .class_name5 .class_name6 .class_name7 .class_name8 .class_name9 .class_name10

　　　    你是不是会以为上面的组合选择器权重为100？ 嗯嗯,我也是这么想的

　　　    然而它的权重为0100, 其中百位数为0, 十位数为10, 个位数为0

　　　    上面的选择器是小于#id_name1选择器的, 并不是等于哦，因为权重并不进位

　　　(2)!important 优先级最高

　　　(3)元素属性优先级高  (.css文件的优先级, <style></style>和ID选择器都小于元素属性的优先级(<p style="color: red;"),)

　　　(4)权重相同，后写的生效

CSS选择器

标签：权重   鼠标   sele   伪元素   作用   存在   color   选择器   通用   

原文地址：https://www.cnblogs.com/marton/p/9589001.html