<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        div {
            width:200px;
            height:200px;
        }
        .red{
            background-color: red;
        }
        .green{
            background-color: green;
        }
    </style>
</head>
<body>
    <div class="red"></div>
    <div class="green"></div>
    <div class="red"></div>
</body>
</html>

-----》id选择器

id选择器和类选择器差不多，id选择器在HTML中以id属性表示，在CSS中，类选择器以一个点"#"号显示。应用上也是差不多，但是id选择器和类选择器有一些区别。

类选择器（ class）好比人的名字，一个人可以有多个名字，同时一个名字也可以被多个人使用
id选择器好比人的身份证号码全中国是唯的，不得重复
id选择器和类选择器最大的不同在于使用次数上【前者一次，后者可多次】
类选择器在修改样式中用的最多，id选择器般用于页面唯一性的元素上，经常和 JavaScript配使用

-----》通配符选择器

*代表了一切。对所有的标签进行设置，用的比较少

复合选择器

复合选择器建立在基础选择器之上，是基本选择器进行组合形成的。

复合选择器可以更准确、更高效的选择目标元素
复合选择器由两个或多个基础选择器，通过不同的方式组合而成。
常用复合选择器：后代选择器、子选择器、并集选择器和伪类选择器

-----》后代选择器

又称为包含选择器，可以选择父类元素里面的子元素，写法如下：

注意：

元素1和元素2中间用空格隔开
元素1是父级，元素2是子级，最终选择的是元素2
元素2可以是儿子，也可以是孙子等，只要是元素1的后代即可
元素1和元素2可以是任意基础选择器

-----》子选择器

只能选择作为某元素的最近一级子元素，简单理解就是选亲儿子元素。语法：元素1>元素2{样式声明}.【只能是直接后代】

-----》并集选择器

并集选择器可以选择多组标签同时为他们定义相同的样式。通常用于集体声明井集选择器是各选择器通过英文逗号（，）连接而成，任何形式的选择器都可以作为并集选择器的部分。
元素1，元素2{样式声明}

-----》伪类选择器

----》链接伪类选择器

-----》focus伪类选择器

用于选取获得焦点的表单元素

HZT—James

发布了137 篇原创文章 · 获赞 28 · 访问量 3万+

私信关注

CSS基础之选择器的分类

基础选择器

------》标签选择器

------》类选择器

注意

记忆口诀：样式点定义，结构类调用。一个或多个，开发最常用

注意：

注意：