选择器的优先级

• 优先级：
• 1、最高优先级是 (直接在标签中的设置样式，假设级别为1000)<div style="color:Red;"></div>
• 2、次优先级是（ID选择器 ,假设级别为100） #myDiv{color:Red;}
• 3、其次优先级是（类选择器，假设级别为10） .divClass{color:Red;}
• 4、最后优先级是 （标签选择器，假设级别是 1） div{color:Red;}
• 5、那么后代选择器的优先级就可以计算了啊 比如 .divClass span{ color:Red;} 优先级别就是：10+1=11
• 6、描述得越详细 优先级就越高：(ul.list{width:11px;}描述在ul下的class名字为list的宽度为11px;，他的优先级大于直接写.list的写法：(.list{width:5px;})。)
• 7、其次是外联样式: 在网页头部插入<link rel="stylesheet" href="样式的地址">

类选择器：

在 CSS 中，类选择器以一个点号显示.center {text-align: center}.str{color:red;font-size:12px;}h1 和 p 元素都有 center 类。这意味着两者都将遵守 ".center" 选择器中的规则<h1 class="center">文章的标题</h1><p class="center">这是段落的标签</p>

一、class里的值是可以重复的
二、以"."开头的css样式称之为 类样式
    1、见名如意:就是名字不能乱取，显的不专业
    2、不能以数字开头

    3、可以使用-或者_命名

id选择器

            

id 选择器可以为标有特定 id 的 HTML 元素指定特定的样式id 选择器以 "#" 来定义例： 两个 id 选择器<p id="red">这个段落是红色。</p><p id="green">这个段落是绿色。</p>注意： id 属性只能在每个 HTML 文档中出现一次。前端用的不多：复用性不高，如果当前html文档有不重复出现的模块可以使用id 选择器和派生选择器在现代布局中，id 选择器常常用于建立派生选择器

标签选择器：一个完整的HTML页面是有很多不同的标签组成，而标签选择器，则是决定哪些标签采用相应的CSS样式，(在大环境中你可能处于不同的位置，但是不管怎么样，你总是穿着同一套衣服，这件衣服就是由标签选择器事先给你限定好的，不管走到哪里都是这身衣服)比如，在style.css文件中对p标签样式的声明如下：

p{color:red;font-size:14px;}

后代选择器：

后代选择器也称为包含选择器，用来选择特定元素或元素组的后代，讲对父元素的选择放在前面，对子元素的选择后面，中间加个空格分开。后代选择器中的元素不仅仅只能有两个，对于多层祖先后代关系，可以有多个空格加以分开，入ID为a、b、c的三个元素，则后代选择器可以写成#a #b #c的三个元素，则后代选择器可以写成#a#b#c{}的形式，只要对祖先元素的选择在后代元素之前、中间以空格分开即可。

