1,元素选择器(标签选择器) p{} h1{}

2,选择器的分组:

将选择器的名字用逗号隔开,构成一组选择器 h1,h2{} 同组选择器公用大括号内的样式特殊选择器的分组*通配符*{}用来初始化内外边距

3,类选择器:

.class{} 可以结合元素选择器(标签选择器) a.class{} (结合标签的选择器) .class1.class2{} (多类选择器) .p1{} .p2{} 为两个并列的选择器, class=”p1 p2” 的元素会同属拥有 p1 p2的样式, 也可以通过 .p1.p2{样式} 添加p1 p2中没有的样式,当p1 p2中的样式有冲突时,谁写在后,渲染谁

4,id选择器:

#idname{样式} (区别于类选择器,1,id选择器只能使用一次,而类选择器可以多次使用 ### id选择器不能结合使用当使用js 时需要用到id)

5,属性选择器:

[属性名字]{ 设定样式}

<p 属性名=”属性值”>属性选择器</p>

属性和属性值选择器

[属性名字=属性值]{ 设定样式}

<p 属性名=”属性值”>属性和值选择器</p> (属性和值必须的对应,样式才能生效)

根据部分属性值选择器:

[属性名~=”属性值”]{} 只要属性中具有这个值就可以使用该样式

扫描二维码关注公众号，回复： 3045150 查看本文章

6,后代选择器:

可以选择某些被包裹在父代元素中的所有后代元素. P(父代) span(后代){样式}

7,子代选择器:

P(父代)>span(子代){样式} 只能选择父代中的子代span元素而孙子代中的span不能被选中

8,相邻兄弟选择器:

可以选择紧邻在另一个元素后的元素,且二者有相同的父级 h1+p{样式} h1和p必须有同一个父级

9,并集选择器:

当同时具有两个属性或类,或标签时才能被选中,比如 div.intersection{样式},只有是div标签并且class的属性值为intersection时,此标签才能被选中

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>选择器2</title>
	<style>
		<!--通配符选择器 -->
		/*通配符选择器可以选中所有的标签,主要用于写样式前的初始化*/
		*{
			margin:0;
			padding:0;
		}
		/*标签选择器*/
		div{
			color:red;
		}
		/*这里可以设置整个body的样式*/
		body{
			background-color:wheat;
		}
		/*class选择器*/
		.green{
			color:green;
		}

		#blue{
			color:blue;
		}

		/*后代选择器*/
		.box p{
			color:red;
		}

		/*并集选择器(选择器的分组)*/
		h3,h2{
			color:pink;
		}

		/*交集选择器*/
		div.intersection{
			font-size:22px;
			color:darkred;
		}

		/*子集选择器*/
		.box3>span{
			color:orange
		}
		/*属性选择器,*/
		[title]{
			color:red;
		}
		/*带有属性值得属性选择器*/
		[title = Hello]{
			color:blue;
			font-size:18px;
		}

		/*属性选择器的泛型选择*/
		/*下面的例子为包含指定值的 title 属性的所有元素设置样式*/
		[title ~= hi]{
			color:darkslategrey;
		}

		/*相邻兄弟选择器*/
		.borther + div{
			color: #00ec00;
		}
	</style>

</head>
<body>
	<!--类选择器-->
	<div class="green">这是一个类选择器</div>
	<hr>
	<!--id选择器-->
	<div id="blue">
	这是一个id选择器
	</div>
	<hr>
	<!--后代选择器-->
	<div class="box">
		<p>这是一个p元素</p>
		<div>这是一个div</div>
	</div>
	<p>这是类box外面的p标签,它的style由p标签选择器来决定</p>
	<hr>
	<!--选择器的分组,并集选择器-->
	<h3>粉色,这是并集选择器的其中一个元素h3</h3>
	<h2>粉色,这是并集选择器的其中一个元素h4</h2>
	<hr>
	<br>
	<br>
	<!--交集选择器-->
	<div class="intersection">这是一个交集选择器,可以被选中</div>
	<F class="intersecttion">这个标签中只有类,并没有div的标签属性,所以不能被选中</F>
	<hr>
	<br>
	<br>

<!--关于子代选择器和后代选择器,当我们使用子代选择器的时候,后代的都后代不会被选中-->
	<div class="box3">
		<span>这是子代span,子代选择器和后代选择器,都能选择这个标签</span>
		<div>
			<span>这是后代span,子代选择器不能选中它</span>
		</div>
	</div>
	<hr>
    <!--普通属性选择器的演示-->
    <h1>下面是通过属性选择器选择到的标签</h1>
	<h2 title="helloword">Hello Word</h2>
	<hr>
    <h1>下面是没有属性的h2样式,字体演示不会被改变,依然是标签选择器设定的粉色</h1>
	<h2>Hello Word</h2>
	<br>
	<br>
	<hr>
	<!--带有属性值的属性选择器-->
	<h1>下面是带有属性值得属性选择器</h1>
	<h2 title="Hello">这是一个h2标签,他的属性值为Hello</h2>
	<hr>
	<!--带有属性值的属性选择器-->
	<!--/*下面的例子为包含指定值的 title 属性的所有元素设置样式*/-->
	<h1>/*下面的例子为包含指定值的 title 属性的所有元素设置样式*/</h1>
	<h2 title="hi nihao"> 你好</h2>
	<h2 title="hi hello"> 哈喽</h2>
	<hr>
	<p class="borther">下面的div标签是它兄弟</p>
	<div>这个div标签和上面的borther相邻.通过.borther + div 被选中</div>
</body>
</html>

css选择器详细讲解