css选择器

要使用css对HTML页面中的元素实现一对一，一对多或者多对一的控制，这就需要用到CSS选择器。HTML页面中的元素就是通过CSS选择器进行控制的。每一条css样式定义由两部分组成，形式如下： [code] 选择器{样式} [/code] 在{}之前的部分就是“选择器”。 “选择器”指明了{}中的“样式”的作用对象，也就是“样式”作用于网页中的哪些元素

> <h1 class="tiltle">CSS选择器</h1>
> </article>
> <style>
>     .title{color:red;}
>     article h1{color:blue;}
> </style>

而当它拥有多个选择器时，我们该根据哪个选择器对HTML页面中的元素进行控制呢？
答案是根据他的特异度决定,#代表id，·代表（伪）类，E代表标签。例如：.title的特异度是1 article h1的特异度是0 所以根据选择器.title对元素进行控制。

选择器有哪些？

类选择器

ID 选择器可以为标有特定类名的 HTML 元素指定特定的样式。例如：<h1 class="tiltle">CSS选择器</h1>。则类选择器根据类名来选择前面以”.”来标志，如：.title{color:red;}

标签选择器

一个HTML页面是有很多不同的标签组成，而标签选择器，则是决定哪些标签采用相应的CSS样式。例如：<article> <h1 class="tiltle">CSS选择器</h1> </article> 标签选择器根据标签来标志，如：article h1{color:blue;}

ID 选择器

ID 选择器可以为标有特定ID的 HTML 元素指定特定的样式。例如：<h1 id="tiltle">CSS选择器</h1> ID选择器根据ID来选择前面以”#”来标志，如：.title{color:red;}

各自的优点？

元素选择器的优点在于代码简洁清晰，不需要添加class或id等属性，但是选择精度略低。
类选择器在HTML中添加class属性，可以准确地选择需要添加样式的元素，而且一个元素可以有多个class。
ID选择器的选择精确，但是ID不能重复，所以只能选择单个元素。

css选择器 | 青训营