Day06-Css选择器(上)
元素选择器
用标签名作为选择器,选中所有相应的元素
类选择器
根据class的属性来选择元素,样式定义为:.classname { }
ID选择器
根据id名来选择元素,样式定义为:#idname{ }
属性选择器
选择器 描述
[attribute]选取带有指定属性的元素。12456
[attribute=value] 选取带有指定属性和值的元素。6
[attribute~=value] 选取属性值中包含指定词汇的元素。456
[attribute|=value] 选取带有以指定值开头的属性值的元素,
该值必须是整个单词。
[attribute^=value] 匹配属性值以指定值开头的每个元素。1256
[attribute$=value] 匹配属性值以指定值结尾的每个元素。46
[attribute*=value] 匹配属性值中包含指定值的每个元素。12456
关系选择器
选择器 描述
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>
通配符选择器
通配符选择器可以选中页面所有的标签 写法:*{}