CSS常用选择器

1.基本选择器

1.1 标签选择器：

格式：标签名 {}

作用：选择到页面上所有带有这个标签的元素

1.2 类选择器

格式：.class类名 {}
作用：对多个标签进行归类，同一个类可以复用

1.3 id选择器

格式： #id名称 {}
作用：根据id实现，id必须保证全局唯一，不可复用

示例代码：

/*
    标签选择器：会选择到页面上所有的这个标签的元素
    格式：标签名 {}
    */
h1 {
    color: chartreuse;
    background: yellow;
}

/*
    类选择器：可以对多个标签进行归类，同一个类可以复用
    格式：  .class类名 {}
    */
.class1 {
    color: #9c1814;
    background: #119c0c;
}

/*
    id选择器：根据id实现，id必须保证全局唯一，不可服用
    格式：#id名称{}
*/
#id1{
    color: aqua;
    background: aliceblue;
}
#id2{
    color: #9c1814;
    background: aquamarine;
}
#id3 {
    color: #14209c;
    background: coral;
}

效果：

2.层次选择器

2.1 后代选择器

格式：祖先标签后代标签 {}
作用：将祖先的所有后代标签进行选中

2.2 子选择器

格式：父标签>子标签 {}
作用：将父标签的所有子标签进行选中

2.3 相邻兄弟选择器

格式：兄长标签的类+兄弟标签 {}
作用：选中兄长标签的向下的一个兄弟标签

2.4 通用选择器

格式：兄长标签的类~兄弟标签 {}
作用：选中兄长标签的向下的所有兄弟标签

示例代码（html+csss）

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="层次选择器.css">
	<style>
		/*
			后代选择器：在某个元素的后面
			格式：元素名 {}*/
		body p{
			color: #229c15;

		}/*应该变色的是所有的标签*/

		/*
			子选择器：
			格式： >*/
		body>ul{
			color: #9c1814;
		}
		/*变色的应该是示例4、5*/

		/*
			相邻兄弟选择器：向下捆绑，只有一个
			格式： +  */
		.active1+p{
			color: coral;
		}/*变色的应该是示例3*/

		/*
			通用选择器：当前选中的元素向下的所有元素
			格式：  ~  */
		.active2~p{
			color: #1f229c;
		}
		/*应该变色的是7、8*/
	</style>
</head>
<body>
    <p>示例1</p>
    <p class="active1">示例2</p>
    <p>示例3</p>
    <ul class="active">
        <li>示例4</li>
        <li>示例5</li>
        <li>
            <p class="active2">示例6</p>
            <p>示例7</p>
            <p>示例8</p>
        </li>
    </ul>

</body>
</html>

效果图：

3.属性选择器

属性选择器格式：
            标签名[属性]{}

            =  ：表示全等
            *=  ：包含有
            ^=  :以。。。开头
            $= ：以。。。结尾