外链论坛

 找回密码
 立即注册
搜索
查看: 66|回复: 3

CSS的选取器

[复制链接]

3021

主题

148

回帖

9911万

积分

论坛元老

Rank: 8Rank: 8

积分
99119086
发表于 2024-6-30 04:59:06 | 显示全部楼层 |阅读模式

想要给HTML元素设置样式,首要必须找到这个元素。在CSS中,执行这个任务的便是选取器。CSS中的基本选取器有标记选取器、类选取器、id选取器、通配符(*)选取器、标签指定选取器(交集选取器)、后代选取器和并集选取器。

1、标记选取器(元素选取器)

标记选取器指的是运用HTML标记名做为选取器,

标记名 {属性1:属性值1; 属性2:属性值2; 属性3:属性值3;}

该语法中,所有的HTML标记名都能够做为标记选取器,如body、p、h2等等。

如下代码为标记h2添加样式:

<head> <style> h2 { font-family: Times New Roman; //设置文本的字体系列 color:rgb(184, 201, 87); //设置文本的颜色 font-size: 28px; //设置文本的体积 } </style> </head> <body> <h2>今天天气好晴朗,处处好风光!</h2> </body>

2、类选取

选取器,首要在元素中设置class属性,class属性的属性值便是类名,同期运用英文点号“.”进行标识,后面紧跟类名:

.类名 {属性1:属性值1; 属性2:属性值2; 属性3:属性值3;}
如下代码展示一个class属性为box的类选取器:
<head> <style> .box { width: 100px; //设置盒子宽 height: 100px; //设置盒子高 bac公斤round-color: #bfc; //设置盒子背景颜色 border:1px solid red; //设置盒子边框:宽1像素、实线、颜色为红色 } </style> </head> <body> <div class="box"> 我是一个盒子 </div> </body>

3、id选取

id选取器,首要在元素中设置id属性,id属性的属性值便是id名,同期运用“#”进行标识,后面紧跟id名:

#id名 {属性1:属性值1; 属性2:属性值2; 属性3:属性值3;}

重视:元素的id名是独一的,只能对应于文档中某一个详细的元素。

<head> <style> #btn { border-radius: 20%; border-color: greenyellow; width: 68px; height:38px; } </style> </head> <body> <button id="btn">请点击</button> </body>
回复

使用道具 举报

0

主题

1万

回帖

1

积分

新手上路

Rank: 1

积分
1
发表于 2024-8-20 07:44:58 | 显示全部楼层
楼主节操掉了,还不快捡起来!
回复

使用道具 举报

0

主题

959

回帖

0

积分

新手上路

Rank: 1

积分
0
发表于 2024-9-1 02:35:59 | 显示全部楼层
我完全同意你的观点,说得太对了。
回复

使用道具 举报

3053

主题

2万

回帖

9910万

积分

论坛元老

Rank: 8Rank: 8

积分
99108883
发表于 2024-10-24 12:07:58 | 显示全部楼层
谢谢、感谢、感恩、辛苦了、有你真好等。
回复

使用道具 举报

您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

站点统计|Archiver|手机版|小黑屋|外链论坛 ( 非经营性网站 )|网站地图

GMT+8, 2024-11-5 16:26 , Processed in 0.067079 second(s), 19 queries .

Powered by Discuz! X3.4

Copyright © 2001-2023, Tencent Cloud.