速解CSS选择器

分解机226

已于 2022-05-18 18:31:58 修改

阅读量176

点赞数 2

分类专栏：前端网页开发文章标签： css html sass

于 2022-05-17 15:32:49 首次发布

转载请标明出处

本文链接：https://blog.csdn.net/qq_64281750/article/details/124820786

版权

前端网页开发专栏收录该内容

12 篇文章 0 订阅

订阅专栏

本文详细介绍了CSS中的三种选择器：标记选择器、类选择器和ID选择器。标记选择器用于设置同一标签的所有元素样式，如将所有

标签设为蓝色。类选择器则允许对特定类别的元素应用样式，如设置.special1类的段落背景色。ID选择器通过#标识符定位唯一元素，但ID在文档中应唯一，重复使用会导致样式失效。

摘要由CSDN通过智能技术生成

标记选择器

类选择器

ID选择器

标记选择器

一个网页有很多的标记，<p>、<h1>、<div>等等，标记选择器用于声明这些标记，它的语法格式如下

tagName{

porperty:value;

}

首先是声明标签，在标签里面设置对应的属性和属性值，在CSS中设置的属性必须在CSS的范围内，不然就会导致语句不会生效。标记选择器会控制全部的同类标记，例如当声明了<h1>的样式为蓝色，那么页面所有的<h1>标签都会编程蓝色。

类选择器

类选择器的作用就是来弥补标记选择器的不足，标记选择器会将同类的标签内容都变为相同的样式，如果我们想在所有的标签<h1>中把一部分的字体变为红色，另一部分的字体变为蓝色，就要使用类选择器。

.className{

porperty:value;

}

我们来看一个例子

<!demo0303.html>
<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <style type="text/CSS">
            h2{/*标记选择器*/
                font-family: 幼圆;
                font-size: 16px;
                color:rgb(175, 16, 56);
            }
            .special1{/*类选择器*/
                line-height: 140%;
                background-color: rgb(182, 107, 8);
            }
             .special2{/*类选择器*/
                line-height: 100%;
                background-color: rgb(20, 133, 26);
                font-size: 12px ;
            }/*改变sytle的风格相应的所有标签都会变*/
        </style>
    </head>
    <body style="background-color:#16b66e ;">
    <h1 style="text-align: center;">神王盖伦</h1>
    <h2>大保健</h2>
    <p class="special1">盖伦是美国RiotGames开发的3D大型竞技场战网游戏《英雄联盟》中的一位英雄。<br>/*使用了special1风格*/
    即使装备非常破烂，但他还是拥有强大的攻防能力。虽然非常强力但在专业比赛中他坐冷板凳很久，不过玩家开始注意起盖伦。<br>
    盖伦是最强力的半肉dps之一。</p>
    <h2>科技大厦打开</h2>
    <p class="special2">qwer</p>
    </body>
</html>

在上面的一段代码中我们就使用了这两个CSS选择器来美化页面（好像我的美化水平不怎么样阿），

改变CSS的风格

ID选择器

我们直接来看代码边看边讲

<!demo0303.html>
<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <style type="text/CSS">
            p {
                text-indent: 2em;
            }
            #first{
                font-family: 幼圆;
                color:#16b66e;
            }
            #second{
                line-height: 130%;
                font-family: 隶书;
                color: bisque;
            }
        </style>
    </head>
    <body style="background-color:#16b66e ;">
    <h1 style="text-align: center;">神王盖伦</h1>
    <h2>大保健</h2>
<p id="first"  >对线神王德莱厄斯</p>
    <p >盖伦是美国RiotGames开发的3D大型竞技场战网游戏《英雄联盟》中的一位英雄。<br>/*使用了special1风格*/
    即使装备非常破烂，但他还是拥有强大的攻防能力。虽然非常强力但在专业比赛中他坐冷板凳很久，不过玩家开始注意起盖伦。<br>
    盖伦是最强力的半肉dps之一。</p>
    <h2>科技大厦打开</h2>
    <p id="second">qwer</p>
    </body>
</html>

在HTML中ID选择器只能使用一次，而上面的代码我使用了两次ID选择器，大家如果在VScode中运行这段代码会发现“对线德莱厄斯”这句话不会再浏览器当中显示出来，将代码<p id="first" >对线神王德莱厄斯</p>改为<p >对线神王德莱厄斯</p>就可以显示出来。

分解机226

关注

2
点赞
踩
1

收藏

觉得还不错? 一键收藏
打赏
1
评论
速解CSS选择器

目录标记选择器类选择器ID选择器标记选择器一个网页有很多的标记，<p>、<h1>、<div>等等，标记选择器用于声明这些标记，它的语法格式如下tagName{porperty:value;}首先是声明标签，在标签里面设置对应的属性和属性值，在CSS中设置的属性必须在CSS的范围内，不然就会导致语句不会生效。标记选择器会控制全部的同类标记，例如当声明了<h1>的样式为蓝色，那么页面所有的<h1>标签都..
复制链接

扫一扫