当前位置：首页 > news >正文

CSS标签选择器与类选择器

news 来源：原创 2025/4/20 21:11:16

CSS标签选择器

标签选择器（元素选择器）是最基本的选择器之一，用于选择HTML文档中的特定标签元素并应用样式。它使用HTML标签名称作为选择器，选择匹配该标签的所有元素。
作用：通过HTML标签名选择元素

以下是CSS标签选择器的实例：
选择所有<p>元素并将其文字颜色设置为红色

p{color: black;
}

选择所有<h1>元素并将其字体大小设置为24像素：

h1{font-size: 24px;
}

选择所有<a>元素并将其文本装饰设置为无下划线：

a{text-decoration: none;
}

选择所有<ul>元素并将其列表样式设置为无圆点：

ul{list-style-type: disc;
}

选择所有<input>元素并将其边框设置为虚线：

input{border: 1px dashed #000;
}

实例展示

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>p{font-size: 124px;}h1{ color: red; }a{text-decoration: none;}</style>
</head>
<body><h1>标题</h1><p>段落</p><p>这是一个分段<a href="#">link</a></p>
</body>
</html>

CSS类选择器

CSS类选择器用于选择具有相同类名的HTML元素，并应用相应的样式。它使用 . 前缀名来选择具有相应类的元素。

以下是关于CSS类选择器的示例
选择所有具有类的container元素并将其背景颜色设置为灰色

.container {background-color: gray;}

选择所有具有类的highlight元素并将其文字颜色设置为黄色：

.highlight{color:yellow;}

选择所有具有多个类的元素，并同时应用样式：

.class.class2{font-weight: bold;text-decoration: underline;}

选择所有具有以特定前缀开头的类名的元素，并应用样式：

 [class^="prefix-"]{font-style: italic;}

以下是类选择器的示例，展示如何将样式应用到HTML页面：

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>.container {background-color: gray;}.highlight{color:yellow;}</style>
</head>
<body><div class="container"><h1>这是标题</h1><p class="highlight"> 这是一个分段</p><p>段落</p></div>
</body>
</html>