标签选择器和id选择器

最新推荐文章于 2023-04-18 09:46:31 发布

hello_xujj

最新推荐文章于 2023-04-18 09:46:31 发布

阅读量4.7k

点赞数 3

分类专栏： CSS 文章标签： css3 css

本文链接：https://blog.csdn.net/xjj19999272/article/details/116157812

版权

CSS 专栏收录该内容

18 篇文章 1 订阅

订阅专栏

标签选择器和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>

代码效果如下：
在这里插入图片描述

hello_xujj

关注

3
点赞
踩
15

收藏

觉得还不错? 一键收藏
0
评论
标签选择器和id选择器

标签选择器和id选择器标签选择器标签选择器也称元素选择器、类型选择器，它直接使用元素的标签名当做选择器，将选择页面上所有该种标签。标签选择器将选择页面上所有该种标签，无论这个标签所处位置的深浅。看下面一段示例代码：<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=
复制链接

扫一扫