css里面的选择器

css的重要性

如果把HTML比作一个好看的小姐姐，那么css就是小姐姐的化妆品，一个女孩在化妆的时候化妆品非常之多，那么每一个化妆品应该怎么用在哪里，这就如同css里面的选择器了。再好看的口红如果涂在了眉毛上自然也会很不协调。因此我们学好了选择器，才能准确的对页面的样式修改。同样选择器在css里面也占了很重要的地位。对于一些英语水平比较好的同学，学完了选择器以后css其他的类容基本上就可以一遍过了。

通用选择器 * { }

通用选择器是选中整个HTML页面，就如同小姐姐的面膜一样，整个面部都会被他覆盖。因此可以理解成*{}是全局选择，但是由于他能选择的范围十分广，他的权重也就相对低下。因此这个选择器并不适用于某一项的样式修改。

1
2
3
4
5
6

* {
    margin: 0;
    padding: 0;
    list-style: none;
}

id选择器 #xiaojiejie { }

这里是对id为xiaojiejie的部分选择，而且一个页面中id是具有唯一性的，这就好比是小姐姐的口红只能涂在嘴上面一样。id选择器权重较高。而且由于id的唯一性，可以用于整个页面的某一样样式的修改。同时可以覆盖掉*{}对他的影响。

1
2
3
4

#xiaojiejie {
 height:150px;
 color:pink;
}

类选择器 .xiaojiejie { }

类名在css里面是用class表示的，他的具体作用和id很相似，但是class并不具有唯一性，这也是可以使他能对某一类具有相同特征的元素同时修改他们的样式。
html <img src="https://api.mz-moe.cn/img.php" class="xiaojiejie" id="xioajiejie">

一个标签可以同时拥有id和class的值，就好比口红和唇釉一样都可以涂在嘴上。

1
2
3
4

.xiaojiejie {
 height:150px;
 color:pink;
}

元素选择器 M { }

对html页面中的某一类元素定义样式，如果对p标签定义了一个样式那么全部的p标签都会呈现这个样式，如果还是不明白，可以理解成小姐姐的眼线，如果一个女生画了眼线总是会把左眼和右眼都画上。也就是这一类元素全部被选中。
比方说html页面中的p标签全部默认为是黑色的字体，如果我们不喜欢黑色想换一个颜色就不必要把每一个p标签都定义一个id然后一个一个的去修改，可以直接选中所有的p标签

1
2
3

p  {
    color : pink;
}

后代选择器 X Y { }

这里给大家看一张图吧，大家一看也就一目了然了

如果我们想选中strong下面的a标签而不想选中p下面的a，后代选择器就可以在这里大展身手了

1
2
3

strong a {
    color : pink;
}

选择器的优先级

如果用id选择器和class选择器或者更多的选择器选中了某一个元素而且都对他定义了，那么会执行哪一个就取决于他的优先级了。如果不懂的话可以理解成 面膜 精华 乳液 面霜 口红的一个使用顺序。

优先级的规则

选择器的权重值表述为4个部分，用0,0,0,0表示。
通配符*的权重为0,0,0,0
标签选择器、伪元素选择器的权重为0,0,0,1
类选择器、属性选择器、伪类选择器的权重为 0,0,1,0
　　id选择器的权重为0,1,0,0
　　行内样式的权重为1,0,0,0
　　 !imporatant的权重为∞
权重大的选择器覆盖权重小的选择器
　　同样权重的选择器，后面的覆盖前面的
　　层叠选择器按照权重相加的结果，大的覆盖小的
　　!imporatant的权重最大的 只要加上就没得抢了