1.css选择器: 用于“查找”(或选取)要设置样式的 HTML 元素;选择器种类分为5类
1.1简单选择器
1.1.1 元素选择器:根据元素名称来选择 HTML 元素
p {
text-align: center;
color: green;
}
1.1.2 id 选择器:使用 HTML 元素的 id 属性来选择特定元素(元素的 id 在页面中是唯一的,因此 id 选择器用于选择一个唯一的元素)
#text {
text-align: center;
color: green;
}
//id 名称不能以数字开头
1.1.3 类选择器:选择有特定 class 属性的 HTML 元素
//类名不能以数字开头
.text {
text-align: center;
color: green;
}
//还可以指定只有特定的 HTML 元素会受类的影响
p .text {
text-align: center;
color: green;
}
//HTML 元素也可以引用多个类
...
<style>
p.center {
text-align: center;
color: green;
}
p.large {
font-size: 300%;
}
</style>
...
<p class="center large">本段将是绿色、居中对齐,并使用大字体。</p>
...
1.1.4 通用选择器(*):选择页面上的所有的 HTML 元素
* {
text-align: center;
color: green;
}
1.1.5 分组选择器:选取所有具有相同样式定义的 HTML 元素
h1 {
text-align: center;
color: green;
}
h2 {
text-align: center;
color: green;
}
h3 {
text-align: center;
color: green;
}
//如需对选择器进行分组,请用逗号来分隔每个选择器
h1, h2, h3 {
text-align: center;
color: green;
}
1.2 组合器选择器
组合器是解释选择器之间关系的某种机制
1.2.1 后代选择器:匹配属于指定元素后代的所有元素
<div>元素内包含的所有<p>元素的背景色为绿色(只要是在<div内的都匹配>)
div p {
background-color: green;
}
<div>
<p>div 中的段落 1。</p>
<p>div 中的段落 2。</p>
<section><p>div 中的段落 3。</p></section>
</div>
1.2.2 子选择器:匹配属于指定元素子元素的所有元素
<div>的子元素才匹配,段落3是<section>元素的子元素,所以它不匹配
div > p {
background-color: green;
}
<div>
<p>div 中的段落 1。</p>
<p>div 中的段落 2。</p>
<section><p>div 中的段落 3。</p></secti