浅谈CSS选择器

在html中我们如果要对文档中的一组元素应用某些规则时，使用传统的HTML会很繁琐，如果我们利用CSS中的选择器，会要方便很多。

 

选择器可分为三种

ID选择器 （如#hh）

类选择器（.hh）

标签名选择器（div,h1,p）

 

还有其他的几种选择器是对这三种选择器的扩展应用

如相邻选择器（h1+p）

子选择器（ul>li）

后代选择器（li a）

通配符选择器（*）

属性选择器（a[rel = “external”]）

伪类选择器（a:hover,li:nth-child）

 

选择器的优先级

一般情况下，选择器指向的越准确，它的优先级就会越高。通常，我们用1表示标签名选择器的优先级，用10表示类选择器的优先级，用100表示ID选择器的优先级。

 

我们来看几个例子

div.test  优先级：1+10

span#xx  .sum li 优先级：1+100+10+1

#xxx ul 优先级：100+1

 

提升CSS选择器的性能

1. 避免使用通用选择器
2. 避免使用标签或class选择器限制id选择器
3. 避免使用标签限制class选择器
4. 避免使用多层标签选择器。使用class选择器替换，减少css查找
5. 避免使用子选择器
6. 使用继承

 

必须记住的30类选择器在这里我就不做介绍了。

 

 

关于选择器的一些用法：

一个元素可以有多个规则，一般来讲，要把元素所有共同样式归组在一起，然后再把一个元素特定的样式写在另一个规则中。

如

h1,h2{

   font-family: sans-serif;

   color:     gray;

}

h1{

   border-bottom:1px solid white;

}

 

选择器的继承：

元素可以从它们的父元素继承样式，但不是所有的样式都能继承，只有一部分能继

如果设置所有<p>元素的font-family,就会影响到下面阴影显示的所有元素

覆盖继承：

如果我们不希望元素从其父元素继承样式，我们可以提供一个特定的规则来覆盖继承

如

body{

     font-family:sans-serif;

}

em{

    font-family:serif;

}