web前端选择器整理

最新推荐文章于 2024-05-15 22:50:31 发布

VIP文章无妄之灾|

最新推荐文章于 2024-05-15 22:50:31 发布

阅读量662

点赞数

文章标签：前端

本文链接：https://blog.csdn.net/2201_75408313/article/details/131648682

版权

一、标签选择器

标签选择器是指用HTML标记名称作为选择器，按标记名称分类，为页面中某一类标签指定统一的CSS样式。

基本语法格式：标签名{

属性1：属性值1；属性2：属性值2；

}

所有的HTML标记名都可以作为标签选择器，例如a、body、p、h1等等。用标签选择器定义的样式对页面中该类型的所有标签都有效。

例子

使用p选择器定义HTML页面中所有段落的样式。

p { 
    font-size: 12px; 
    color: #666; 
    font-family:"微软雅黑"; 
}

标签选择器最大的优势是能快速为页面中同类型的标签统一样式，同时这也是它的缺点，不能设计差异化样式。

二、id选择器

id选择器使用‘#’进行标识，后面紧跟id名。

基本语法格式：#id名{

属性1：属性值1；属性2：属性值2；

}

该语法中，id名即为HTML元素的id属性值，大多数HTML元素都可以定义id属性，元素的id值是唯一的，只能对应于文档中某一个具体的元素。

例子

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>id选择器</title>
<style type="text/css">
    #bold {
            font -weight:bold; 
    }
    #font24 {
                font-size:24px; 
    }
</style>
</head>
<body>
<p id="bold">段落1: id="bold",设置粗体文字。</p>
<p id="font24">段落2: id="font24", 设置字号为24px。</p>
<p id="font24">段落3: id="font24", 设置字号为24px。</p>
<pid="bold font24">段落4: id="bold font24",同时设置粗体和字号24px。</p>
</body>
</html>

注意：同一个id不允许应用于多个标记，虽然很多浏览器并不会报错，但JavaScript等脚本语言调用id时会出错。另外，id选择器不支持像类选择器那样定义多个值。

三、类选择器

类选择器使用

最低0.47元/天解锁文章

无妄之灾|

关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
web前端选择器整理

类选择器最大的优点是可以为元素对象定义单独或相同的样式，而且多个标记可以使用同一个类名，可以实现为不同类型的标记指定相同的样式。上述选择器中，div 为祖先元素，p 为后代元素，其作用就是选择 div 元素的所有后代 p元素，不管 p 元素是 div 元素的子元素、孙辈元素或者更深层次的关系，都将被选中。后代选择器中的空格，是用来表示后代层级的，当然就不限于二级的。该语法中，id名即为HTML元素的id属性值，大多数HTML元素都可以定义id属性，元素的id值是唯一的，只能对应于文档中某一个具体的元素。
复制链接

扫一扫