CSS标签选择器与类选择器

倒霉男孩

于 2025-04-15 16:55:46 发布

阅读量645

点赞数 11

分类专栏： html+css学习笔记文章标签： css 前端

本文链接：https://blog.youkuaiyun.com/2401_86523075/article/details/147252361

版权

html+css学习笔记专栏收录该内容

42 篇文章

订阅专栏

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>