HTML（css选择器）

最新推荐文章于 2021-03-25 20:44:54 发布

叮定

最新推荐文章于 2021-03-25 20:44:54 发布

阅读量110

点赞数 1

分类专栏： HTML

本文链接：https://blog.csdn.net/mooonk/article/details/115199719

版权

HTML 专栏收录该内容

9 篇文章 1 订阅

订阅专栏

HTML（css选择器）

我们常用的选择器有三种：标签名选择器（元素选择器）、id选择器、类选择器

一、选择器

1.标签名选择器
与之前使用的内嵌式css引入方法相同，span名称可以任意修改
语法为在head标签内添加：标签名{样式}，在body内部的想要引入样式的范围添加标签名包裹
head内部：

span
{
    color: black;background-color: brown;font-size: 5px;font-family: "微软雅黑 Light";
}

body内部：

<span>提示：这里可以添加系列文章的所有文章的目录，目录需要自己手动添加</span>

在这里插入图片描述
2.id选择器
每个标签都有自己独一无二的标签属性id，id值是唯一的
语法为：head内部：#id值{样式}，body内部：相应的范围的标签中添加id属性，并唯一赋值
head内：

   #1
    {
        color: blue;
    }

body内：

<p id="1">提示：这里可以添加系列文章的所有文章的目录，目录需要自己手动添加</p>

在这里插入图片描述
3.类选择器
每个标签都有自己的class属性，但属性值不唯一，就是不同标签的class属性值可以相同
语法：在head内部：.class属性值{样式}，body中：在对应的范围内的标签中添加class属性，属性值可以相同
head内部：

.c1
{
    color: blueviolet;
}

body内部：

<p class="c1">提示：这里可以添加系列文章的所有文章的目录，目录需要自己手动添加</p>

在这里插入图片描述
重点：所有的选择器在head中定义时都需要使用style双标签包裹

二、所有源码及运行结果

1.源码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>css选择器</title>
    <!--标签名选择器、类选择器、id选择器-->
    <style>
        /*标签名选择器*/
        span
        {
            color: black;background-color: brown;font-size: 5px;font-family: "微软雅黑 Light";
        }
        /*id选择器*/
        #1
        {
            color: blue;
        }
        /*类选择器*/
        .c1
        {
            color: blueviolet;
        }
    </style>

</head>
<body>
<!--标签名选择器-->
<span>提示：这里可以添加系列文章的所有文章的目录，目录需要自己手动添加</span>
<br>
<p id="1">提示：这里可以添加系列文章的所有文章的目录，目录需要自己手动添加</p>
<p class="c1">提示：这里可以添加系列文章的所有文章的目录，目录需要自己手动添加</p>
</body>
</html>

结果

在这里插入图片描述

叮定

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
1
评论
HTML（css选择器）

HTML（css选择器）我们常用的选择器有三种：标签名选择器（元素选择器）、id选择器、类选择器一、选择器1.标签名选择器与之前使用的内嵌式css引入方法相同，span名称可以任意修改语法为在head标签内添加：标签名{样式}，在body内部的想要引入样式的范围添加标签名包裹head内部：span{ color: black;background-color: brown;font-size: 5px;font-family: "微软雅黑 Light";}body内部：&lt
复制链接

扫一扫