标签选择器、id选择器、class选择器、原子类

最新推荐文章于 2023-07-16 18:10:19 发布

头发还多

最新推荐文章于 2023-07-16 18:10:19 发布

阅读量398

点赞数

分类专栏： js学习内容记录文章标签： css3

本文链接：https://blog.csdn.net/qq_44935762/article/details/118672778

版权

js学习内容记录专栏收录该内容

56 篇文章 0 订阅

订阅专栏

标签选择器：

标签选择器也称元素选择器、类型选择器：它直接使用元素的标签名做选择器，将选择页面上所有该种标签，无论标签所处位置的深浅

标签选择器的覆盖面非常大，所以通常作为标签的初始化

<!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;
        }
        ul {
            /*去掉小圆点*/
            list-style: none;
        }
        a {
            /*去掉下划线，更改超链接的颜色*/
            text-decoration: none;
            color: #333;
        }
    </style>
</head>
<body>
    <p>我们一定<span>不负韶华，只争朝夕</span></p>
    <div>
        <div>
            <ul>
                <li>A</li>
                <li><span>B</span></li>
                <li><span>C</span></li>
            </ul>
        </div>
    </div>
    <p><a href="">我是一个超级链接</a></p>
    <p><a href="">我是一个超级链接</a></p>
    <p><a href="">我是一个超级链接</a></p>
</body>
</html>

在这里插入图片描述

认识id属性：

标签可以有id属性，这是标签的唯一标识
id表示只能由字母、数字、下划线、短横构成，且不能以数字开头，区分大小写，一般用小写字母
同一个页面不能使用相同的id标签
选择指定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>

class选择器：

class表示“类名”
命名规范和id命名规范一样
使用.前缀来选择指定的class标签
多个标签可以为相同的类名
同一个标签可以属于多个类，类名用空格隔开
当各个class类有相同的属性，后面的那个属性会覆盖前面的属性

/* class选择器 */
        .warning {
            color: orange;
        }
        .spec {
        /* 文字倾斜 */
            font-style: italic;
            color: royalblue;
        }
        
 <!-- class选择器 -->
    <p class="warning spec">我是class选择器</p>
    <p class="warning">我是class选择器</p>
    <p class="warning">我是class选择器</p>

在这里插入图片描述

原子类：

在做网页项目前，可以将所有的常用的文字字号、行高、外边距、内边距等做成一个单独的类

相当于每一个样式取一个名字，在需要的时候可以快速的添加一些常见的样式，前提是熟悉所有取名和功能

 /* 原子类 */
        .fs10 {
            font-size: 10px;
        }
        .fs15 {
            font-size: 15px;
        }
        .fs18 {
            font-size: 18px;
        }
        
 <!-- 原子类 -->
 <p class="fs10">我字体大小fs10</p>
 <p class="fs15">我字体大小fs15</p>
 <p class="fs18">我字体大小fs18</p>

在这里插入图片描述

头发还多

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
标签选择器、id选择器、class选择器、原子类

标签选择器：标签选择器也称元素选择器、类型选择器：它直接使用元素的标签名做选择器，将选择页面上所有该种标签，无论标签所处位置的深浅标签选择器的覆盖面非常大，所以通常作为标签的初始化<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> &l
复制链接

扫一扫

专栏目录