CSS常用选择器

最新推荐文章于 2024-08-22 11:40:47 发布

品茶观山

最新推荐文章于 2024-08-22 11:40:47 发布

阅读量929

点赞数 15

文章标签： css

本文链接：https://blog.csdn.net/r1031953160/article/details/136691589

版权

本文详细介绍了CSS中常用的选择器，包括标签选择器、类选择器、id选择器、通配符选择器，以及符合选择器的各个类型，如后代选择器、子代选择器、并集选择器和伪类选择器。通过对这些选择器的理解和运用，可以更精确地定位和设置网页元素的样式。

摘要由CSDN通过智能技术生成

选择器

作用：查找标签，设置样式。

基础选择器：

（1）标签选择器

（2）类选择器

（3）id 选择器

（4）通配符选择器

标签选择器

标签选择器：使用标签名作为选择器->选中同名标签设置相同的样式。

例如：p ，h1 ，div ，a ，img ……

<style>
P{
  color:red;
}
</style>

特点：选中同名标签设置相同的样式，无法差异化同名标签的样式

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>标签选择器</title>
    <style>
        /* 特点：选中同名标签设置相同的样式，无法差异化同名标签的样式 */
        p{
            color: red;
        }
    </style>
</head>
<body>
    <p>这是p标签</p>
    <p>123456789</p>
    <p>321654987</p>
</body>
</html>

类选择器

作用：查找标签，差异化设置标签的显示效果。

步骤：

（1）定义类选择器-> . 类名

（2）使用类选择器->标签添加 class =“类名”

<style>
/*定义类选择器*/
.red{
  color: red;
}
</style>
<!--使用类选择器-->
<div class="red">这是 div 标签</div>

一个类选择器可以给多个标签使用

一个标签可以使用多个类名，class属性值写多个类名，类名用空格隔开

开发习惯：类名自定义，多个单词可以用 - 连接，例如：news-hd

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>类选择器</title>
    <style>
        /* 定义 */
        .red{
            color: red;
        }

        .size{
            font-size: 50px;
        }
    </style>
</head>
<body>
    <!-- 使用 -->
    <!-- 一个类选择器可以给多个标签使用 -->
    <p class=