css的各种选择器

1、标签选择器，或者叫元素选择器

特点：直接使用标签名

 p {
            color: #f00;
        }

2、id选择器

特点：具有唯一性，id标识符在同一个文档里面只能出现一次，不能重复出现。

命名风格：a-z A-Z 0-9 _ -

                不能以数字开头，建议字母开头

​​​​​​​                如果有的时候我们命名的字符长度比较多，建议使用中线分割

语法：

 #id标识符 {

             css 属性1： 属性值1;

             css 属性2： 属性值2;

          }                                    

<div id="box">
    Lorem ipsum dolor sit amet.
</div>

#box {
            color: yellow;
            font-size: 30px;
            height: 100px;
            line-height: 100px;
            text-align: center;
            background-color: #f00;
        }

效果：

        

3、类选择器

特点：可以通过类选择器，选中页面上的一组元素

命名风格：a-z A-Z 0-9 _ -

                不能以数字开头，建议字母开头

​​​​​​​                如果有的时候我们命名的字符长度比较多，建议使用中线分割

语法：           

.类名标识符{

            css属性1：属性值1;

            css属性2：属性值2;

         }

<p class="c1">Lorem ipsumnt?</p>
<p class="c1">Lorem ipsum dolor sit amet, consectetur adipisicing.</p>

<div class="c1">文本信息</div>

   

.c1 {
            color: #f00;
            font-size: 30px;
            background-color: #0f0;
        }

   

 4、后代选择器

语法：多个选择器之间使用空格分割，称之为后代选择器。

<div>
    <p>文本信息</p>
</div>

/注释：div 下面的 p（div 后代元素 p 注意：不光代表子元素，还可以是任意后代元素）/
div p {
            color: #f00;
        }

 

 5、子元素选择器

语法：在选择器的后面加上 > 符合，代表是当前选择器的子元素

<div>
    <p>文本信息</p>
    <h2>
        <p>我的div下的h2下的p段落</p>
    </h2>
</div>

/注释：div的子元素p标签/
div > p {
            color: #f0f;
        }

 注意：只改变第一个p标签里面的内容，h2下面的p标签属于后代元素不属于子元素。

6、交集选择器

语法：多个选择器直接写在一起

        选择器1选择器2

<div>
    <p>文本信息</p>
    <h2 class="title">
        <p>我的div下的h2下的p段落</p>
    </h2>
</div>
<h2 id="t1">我是div外面的h2</h2>

/注释:去找h2标签，并且类名为title/
h2.title {
            color: #f00;
        }


/注释:去找h2标签，并且id为t1/
h2#t1 {
            color: #00f;
        }

7、并集选择器

特点：指的是把具有相同特性的样式写在一起

           把一组元素具有公共特性的部分，全部提取出来，然后取一个类名；把具有特性的部分单独的提取出来形成一个其他的类名进行使用。

语法：选择器1,选择器2，选择器3...

<div>
    <p>文本信息</p>
    <h2 class="title">
        <p>我的div下的h2下的p段落</p>
    </h2>
</div>
<h2 class="t1">我是div外面的h2</h2>

/注释：类名为title和类名为t1/
.title, .t1 {
            color: #f00;
        }

 8、通配符选择器（星号选择器）

含义：代表页面所有的标签元素

作用：一般是用于重置页面上的元素的自带的样式

<div>
    <p>文本信息</p>
    <h2 class="title">
        <p>我的div下的h2下的p段落</p>
    </h2>
</div>
<h2 class="t1">我是div外面的h2</h2>

/注释：选择所有的标签元素的字体颜色/
* {
            color: #0f0;
        }

 不懂的小伙伴可以去菜鸟教程（CSS 选择器 | 菜鸟教程）