1、什么是CSS选择器?
CSS选择器,目的是指定CSS要作用的标签对象,今天来了解一下CSS的基本选择器和扩展选择器。
2、基本选择器
这里介绍四种基本选择器。
(1)标签选择器(这个时候的css代码以html标签来决定作用于谁)
<span style="font-size:14px;"> /*
* 标签选择器
*/
p {
color:#ff0000;
font-size:30px;
}</span>
这个表示将p标签中的字体颜色设置为#ff0000,字体大小设置为30像素。格式为:“标签{ }”。
(2)类选择器
<span style="font-size:14px;"> /*
class选择器,类选择器
*/
.p_1 {
color:green;
font-size:20px;
}</span>
类选择器表示将class属性为p_1的标签字体颜色设置为green,大小为20像素。格式为:“.class属性名{ }”。
(3)ID选择器
<span style="font-size:14px;"> #p_1 {
color:#0f0f0f;
font-size:50px;
}</span>
同理,ID选择器指将ID属性为p_1的标签颜色设置为0f0f0f,字体大小为50像素。格式为:“#ID属性名{ }”。(4)通用选择器
<span style="font-size:14px;"> *{
font-size: 12px;
}</span>
通用选择器表示将所有标签字体属性设置为12像素。格式为:“ * { }”。
3、扩展选择器
当基本的选择器不能够完全符合需求时,就出现了扩展选择器,这里介绍三种扩展选择器。
(1)关联选择器
需求:我需要p标签下的b标签颜色变红,而不需要所有的p标签下的颜色变红。这时候需要关联选择器:
<span style="font-size:14px;"> p b {
color:red;
}</span>
这就表示p标签下的b标签颜色变红,而不是所有的p标签变红。
那么,如果我的HTML代码是这样:
<span style="font-size:14px;"> <table >
<tr>
<td>胡根得</td>
</tr>
</table>
<table>
<tr>
<td>岳飞</td>
</tr>
</table></span>
我想要“胡根得”变红,而不需要“岳飞”变红,要怎么办呢?
我们可以使用类选择器或ID选择器与扩展选择器相结合。以与类选择器结合为例,首先将HTML代码变为:
<span style="font-size:14px;"> <table class="name">
<tr>
<td>胡根得</td>
</tr>
</table>
<table>
<tr>
<td>岳飞</td>
</tr>
</table></span>
然后:
<span style="font-size:14px;"> .name tr td {
color:red;
}</span>
这就表示:将class属性名为name的标签下的 tr 标签下的 td标签颜色变红。
(2)组合选择器
需求:我的HTML代码如下,我需要将p、b、i、u标签下的颜色全部变红,怎么办?
<span style="font-size:14px;"> <p>aa</p>
<b>bb</b><br/>
<i>cc</i><br/>
<u>dd</u><br/></span>
为方便起见,我们可以使用组合选择器:
<span style="font-size:14px;"> p, i, u, b {
color:red;
}</span>
这表示将p、b、i、u标签下的颜色全部变红,省去了用标签选择器的一个一个设置。
(3)伪元素选择器
HTML中预先定义好的一些选择器,称为伪元素。是因为CSS的术语。
伪元素格式:标签名:伪元素;类名:伪元素。
常见的有:
<span style="font-size:14px;"> a:link 超链接未点击状态。
a:visited 被访问后的状态。
a:hover 光标移到超链接上的状态(未点击)。
a:active 点击超链接时的状态。</span>
实例:
HTML代码:
<span style="font-size:14px;"> <a href="http://www.baidu.com">百度</a>
<a href="http://www.sina.com">新浪</a>
<a href="http://www.youku.com">优酷</a></span>
CSS代码:
<span style="font-size:14px;"> <style type="text/css">
a:link {
color:red;
}
a:visited {
color:blue;
}
a:hover{
color:green;
text-decoration:line-through; //当鼠标放上去时候为标签下内容加上贯穿线
}
a:active{
color:yellow;
}
a {
text-decoration:none; //表示对a标签下内容无额外装饰
}
</style></span>
表示a标签下的内容在未点击状态下为红色;光标移到标签上时候为绿色;点击时为黄色;访问后为蓝色。
附:CSS选择器合集:
选择器 | 例子 | 例子描述 | |
---|---|---|---|
.class | .intro | 选择 class=”intro” 的所有元素。 | |
#id | #firstname | 选择 id=”firstname” 的所有元素。 | |
* | * | 选择所有元素。 | |
element | p | 选择所有 <p> 元素。 | |
element,element |