CSS3选择器详解

在CSS3中选择器较多，以下列出在使用中会用到的选择器。

1.元素选择器

元素选择器是最常见的选择器，文档的元素就是最基本的选择器。

例如：h1{ },h2{ },a{ },p{ }...

在p标签中添加内容HelloWorld!，使用link引入.css文件

在css文件中为p标签添加样式，即为元素选择器的使用。

2.选择器分组

例如：h1,h2{ }，通配符*{ }...

在css文件中为h1,h2标签添加样式，

在body中添加<p>标签不指定任何样式，使用通配符*使字体颜色为红色，则所有字体颜色均为红色。

3.类选择器

（1）类选择器允许以一种独立与文档元素的方式来指定样式。

例如：.class{ }

使用div标签，如

<div class="div"> Hello World!</div>

在css文件中对其添加样式，通过点（.）引入

（2）结合元素选择器使用

例如：a.class{}

<div class="div"> Hello World!</div>

<a class=""div>Hello World</a>

在css文件中只指定a标签的的div更改颜色

此时只有a标签中的颜色变为蓝色。

（3）多类选择器

例如：.class.class{}

效果如下

既包含颜色，也有大小，也包括自己的斜体。

4.ID选择器

例如：#id{ }

ID选择器类似于类选择器，但也有一些区别：

ID选择器在文档中只能使用一次，类选择器可以多次使用，

ID选择器不能结合使用，类选择器可以，

当使用js时，需要用到ID，JS中的 方法getElementById需要。

5.属性选择器

（1）例如：[属性名称]{}

（2）根据属性值选择

例如：a[href="http://www......."]{};

（3）根据部分属性值选择

效果如下：

放大的只有1,3而2,4没有，因为1,3具备了完整的title属性字眼。

6.后代选择器

后代选择器可以选择作为某元素后代的元素。

效果如下：只有被strong包住的web改变了颜色

7.子元素选择器

与后代选择器相比，子元素选择器只能选择作为某元素子元素的元素，即只能选择一个层级关系的，不可以隔代。

例如：h1>strong{}

效果如下：

再添加一层i标签

效果如下：

hello的字体和颜色都没有改变

但是使用这样的方式，先找到strong 再找到i

效果如下：

但是使用上一种方法，直接通过p找到i，可实现效果

可见。后代选择器可选择任意后代，

但是子选择器只能选择同一层，想要找到下一层，需借助上一层。

8.相邻兄弟选择器

可选择紧接在另一个元素后的元素，且二者有相同的父元素。

例如：h1+p{}（h1和p有相同父类）

效果如下：

使用的较少，了解即可。