HTML选择器
1、标签选择器
直接将HTML元素中的标签作为选择器,可以是html、h1、a、strong等HTML标签,在CSS中直接展现。
html {color:black;}
h1 {color:blue;}
h2 {color:silver;}
2、ID选择器
通常在编写页面的时候设定某些标签元素的ID,同一个HTML中ID不允许重复,例如,<div id="wrapper">,后来使用的时候就用#wrapper,这里的”#wrapper“就是ID选择器,在CSS中以”#“开头。
#red {color:red;}
#green {color:green;}
<p id="red">这个段落是红色。</p>
<p id="green">这个段落是绿色。</p>
3、类选择器
CSS里面用”.“开头的表示类选择器,如有如下的CSS代码
.center {text-align: center}
在上面的例子中,所有拥有 center 类的 HTML 元素均为居中。
在下面的 HTML 代码中,h1 和 p 元素都有 center 类。这意味着两者都将遵守 ".center" 选择器中的规则。
<h1 class="center">
This heading will be center-aligned
</h1>
<p class="center">
This paragraph will also be center-aligned.
</p>
4、后代选择器
后代选择器(descendant selector)又称为包含选择器。
后代选择器可以选择作为某元素后代的元素。
<h3>外部</h3>
<div id="sider">
<h3>内部</h3>
<ul>
<li>列表1</li>
<li>列表2</li>
<li>列表3</li>
</ul>
</div>
在这里,可以定义如下的CSS样式,就可以实现分层调用
h3 {color:green;}
#sider h3 {color:red;}
#sider ul {color:red;}
#sider ul li{color:red;}
5、子元素选择器
CSS样式设定如下:
div > em {color:red;}
HTML代码如下:
<div>
<em>这个em是div中的元素</em>
<p>p中的<em>是p的子元素</p>
</div>
显示效果为第一个<em>标签显示红色,而第二个<em>标签的子元素将不会应用此样式。
6、相邻兄弟选择器
表示样式应用于与该元素相邻的下一个元素
div + p{color:red;}
HTML代码如下:
<p>与div相邻的上一个p</p>
<div>
<p>div中的p</p>
</div>
<p>与div相邻的下一个p</p>
<p>不与div相邻的p</p>
只有与div相邻的下一个p才会应用此样式.