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

一、css选择器的分类

1、派生选择器

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

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

2、id选择器

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

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

格式：

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

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

将
class 指定为一个适当的值


格式：

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

4、属性选择器

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


①属性选择器

[title]

{
color:red;
}[/code]
②属性和值选择器

[title=W3School]

{
border:5px solid blue;
}[/code]
③设置表单的样式

属性选择器在为不带有 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；浏览器自然会显示红色的字。理解了这个道理之后下面的优先级计算自是易如反掌：
div.test1 .span var 优先级 1+10 +10 +1  
span#xxx .songs li 优先级1+100 + 10 + 1  
#xxx li 优先级 100 +1