CSS选择器

优先级：行内样式>ID选择器>类别选择器>标签选择器

选择器的权重：

CSS中用四位数字表示权重，权重的表达式如：0，0，0，0

标签选择器：0001

类选择器：0010

id选择器：0100

伪类选择器：0010

并集选择器：包含选择符的权重之和

内联样式的权重：1000

权重值越大，优先级越高

1、标签选择器：（元素选择器，标记选择器）

即原生的标记的选择器：

例：

p{

font-size:40px;

color:#f00;

font-weight:bold;/*设置字体加粗*/

}

2、类选择器

用户可以自定义类型选择器的名称

例：

.blue{

font-size:40px;

color:#f00;

font-weight:bold;

}

使用：

<p class="blue">类别选择器</p>

可以同时使用多个类型选择器：

例：

.red{

color:#f00;

}

.big{

font-size:32px;

}

使用：

<p class="blue big">两种样式</p>

3、id选择器：

针对特定属性的属性值进行匹配

注：一个网页文件中只能有一个元素使用某一id的属性值

id选择器不支持多个id复用

例：

#red{

color:#f00;

}

使用：

<p id = "red">id选择器</p>

4、通配选择器（全局选择器）

对页面所有的标签都用同一种样式

*{

color:white;

}

5、群组选择器

为多个选择器设置相同的样式

例：

<style type="text/css">

p, h1{

color:blue;font-size:30px;

}

</style>

在body中使用

<p class="p1">交集选择器标签</p>

<h1 class="p1">类别标签</h1>

6、子代选择器：

只能写两代的关系

例：

<style type="text/css">

tr > td {

color:red;

}

</style>

使用：

<table>

<tr>

<td>aaa</td>

</tr>

</table>

7、交集选择器

例：

在head标签中：

<style type="text/css">

p{

color:red;font-size:10px;

}

p.p1{

color:blue;font-size:30px;

}

.p1{

color:black;font-size:30px;

}

</style>

在body中使用：

<p>普通标签</p>

<p class="p1">交集选择器标签</p>

<h3 class="p1">类别标签</h3>

8、并集选择器

例：

<style type="text/css">

h1,h2,h3{color:green;} /*并集选择器*/

h2.tag,#tag{text-decoration:underline;}  /*并集选择器*/

</style>

使用：

<h1>普通效果</h1>

<h2 class="tag">并集选择器</h2>

<h3>普通效果</h3>

<h4 id="tag">并集选择器</h4>

9、后代选择器

可以跨越代的限制，如最外层包含最内层即可

例：

<style type="text/css">

p span{

color:red;

}

span{

color:blue;

}

</style>

使用：

<p>嵌套使用<span>css</span>标签的方法</p>

<span>之外的不起作用</span>

10、属性选择器

针对拥有某个属性的标签设置样式：

设置样式：

<style type="text/css">

[title]{

border:1px solid red;

}

</style>

使用：

<img src="" title="图片" alt="图片">

<p>aaa</p>

同时限制多个属性：

例：

样式：

<style type="text/css">

img[title][id]{

border:1px solid red;

}

</style>

使用：

<img src="" title="图片1" alt="图片1">

<img src="" title="图片2" alt="图片2" id="">

<p>aaa</p>

注：也可以直接添加属性的值，如img[title="aa"][id="tupian"]{}

11、相邻兄弟选择器：

相邻的同级标签才能使用

例：

样式：

<style type="text/css">

td + td{

color:blue;

}

</style>

使用：

<table>

<tr>

<td>项目1</td>

<td>项目2</td>

</tr>

<tr>

<td>项目3</td>

<td>项目4</td>

</tr>

</table>

效果：

表格还有更多项的效果；

也可以设置的更加具体：

例：

样式：

<style type="text/css">

.t1 + .t2{

color:red;

}

</style>

使用：

<table>

<tr>

<td class="t1">项目1</td>

<td class="t2">项目2</td>

</tr>

<tr>

<td>项目3</td>

<td>项目4</td>

</tr>

</table>

12：伪类选择器；

同时制定多个选择器的时候，如果属性出现重叠，后一个属性优先应用