CSS中的常用选择器（1）

CSS中最基本的就是选择器了，那么常用的都有那些呢我们依次看看。

1.元素选择器

    h1{
        color: red ;
    }

作用：选中对应元素/标签的内容

语法：标签名+{}

2.id选择器

    #p1{
        color: green;
    }

作用：选中对应的id属性值的元素

语法：#+id属性值+{}

3.class选择器

   .pp{
       font-size: 50px;
    }

作用：选中对应class属性值的元素

语法：.+class属性值+{}

这个id选择器跟class选择器很像，但class选择器可以复用，而id一般是独一无二的。

4.通配选择器

*{
        font-size: 24px;
    }

作用：选中页面中所有元素

语法：*+{}

5.交集选择器

div.a {
            font-size: 25px;
        }

作用：同时选中符合多个选择器条件的元素

语法：选择器1选择器2···+{}

例如：div.a{}  div#a{}···

注意：如果选中的选择器有元素选择器，元素选择器必须第一位

6.并集选择器

p,div {
            color: red;
        }

作用：同时选中对应选择器的元素

语法：选择器1,选择器2,···+{}

例如：h1,h2 p,div···

7.子元素选择器

div>p,div>div{
            color: red;
        }

作用：通过指定的父元素找到指定的子元素

语法：父元素 + > + {}

8.后代选择器

div span{
            font-size: 30px;
        }

作用：通过指定的父元素找到指定的后代元素

语法：祖先元素 + （空格）+ {}

9.下一个兄弟选择器（仅挨着的）

div+p{
            background-color: green;
        }

作用：选择与“我”相邻的同级元素

语法：兄+弟{}

10.所有兄弟选择器

div~p{
            color: blue;
        }

作用：选择“我”以及所有同级元素

语法：兄~弟{}