关于选择器

CSS常用选择器分为如下几类

1、元素选择器/类选择器（选择某一类元素 如：div p h等标签）

用法   元素名称｛属性:属性值｝

示例如下,设置div元素的宽高

div｛width:200px;height:100px;｝

2、通配符（就是选择所有元素，即对整个文档或文档中所有元素进行选择）

用法   *｛属性:属性值｝

示例如下，设置整个页面的背景颜色为灰色

*｛background：grey｝

说明：通常不建议使用，因为选择的元素太多，影响效率

3、id选择符（给id 添加属性和id名）

用法：#id名称｛属性：属性值｝

示例如下,给id为div2的元素设置背景为pink

<style>
#div2{background:pink;}
</style>
<div id="div2">div2</div>

说明：id选择器具有唯一性，即一个文档中只允许有唯一的一个id名称

4、class选择符（给一个或多个元素添加class属性进行归类）

用法：.class名称｛属性：属性值｝

示例如下，给class名为caption的元素统一设置字体大小以及颜色

<style>
.caption{color:mediumblue;}
</style>

<h3 class="caption">h3</h3>
<h4 class="caption">h4</h4>

5、群组选择符（同时给多个选择符设置同一个样式）

用法：div，.hehe,p,#top{属性：属性值}

示例如下，对id:div2和p统一设置颜色和字体大小

<style>
#div2,p{color:yellow;font-size:30px;}
</style>

<p>pppp</p>
<div id="div2">div2</div>

6、后代选择器（最常用的选择器，用于选择后代元素 中间用空格隔开）

用法：选择符1  选择符2   选择符n{属性:属性值;}

示例如下，对div中的无须列表ul中的内容li设置字体颜色

<style>
    div ul li{color:orange;}
</style>

<div>
    	<ul>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
        </ul>
</div>

7、伪类选择符

a:link {属性:属性值;} 初始化状态

a:visited {属性:属性值;} 被点击后的状态

a:hover{属性:属性值;} 当鼠标滑过时候的状态

a:active {属性:属性值;} 当鼠标按下时候的状态

说明：伪类选择器只能给特殊的带有href属性的a标签使用并且只有在特殊的条件下才会有效果

扩展尝试 选择符叠加

8、多个选择符可以叠加使用 例：一个div有id还有class

div#id.class{属性:属性值;}