CSS选择器（一）

一、CSS常用选择器

1.元素选择器。作用：根据标签名选中指定的元素。

语法：标签名{}

例子：p{} h1{ } div{}

2.id选择器：作用：根据元素属性值选择一个元素

语法：#id属性值{}

例子：#box{} #red{}

3.类选择器：作用：根据元素的class属性值选中一组元素

语法：.class属性值

例子：.blue{ } .abc{}

可以同时为一个元素指定多个class属性

<p class="blue abc"></p>

4.通配选择器：作用：选中页面中所有的元素。

语法：*{}

*{color:red}

二、CSS复合选择器

现在需要将red类的字体改为红色，div标签的内容字体改为30px.这时，我们就要同时满足两个条件，那么就需要复合选择器。

1.交集选择器：作用：选择同时符合多个条件的元素

语法：选择器1选择器2选择器3选择器n

注意点：交集选择器中如果有元素选择器，元素选择器必须在开头

也可以类选择器1类选择器2类选择器3。但是必须要元素同时满足三个选择器。

如：.a.b.c{} <p class="a b c">内容</p>

<style>
.red{
       color:red;
      }
div.red{
          font-size:30px;
        }
</style>
<p class="red">内容</p>
<div class="red"> 内容</div>

2.1.并集选择器（选择器分组）

作用：同时选择多个选择器

语法：选择器1，选择器2，选择器3，选择器n{}

注意：相当于同时选中以上的选择器，相当于所有选择器名称的并集。

#b1,p1,h1,span,div.red{}