一.关于选择器的种类
选择器分为三种,分别是标签选择器、类选择器、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;}