标签选择器和id选择器
标签选择器
标签选择器也称元素选择器、类型选择器,它直接使用元素的标签名当做选择器,将选择页面上所有该种标签。
标签选择器将选择页面上所有该种标签,无论这个标签所处位置的深浅。看下面一段示例代码:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>标签选择器</title>
<style>
span {
color: red;
}
p {
color: rgb(98, 0, 255);
}
ul {
/* 去掉无序列表的小圆点 */
list-style: none;
}
a {
/* 去掉超级链接的下划线 */
text-decoration: none;
}
</style>
</head>
<body>
<p>
今天天津<span>又下雨了</span>
</p>
<div>
<div>
<ul>
<li>A</li>
<li><span>B</span></li>
<li>C</li>
</ul>
</div>
</div>
<a href="http://www.baidu.com">百度一下,你就知道</a>
</body>
</html>
代码效果图如下:
我们可以看到span选择器将选择页面上所有的<span>标签,即使第二个<span>标签所处位置比较深。
标签选择器“覆盖面”非常大,所以通常用于标签的初始化。我们可以看到图中无序列表的小圆点不见了,这是ul选择器实现的效果,list-style是列表样式,值为none也就是没有该样式,所以图中没有显示小圆点。
同样的,可以看到超级链接没有下划线了,这是a选择器实现的效果,text-decoration是文本装饰,值为none也就是没有该装饰了。
id选择器
认识id属性
标签可以有id属性,是这个标签的唯一标识 。比如:
<p id="para">我是一个段落</p>
id的名称只能由字母、数字、下划线、短横构成,且不能以数字开头,字母区分大小写,但一般为小写字母。
同一个页面上不能有相同id的标签。
id选择器
CSS选择器可以使用井号#前缀,选择指定id的标签,示例代码如下:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>id选择器</title>
<style>
#para {
color: red;
}
</style>
</head>
<body>
<p id="para">
我是一个段落,我有id属性。
</p>
</body>
</html>
可以看到,使用#加para这个id,就选择了id属性为para的标签,也就是p标签。
class选择器
class属性表示“类名”,类名的命名规范和id的命名规范相同。例如:
<p class="warning">我是段落</p>
使用点.前缀选择指定class的标签,示例代码如下。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.warning {
color: red;
}
.spec {
/* 文字倾斜 */
font-style: italic;
}
.fs16 {
font-size: 16px;
}
.fs18 {
font-size: 18px;
}
.warning.important {
background-color: silver;
}
.fs26 {
font-size: 26px;
}
.color-blue {
color: blue;
}
.color-green {
color: green;
}
</style>
</head>
<body>
<p>我是段落</p>
<p class="warning">我是段落</p>
<p class="warning spec">我是段落</p>
<p class="fs16">我是一个p标签,我的字体是16px</p>
<p class="fs18 color-green">我是一个p标签,我的字体是18px</p>
<p class="important">我是一个p标签,我的背景颜色是银色</p>
<p class="warning important">我是一个p标签,我的背景颜色是银色</p>
<p class="fs26 color-blue">我是一个p标签,我的字体是26px</p>
</body>
</html>
代码效果如下:
类选择器在html中可以被多次调用,比如上面代码中warning和spec类名都调用了两次。
通过把两个类选择器链接在一起,仅可以选择同时包含这些类名的元素(类名的顺序不限)。比如上面.warning.important选择器,指挥选择同时包含warning和important类名的元素。当值包含important类名,没有任何效果。
如果一个多类选择器包含类名列表中没有的一个类名,匹配就会失败。
class类名非常灵活,多个标签可以为相同类名,同一个标签可以同时属于多个类,类名用空格隔开。
复合选择器
复合选择器有三种,分别是后代选择器、交集选择器和并集选择器,下表罗列了它们的示例和意义:
选择器名称 | 示例 | 示例的意义 |
---|---|---|
后代选择器 | .box .spec | 选择类名为box的标签内部的类 名为spec的标签 |
交集选择器 | li.spec | 选择既是li标签,也属于spec 类的标签 |
并集选择器 | ul, ol | 选择所有ul和ol标签 |
后代选择器
CSS选择器中,使用空格表示“后代”。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
div span {
color: red;
font-size: 22px;
}
</style>
</head>
<body>
<div class="fs">
我是div
<p>我是div内部的p<span>我是span</span></p>
<p>我是div内部的p<span>我是span</span></p>
</div>
<p class="fs">我是p<span>我是span</span></p>
<p class="fs">我是p<span>我是span</span></p>
<h2>我是h2</h2>
</body>
</html>
比如上面代码中div span表示div标签中后代的p标签。
“后代”并不一定是子标签,后代选择器可以有很多空格,隔开好几代。代码效果如下:
交集选择器
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
p.fs {
color: green;
}
</style>
</head>
<body>
<div class="fs">
我是div
<p>我是div内部的p<span>我是span</span></p>
<p>我是div内部的p<span>我是span</span></p>
</div>
<p class="fs">我是p<span>我是span</span></p>
<p class="fs">我是p<span>我是span</span></p>
<h2>我是h2</h2>
</body>
</html>
交集选择器又两个选择器构成,其中第一个为标签选择器,第二个为class选择器,两个选择器之间不能有空格,中间有点连接,比如p.fs是选择有.fs类的p标签,代码效果如下:
并集选择器
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
div, p, span, h2 {
font-style: italic;
}
</style>
</head>
<body>
<div class="fs">
我是div
<p>我是div内部的p<span>我是span</span></p>
<p>我是div内部的p<span>我是span</span></p>
</div>
<p class="fs">我是p<span>我是span</span></p>
<p class="fs">我是p<span>我是span</span></p>
<h2>我是h2</h2>
</body>
</html>
并集选择器也叫作分组选择器,逗号表示分组,比如上面代码里的div, p, span, h2表示同时选择div标签、p标签、span标签和h2标签。
代码效果如下:
伪类
伪类是添加到选择器的描述性词语,指定要选择的元素的特殊状态,比如超级链接拥有4个特殊状态:
伪类 | 意义 |
---|---|
a:link | 没有被访问的超级链接 |
a:visited | 已经被访问过的超级链接 |
a:hover | 正被鼠标悬停的超级链接 |
a:active | 正被激活的超级链接(按下按键但是还没有松开按键) |
示例代码如下:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
a {
text-decoration: none;
}
a:link {
/* 没有被访问的超级链接设置为红色 */
color: red;
}
a:visited {
/* 已经被访问过的超级链接设置为棕色 */
color: brown;
}
a:hover {
/* 正被鼠标悬停的超级链接字体设置为26px */
font-size: 26px;
}
</style>
</head>
<body>
<p>
<a href="http://www.baidu.com">去百度首页</a>
</p>
<p>
<a href="https://weibo.com/">前往微博</a>
</p>
<p>
<a href="http://www.people.com.cn">去人民网</a>
</p>
</body>
</html>
代码效果如下: