选择器
元素选择器
用标签名来作为选择器，选中所有相应的元素
类选择器
根据class的属性来选择元素，样式定义为：
ClassName{ }
ID选择器
根据ID来选择元素，定义为#idname{ }
属性选择器
选择器 描述
1,[attribute]
选取带有指定属性的元素。12456
2,[attribute=value]
选取带有指定属性和值的元素。6
3,[attribute~=value]
选取属性值中包含指定词汇的元素。456
4,[attribute|=value]
选取带有以指定值开头的属性值的元素，该值必须是整个单词。6
5,[attribute^=value]
匹配属性值以指定值开头的每个元素。1256
6,[attribute$=value]
匹配属性值以指定值结尾的每个元素。46
7,[attribute*=value]
匹配属性值中包含指定值的每个元素。12456
例：[title*=’d’]选择器title值中包含d的元素
关系选择器
| 选择器 | 描述 |
|---|---|
| E F | 选择E元素的后代元素F |
| E > F | 选择E元素的直接后代元素F |
| E + F | 选择E元素的第一个弟元素F |
| E ~ F | 选择E元素的所有弟元素F |
并选择器
将相同的样式放在一起，类名直接用英文逗号分隔。
写法：E,F（中间用英文的逗号分隔）
案例：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<style>
#div1,#div3 {
width: 100px;
height: 100px;
border: 1px solid blue;
}
</style>
</head>
<body>
<div id="div1">我是div1</div>
<div id="div2">我是div2</div>
<div id="div3">我是div3</div>
</body>
</html>
通配符选择器
可以选中页面所有的标签
写法：*{}
案例：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<style>
*{
max-width: 200px;
min-height: 60px;
margin: 5px;
border: 1px green solid;
}
</style>
</head>
<body>
<div>我是div1</div>
<div>
我是div2
<p>我是p1</p>
<p>我是p2</p>
<p>我是p3</p>
</div>
<div>我是div3</div>
</body>
</html>
88
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
