2、CSS常用选择器

本章笔记主要包括：css介绍、选择器的语法和使用方式

重要系数： ☆☆☆☆

1、CSS介绍

CSS负责控制页面的布局，美化页面。

2、标签选择器

语法：

标签名{
    属性：值;
    属性：值;
}

示例：

<!-- head标签中书写样式 -->
<style type="text/css">
    /*p标签增加样式*/
    p{
        /*设置字体颜色为红色,并加粗文字*/
        color: red;
        font-weight: bold;
    }
</style>

<!-- body标签中书写 -->
<p>
    测试css样式
</p>
<p>
测试css样式2
</p>
<h1>测试css样式3</h1>

上述例子，标签选择器会选择当前页面的所有P标签，并为之增加样式。

注:
- css中的注释为/**/
- 选择器语法需要写在容器中

3、id选择器

如果我们使用标签选择器，那么当前页所有相关标签都将被统一改变，不能个性化。id选择器可以针对一个标签进行个性化设置。

语法：

#id值{
    属性：值;
    属性：值;
}

示例：

/*给id=p1的标签设置字号和背景色*/
#p1{
    font-size: 20px;
    background-color: red;
}
<!-- HTML -->
<h3 id="p1">测试id选择器p1</h3>
<h3 id="p2">测试id选择器p2</h3>
<h3 id="p3">测试id选择器p3</h3>

上述示例，只会改变id=p1的h3标签样式。

注：
- id的value在一个页面中只能唯一，即代码中“p1”如果赋值给一个h3标签，那么其他标签的id不允许使用‘p1’这个值
- id的命名以数字开头可以有‘_’和数字，严格区分大小写

4、类(class)选择器

id选择器在一定程度上具有局限性，因为id的值在一个页面是唯一的。如果我们想给部分标签加相同的样式，此时我们可以使用类选择器。

语法：

.class值{
    属性：值;
    属性：值;
}

示例：

/*给class=color的标签设置颜色为红色*/
.color{
    color: red;
}
/*给class=size的标签设置字体为50px*/
.size{
    font-size: 50px;
}

<!-- HTML -->
<h3 class="color">测试class选择器color</h3>
<h3 class="color">测试class选择器color</h3>
<p class="color size">
    测试class选择器color
</p>

注:
- class的value允许相同，且一个class可以有多个值，值之间用空格隔开
- 类的选择器就是为了样式能够复用

5、后代选择器

语法：

选择器 选择器 ... 选择器{
    属性：值;
    属性：值;
}

示例：

/*给h5标题变成红色、加下划线*/
/*解析：若h5有个div标签的祖先元素，则h5变成红色*/
div h5{
    color: red;
}
/*解析：若h5有个class=div2的祖先元素，且这个祖先元素上存在div祖先元素，则h追加下划线*/
div .div2 h5{
    text-decoration: underline;
}

<!-- html -->
<div>
    <div class="div2">
        <ul>
            <li>
                <h5>测试后代选择器</h5>
            </li>
        </ul>
    </div>
</div>

css中有列举了两种选择h5标签的方式，只要这种选择器满足HTML中标签嵌套规律即可。

注：
- 后代选择器表示的是，定位当前元素下的所有满足条件的后代元素。
- 选择器之间使用空格隔开。

6、交集选择器

语法：

选择器1选择器2...选择器3{
    属性:值;
    属性:值;
}

示例：

/*给p标签，且p标签的class=select设置字体颜色为绿色*/
p.select{
    color: green;
}

<!-- html  交集 -->
<p class="select">测试交集选择器</p>
<p class="select">测试交集选择器</p>
<p>测试交集选择器</p>

注： 交集选择器之间是连续的，之间没有空格，必选满足所有条件才能选中

7、并集选择器

语法：

选择器,选择器,...选择器{
    属性：值;
    属性：值;
}

示例：

/*设置class=pp 和 class=hh的标签，背景色为黄色*/
.pp,.hh{
    background-color: yellow;
}

<!-- html 并集 -->
<p class="pp">测试并集选择器</p>
<h6 class="hh">测试并集选择器</h6>

并集选择器表示把指定的标签设置相同样式

8、通配符选择器

语法：

*{
    属性：值;
    属性：值;
}

示例：

/*所有字体都不加粗*/
*{
    font-weight: normal;
}

通配符选择器表示，表示把当前页所有元素设置成统一样式

总结

• 标签选择器可以设置标签所具有的共性，例如统一p标签的字体大小
• 同一个页面中标签的id是唯一的
• 尽量使用类选择器替代id选择器，将id交由js使用
• 后代选择器，只要html中满足选择器的规则，即可选中。选择器使用空格隔开
• 交集选择器，通常以标签名开头
• 并集选择器，表示标签之间是“和”关系，使用“,”隔开
• 通配符选择器，设置当前页所有标签，不推荐使用。如果页面元素过多效率会很低
• 代码中出现的标点符号均为半角英文。