一.关于选择器的种类
选择器分为三种，分别是标签选择器、类选择器、ID选择器；在这三种选择器的基础上又衍生出了其他的选择器，比如：后代选择器等等...
二.选择器的写法
1.标签选择器：直接以标签开头，例如：span{ } div{ }。
2.类选择器：以“ . ”开头，例如：<div class="nav"><div>,这时候通过类选择器添加样式需要 .nav{ }。
3.id选择器：以“ # ”开头，例如<div id="nav"><div>,这时候就要 #nav{ }这样写，注意：id是独一无二的。
以上是使用最广泛的选择器了。还有一些衍生的选择器比如 .div span #center1{ }这样的后代选择器；div，span{ }这种群组选择器。
三.关于选择器的优先级
看一下这个例子：
<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title></title> </head> <style> .font span{ color:red; } .hello{ color: yellow; } </style> <body> <div class="font"> <span class="hello">hello</span> <span>world</span> </div> </body> </html>
很明显，hello和world的颜色都会是红色，这是为什么呢？这就涉及到一个选择器的优先级问题。一般来说，选择器越精准，优先级越高。像标签选择器，选择是同种标签的元素，很不精准，可以给标签选择器定义为1，类选择器比标签选择器稍微精确一些，给他定义为10，而ID选择器，由于ID的独一无二特性，ID选择器选出来的元素是独一无二的，是非常精确的，给它定义为100。这样，.font span 为10+1=11，而.hello为10。11>10,所以hello并不会出现黄色。
当选择器属性发生冲突的时候，依照高等级选择器为准。
<table border="1px solid red;" width="500px">
当然还有一种内部样式表，像上图这样的写在标签内部里的行内样式表，这样的优先级是最高的，可以给它定义为1000，这种样式不推荐使用，因为这违背了标签、样式、js三者分离的原则。
四.如何书写高效的css？
1.尽量少使用层级关系
例如：div ul .red{color：red}，应该写为：.red{color：red；}
2.使用class代替层级关系：div ul li{display：block}，因改写为.block{display：block；}
扫一扫
1275
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
