目录
一.常用选择器
1.元素选择器
元素选择器又称为类型选择器、element选择器、标签选择器。
语法 : 标签名{}
例: p{} , div{} , span{} , ol{} , ul{} ......
注：标签是在body里面添加的
2.类选择器(class选择器)
类选择器：通过类名选择元素。例如，.my-class选择所有具有my-class类的元素。
语法：class属性值{}
例：
<body>
<p class="A">段落1</p>
<p class="B">段落1</p>
<p class="C">段落1</p>
</body>运行效果：
3.ID选择器
D选择器：通过元素的ID选择元素。例如，#my-id选择具有my-id ID的元素。
语法 : #id属性值{}
例子 :
<style>
#text{
color: #ff0000;
font-size: 30px;}
</style>
</head>
<body>
<p id="text">Hello</p>
<!-- text:可自己命名，id名称不能重复 不能以数字开头-->
</body>运行效果：
二、关系选择器
1.后代选择器
后代选择器(又称包含选择器) ,后代选择器使用空格分隔元素。
例：以下 后代选择器 选择到的是 ul 下面的所有后代 li，所以都会生效有颜色。
<style>
ul li{
color: #ff0000;
}
</style>
</head>
<body>
<ul >
<li>第一节</li>
<li>第二节</li>
<li>第三节</li>
<div>
<ol>
<li>第四节</li>
<li>第五节</li>
</ol>
</div>
</ul>
</body>运行效果：
2.子代选择器
子代选择器使用符号 ">" 来表示。使用子代选择器可以更精确地控制要选择的元素，避免选择到不需要的子元素，从而提高代码的可读性和灵活性。
以下例子 子代选择器 选中的是div下的儿子p标签，所以只有 “大家好” 生效有颜色。
<style>
div>p{
color: #f70000;
}
</style>
</head>
<body>
<div>
<p>大家好</p>
<ul>
<li>
<p>我还好</p>
</li>
</ul>
</div>
</body>运行效果：
3.通用兄弟选择器
通用兄弟选择器使用“~”符号，将前面的选择器与后面的选择器连接起来。通用兄弟选择器用于选择某个元素之后的所有兄弟元素。
以下例子生效有颜色的是h3下的p标签。
<style>
h3~p{
color: brown;
}
</style>
</head>
<body>
<h3>我是标题</h3>
<p>我是内容1</p>
<div>我是内容2</div>
<p>我是内容3</p>
<p>我是内容4</p>
</body>运行效果：
4.相邻兄弟选择器
该选择器可以选取元素的下一个相邻兄弟元素。该选择器使用"+"符号进行表示。
相邻兄弟选择器可选择紧接在另一个元素后的元素，所以以下代码只有 我是内容1 生效有颜色。
<style>
h3+p{
color: brown;}
</style>
</head>
<body>
<h3>我是标题</h3>
<p>我是内容1</p>
<p>我是内容2</p>
</body>运行效果：
三、并集选择器
并集选择器是CSS中的一种选择器，用于选择多个元素的并集。它使用逗号（,）来分隔不同的选择器，表示选择满足任一选择器条件的元素。
并集选择器可以选择多组标签, 同时为他们定义相同的样式。
如以下 p 标签跟 h3 标签可以同时定义相同的样式。
<style>
p,h3{
font-size: 30px;
color: #e40000;}
</style>
</head>
<body>
<p>我是p标签</p>
<h3>我是标题标签</h3>
</body>
</html>运行效果：
扫一扫
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
