1 基本选择器
(1)通用选择器
- {
border: 1px solid red;
}
“*”号选择器是通用选择器，功能是匹配所有html 元素的选择器包括<html>
和<body>标签
(2)元素选择器
p {
color:red;
}
直接使用元素名称作为选择器名称
(3)id选择器
abc {
font-size: 20px;
}
<p id="abc">abc<p>
通过对元素设置全局属性id，然后使用#id 值来选择页面唯一元素
(4)类选择器
.abc {
border:1px solid red
}
<b classs="abc">b</b>
<span class="abc">span</span>
通过对元素设置全局属性class，然后使用.class 值选择页面一个或多个元素。
(5)属性选择器
[href]{
color:orange
}
<a href="http://www.baidu.com">百度</a>
//所需版本CSS3
[href^="http"] {
color: orange;
}
解释：属性值开头匹配的属性选择器。
//所需版本CSS3
[href$=".com"] {
color: orange;
}
解释：属性值结尾匹配的属性选择器。
//所需版本CSS3
[href*="baidu"] {
color: orange;
}
解释：属性值包含指定字符的属性选择器。
//所需版本CSS2
[class~="edf"] {
font-size: 50px;
}
解释：属性值具有多个值时，匹配其中一个值
2 复合选择器
将不同选择器进行组合成特定的匹配
(1)分组选择器
p,b,span {
color:red;
}
将多个选择器通过逗号分割，同时设置一组样式。当然，不但可以分组元素选择
器，还可以使用ID 选择器、类选择器、属性选择器混合使用
(2)后代选择器
p b {
color:red;
}
选择<p>元素内部所有<b>元素。不在乎<b>的层次深度。当然，后代选择器也可
以混合使用ID 选择器、类选择器、属性选择器。
(3)子选择器
ul > li {
background:red;
}
<ul>
<li></li>
<li></li>
</ul>
子选择器类似与后代选择器，而最大的区别就是子选择器只能选择父元素向下一
级的元素，不可以再往下选择。
(4)相邻兄弟选择器
p + b {
border: 10px solid red;
}
<p>段落</p>
<b>加粗</b>
相邻兄弟选择器匹配和第一个元素相邻的第二个元素。
(5)普通兄弟选择器
p~b {
background:red
}
<p>段落</p>
<b>加粗</b>
<b></b>
普通兄弟选择器匹配第一个元素后面的所有元素。
网友评论