本文详细介绍了CSS的选择器，包括常规选择器如元素选择器、id选择器和类选择器，复合选择器如交集选择器和并集选择器，以及关系选择器如子元素和后代元素选择器。此外，还涵盖了属性选择器的使用。
目录
CSS常规选择器
元素选择器(标签选择器)
语法：标签名{}
作用：选中对应标签包裹的内容
例子：h1{},h2{},p{},div{},span{}...id选择器
语法：#id属性值{}
作用：选中对应的id属性值的内容
例子：#p1{},#pp{},#abc{}...注意：id选择器命名具有唯一性 即同一个页面名字不能起重复了。
类选择器
语法：.class属性值{}
作用：选中对应class属性值的内容
例子：.pp{},.p1{},.abc{}...注意：类选择器用法与id选择器相同，但是可以起相同的名字并且重复使用，主要是用来写冗余的样式。
通配选择器
语法：*{}
作用：选中页面中所有的标签
例子: *{}CSS复合选择器
交集选择器
作用：选中同时满足多个条件的元素
语法：选择器1选择器2选择器3····{}
注意：如果选择器中有元素选择器，那么元素选择器必须放在第一位。
并集选择器
作用：同时选中满足条件的元素
语法：选择器1,选择器2,选择器3····{}
注意：用逗号链接的是并集选择器，中间没有空格。
CSS关系选择器
子元素选择器
作用：选择的是父级标签的直系第一代子标签
语法：父元素>子元素{}
例如：div>p,.big>p,#big>p{}...后代元素选择器
作用：选中指定祖先元素下面指定的后代元素
语法：祖先元素 后代元素{}
例如：#big span{},.big span{}...下一个兄弟选择器
作用：选择下一个兄弟(仅挨着我的)
语法：前一个+下一个
例子：p+span...下面所有兄弟选择器
作用：选择下面所有的兄弟(前面的不选)
语法：兄～弟
例子：p～span...图例：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<style>
/* 需求一：为div的子元素span设置一个字体颜色红色 */
div > span {
color: red;
}
/* 需求二：div里的span元素字体都变为30px */
div .rou {
font-size: 30px;
}
div > p > span {
color: violet;
}
/* 需求三： 选择零食区，字体颜色变为blue*/
p + span {
color: blue;
}
p ~ span {
background-color: tomato;
}
</style>
</head>
<body>
<div id="c1">
我是超市<br />
<span>我是零食区</span>
<p>
我是生鲜区
<span class="rou" id="">肉类</span>
</p>
<span>我是鞋包区</span><br />
<span>我是洗护区</span>
</div>
<br />
<span>我是超市外的小卖部</span>
</body>
</html>CSS属性选择器
语法：[属性名]{} 选择含有指定属性的元素
[属性名=属性值]{} 选择含有指定属性和属性值的元素
[属性名^=属性值]{} 选择属性值以指定值开头的元素
[属性名$=属性值]{} 选择属性值以指定值结尾的元素
[属性名*=属性值]{} 选择属性值含有某值的元素
230
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