语法：.father .child{color:#0000CC;}
<p class="father">黑色<label class="child">蓝色<b>也是蓝色</b></label></p>

这里我们定义了所有class属性为father的元素下面的class属性为child的颜色为蓝色。后代选择器是一种很有用的选择器，使用后代选择器可以更加精确的定位元素。

子选择器（child selector）仅是指它的直接后代，或者你可以理解为作用于子元素的第一个后代。而后代选择器是作用于所有子后代元素。后代选择器通过空格来进行选择，而子选择器是通过“>”进行选择，我们看下面的代码：

CSS：#links a {color:red;}#links > a {color:blue;}HTML：<p id="links"><a href="#">Div+CSS教程</a>><span><a href="#">CSS布局实例</a></span><span><a href="#">CSS2.0教程</a></span></p>

dfa 我们将会看到第一个链接元素“Div+CSS教程”会显示成蓝色，而其它两个元素会显示成红色。当然，或许你的浏览器并不支持这样的CSS选择符。我们在一开始也强调了不太兼容的现状，

子选择器（>）和后代选择器（空格）的区别：都表示“祖先-后代”的关系，但是>必须是“爸爸>儿子”，而空格不仅可以是“爸爸儿子”，还能是“爷爷儿”、“太爷爷儿子”。

只选择器必须非常精确的定位，例如css：#links > p > b > a 中说明分为了4层，那么必须一层层的排下去，中间不能少。

伪类选择器

有时候还会需要用文档以外的其他条件来应用元素的样式，比如鼠标悬停等。这时候我们就需要用到伪类了。以下是链接应用的伪类定义。

a:link{color:#999;}

a:visited{color:#FF0;}

a:hover{color:#f60;}

/* IE不支持，用Firefox浏览可以看到效果 */
input:focus{background:#E0F1F5;}

Link表示链接在没有被点击时的样式。Visited表示链接已经被访问时的样式。Hover表示当鼠标悬停在链接上面时的样式。

伪类不仅可以应用在链接标签中，也可以应用在一些表单元素中，但表单元素的应用IE不支持，所以一般伪类都只会被应用在链接的样式上。

伪类选择器

有时候还会需要用文档以外的其他条件来应用元素的样式，比如鼠标悬停等。这时候我们就需要用到伪类了。以下是链接应用的伪类定义。

a:link{color:#999;}

a:visited{color:#FF0;}

a:hover{color:#f60;}

/* IE不支持，用Firefox浏览可以看到效果 */
input:focus{background:#E0F1F5;}

Link表示链接在没有被点击时的样式。Visited表示链接已经被访问时的样式。Hover表示当鼠标悬停在链接上面时的样式。

伪类不仅可以应用在链接标签中，也可以应用在一些表单元素中，但表单元素的应用IE不支持，所以一般伪类都只会被应用在链接的样式上。

通用选择器

通用选择器用*来表示。例如：*{margin:0;padding:0;color:red}

表示所有的元素外边距内边距都是为0px;颜色都是红色；同时通用选择器还可以和后代选择器组合。

例如：

p*{......}

表示所有p元素后代的所有元素都应用这个样式。但是与后代选择器的搭配容易出现浏览器不能解析的情况，比如像这样子：

<p>所有的文本都被定义成红色<b>所有这个段落里面的子标签都不会被定义成蓝色</b><p>所有这个段落里面的子标签都不会被定义成蓝色</p><b>所有这个段落里面的子标签都不会被定义成蓝色</b><em>所有这个段落里面的子标签都不会被定义成蓝色</em></p><sapn>所有的文本都不被上面定义成红色<b>所有这个段落里面的子标签都不会被定义成蓝色</b><p>所有这个段落里面的子标签都不会被定义成蓝色</p><b>所有这个段落里面的子标签都不会被定义成蓝色</b><em>所有这个段落里面的子标签都不会被定义成蓝色</em></span>

这个例子里面p标签里面嵌套了一个p标签，这个时候样式可能会出现与预期结果不相同的结果。

属性选择器：属性选择器，是根据元素的属性来匹配的，其属性可以是标准属性也可以是自定义属性；!ie6，0 0 1 0 当然，也可以同时匹配多个属性；
　　[attr]
　　[title] {margin-left: 10px}
　　//选择具有 title 属性的所有元素；
　　[attr=val]
　　[title = 'this'] {margin-right: 10px}
　　//选择属性 title 的值等于 this 的所有元素
　　[attr^=val]
　　[title ^= 'this'] {margin-left: 15px}
　　//选择属性title的值以this开头的所有元素
　　[attr$=val]
　　[title $= 'this'] {margin-right: 15px}
　　//选择属性title的值以this结尾的所有元素
　　[attr*=val]
　　[title *= 'this'] {margin: 10px}
　　//选择属性title 的值包含 this 的所有元素
　　[attr~=val]
　　[title ~= 'this'] {margin-top: 10px}
　　//选择属性 title 的值包含一个以空格分隔的词为 this 的所有元素，即 title 的值里必须要有 this 这个单词并且 this要与其他单词之间有空格分隔
　　[attr|=val]
　　[title |= 'this'] {margin-bottom: 10px}
　　//选择属性 title 的值等于this，或值以 this- 开头的所有元素

属性选择器，是根据元素的属性来匹配的，其属性可以是标准属性也可以是自定义属性；!ie6，0 0 1 0 当然，也可以同时匹配多个属性；
　　[attr]
　　[title] {margin-left: 10px}
　　//选择具有 title 属性的所有元素；
　　[attr=val]
　　[title = 'this'] {margin-right: 10px}
　　//选择属性 title 的值等于 this 的所有元素
　　[attr^=val]
　　[title ^= 'this'] {margin-left: 15px}
　　//选择属性title的值以this开头的所有元素
　　[attr$=val]
　　[title $= 'this'] {margin-right: 15px}
　　//选择属性title的值以this结尾的所有元素
　　[attr*=val]
　　[title *= 'this'] {margin: 10px}
　　//选择属性title 的值包含 this 的所有元素
　　[attr~=val]
　　[title ~= 'this'] {margin-top: 10px}
　　//选择属性 title 的值包含一个以空格分隔的词为 this 的所有元素，即 title 的值里必须要有 this 这个单词并且 this要与其他单词之间有空格分隔
　　[attr|=val]
　　[title |= 'this'] {margin-bottom: 10px}
　　//选择属性 title 的值等于this，或值以 this- 开头的所有元素