html 02 css控制之css选择器及其优先级

一、css选择器的分类

1、派生选择器

如何理解“派生”，比如说“中国的广东，你的学生”等这种关系称之为派生，网页类似

li strong {

　　 font-style :  italic ;

　　 font-weight :  normal ;

　　}

通过依据元素在其位置的上下文关系来定义样式

2、id选择器

id 选择器可以为标有特定 id 的 HTML 元素指定特定的样式。一个页面内不能出现相同的ID

id 选择器以 "#" 来定义。

格式：

#id名 { 属性名:属性值; }

3、类选择器（class选择器）

将 class 指定为一个适当的值

格式：

 .class名 { 属性名:属性值; }

4、属性选择器

可以为拥有指定属性的 HTML 元素设置样式，而不仅限于 class 和 id 属性。

①属性选择器

[title]
{
color:red;
}

② 属性和值选择器

[title=W3School]
{
border:5px solid blue;
}

③ 设置表单的样式

属性选择器在为不带有 class 或 id 的表单设置样式时特别有用：

input[type="text"]
{
  width:150px;
  display:block;
  margin-bottom:10px;
  background-color:yellow;
  font-family: Verdana, Arial;
}

input[type="button"]
{
  width:120px;
  margin-left:35px;
  display:block;
  font-family: Verdana, Arial;
}

二、css选择器优先级

一般而言，选择器越特殊，它的优先级越高。也就是选择器指向的越准确，它的优先级就越高。通常我们用1表示标签名选择器的优先级，用10表示类选择 器的优先级，用100标示ID选择器的优先级。比如上例当中 .polaris span {color:red;}的选择器优先级是 10 + 1 也就是11；而 .polaris 的优先级是10；浏览器自然会显示红色的字。理解了这个道理之后下面的优先级计算自是易如反掌：

1. div.test1 .span var 优先级 1+10 +10 +1  
2. span#xxx .songs li 优先级1+100 + 10 + 1  
3. #xxx li 优先级 100 +1