目录
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属性选择器
语法:[属性名]{} 选择含有指定属性的元素
[属性名=属性值]{} 选择含有指定属性和属性值的元素
[属性名^=属性值]{} 选择属性值以指定值开头的元素
[属性名$=属性值]{} 选择属性值以指定值结尾的元素
[属性名*=属性值]{} 选择属性值含有某值的元素