CSS的选取器-外链论坛 - Powered by Discuz! Archiver

l14107cb 发表于 2024-6-30 04:59:06

CSS的选取器

想要给HTML元素设置样式，首要必须找到这个元素。在CSS中，执行这个任务的便是选取器。CSS中的基本选取器有标记选取器、类选取器、id选取器、通配符（*）选取器、标签指定选取器（交集选取器）、后代选取器和并集选取器。
<h2 style="color: black; text-align: left; margin-bottom: 10px;">1、标记选取器（元素选取器）</h2>
标记选取器指的是运用HTML标记名做为选取器，
<div style="color: black; text-align: left; margin-bottom: 10px;">标记名 {属性1:属性值1; 属性2:属性值2; 属性3:属性值3;}</div>
该语法中，所有的HTML标记名都能够做为标记选取器，如body、p、h2等等。
如下代码为标记h2添加样式：
<div style="color: black; text-align: left; margin-bottom: 10px;"><head>
 <style>
 h2 {
 font-family: Times New Roman; //设置文本的字体系列
 color:rgb(184, 201, 87); //设置文本的颜色
 font-size: 28px; //设置文本的体积
 }
 </style>
 </head>
 <body>
 <h2>今天天气好晴朗，处处好风光！</h2>
 </body>
</div>
<div style="color: black; text-align: left; margin-bottom: 10px;"><img src="https://pic3.zhimg.com/80/v2-054bd85512c47ca7c5a7fa06befc1d4e_720w.webp" style="width: 50%; margin-bottom: 20px;"></div>
<h2 style="color: black; text-align: left; margin-bottom: 10px;">2、类选取器</h2>
类选取器，首要在元素中设置class属性，class属性的属性值便是类名，同期运用英文点号“.”进行标识，后面紧跟类名：
<div style="color: black; text-align: left; margin-bottom: 10px;">.类名 {属性1:属性值1; 属性2:属性值2; 属性3:属性值3;}</div>如下代码展示一个class属性为box的类选取器：<div style="color: black; text-align: left; margin-bottom: 10px;"><head>
 <style>
 .box {
 width: 100px; //设置盒子宽
 height: 100px; //设置盒子高
 bac公斤round-color: #bfc; //设置盒子背景颜色
 border:1px solid red; //设置盒子边框：宽1像素、实线、颜色为红色
 }
 </style>
 </head>
 <body>
 <div class="box">
 我是一个盒子
 </div>
 </body>
</div>
<div style="color: black; text-align: left; margin-bottom: 10px;"><img src="https://pic4.zhimg.com/80/v2-2c6a2b4086a63b332618e77b929aee77_720w.webp" style="width: 50%; margin-bottom: 20px;"></div>
<h2 style="color: black; text-align: left; margin-bottom: 10px;">3、id选取器</h2>
id选取器，首要在元素中设置id属性，id属性的属性值便是id名，同期运用“#”进行标识，后面紧跟id名：
<div style="color: black; text-align: left; margin-bottom: 10px;">#id名 {属性1:属性值1; 属性2:属性值2; 属性3:属性值3;}</div>
重视：元素的id名是独一的，只能对应于文档中某一个详细的元素。
<div style="color: black; text-align: left; margin-bottom: 10px;"><head>
 <style>
 #btn {
 border-radius: 20%;
 border-color: greenyellow;
 width: 68px;
 height:38px;
 }
 </style>
 </head>
 <body>
 <button id="btn">请点击</button>
 </body>
</div>

情迷布拉格 发表于 2024-8-20 07:44:58

楼主节操掉了，还不快捡起来！

荔枝糖 发表于 2024-9-1 02:35:59

我完全同意你的观点，说得太对了。

4zhvml8 发表于 2024-10-24 12:07:58

谢谢、感谢、感恩、辛苦了、有你真好等。

4zhvml8 发表于 2024-11-12 04:31:11

你的见解真是独到，让我受益匪浅。

页: [1]

外链论坛's Archiver

CSS的选取器