前端应用_css_样式选择器以及应用

最新推荐文章于 2024-08-29 00:05:53 发布

上海_彭彭

最新推荐文章于 2024-08-29 00:05:53 发布

阅读量241

点赞数

CC 4.0 BY-SA版权

分类专栏： css 文章标签： css 选择器

本文链接：https://blog.csdn.net/qq_34979346/article/details/97177750

css 专栏收录该内容

12 篇文章

订阅专栏

本文深入讲解CSS中的标签、ID、类及层级选择器的使用方法，通过实例展示如何精确控制网页样式，适用于初学者和进阶用户。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

标签选择器

前面一节都是标签选择器的应用，这里暂时不写了，链接如下
标签选择器

id选择器

#id{color:red}

id 选择器

示例如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <!-- 这是注释的格式-->
    <style>
    #text{color:red;}
    #text2{color:green;}
    #text3{color:blue;}
</style>

</head>
<div id="text">
大家都知道 css 的语法格式为 标签名字{key：value ， key：value}   这样的形式保存的， 但是我们 如何引用这个 css 呢，  一
</div>
<div id="text2">
大家都知道 css 的语法格式为 标签名字{key：value ， key：value}   这样的形式保存的， 但是我们 如何引用这个 css 呢，  一
</div>
<div id="text3">
大家都知道 css 的语法格式为 标签名字{key：value ， key：value}   这样的形式保存的， 但是我们 如何引用这个 css 呢，  一
</div>
</html>
</body>
</html>

类选择器是应用最多的一种

特点：一个类可以应用到多个元素，一个元素也可以应用多个类，灵活的应用，
id 选择器不能应用多个，因为 id 不能重复。一般用的很少。
举例子为：

.red{color:red}
.big{	font-size:20px}
.mt10{margin-top:10px}
<div class="red">...</div>
<h1 class="red big mt10">....<h1>
<p class="red mt10">

示例代码为：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <!-- 这是注释的格式-->
    <style>
    .red{color:red}
    .big{font-size:20px}
    .mt10{margin-top:10px}
</style>

</head>
<div id="text" class="red">
大家都知道 css 的语法格式为 标签名字{key：value ， key：value}   这样的形式保存的， 但是我们 如何引用这个 css 呢，  一
</div>
<div id="text2" class="red big">
大家都知道 css 的语法格式为 标签名字{key：value ， key：value}   这样的形式保存的， 但是我们 如何引用这个 css 呢，  一
</div>
<div id="text3"  class="red big mt10">
大家都知道 css 的语法格式为 标签名字{key：value ， key：value}   这样的形式保存的， 但是我们 如何引用这个 css 呢，  一
</div>
</html>
</body>
</html>

层级选择器

为什么要有层级选择器呢，我举个例子

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <!-- 这是注释的格式-->
    <style>
    .red{color:red}
    .big{font-size:20px}
    .mt10{margin-top:10px}
    em{color:green; font-style:normal;}  <!--重写了em样式-->
</style>

</head>
<div id="text" class="red">    <!--使用了重写em-->
    大家都知道 css 的语法格式为<em> 标签名字</em>{key：value ， key：value}   这样的形式保存的， 但是我们 如何引用这个 css 呢，  一
</div>
<div id="text2"> <!--又使用了em ， 我有个问题，就是我不想用重写的em ，如何实现了，还想用原始的em ，这个就用到了层级-->
    大家都知道 css 的语法格式为 <em>标签名字</em>{key：value ， key：value}   这样的形式保存的， 但是我们 如何引用这个 css 呢，  一
</div>
<div id="text3"  class="red big mt10">
大家都知道 css 的语法格式为 标签名字{key：value ， key：value}   这样的形式保存的， 但是我们 如何引用这个 css 呢，  一
</div>
</html>
</body>
</html>

层级的写法是：
.clsssname em{color:red}

当用的时候先给标签加个class 路径，然后在里面写 em 就可以用到上边的层级选择器了，

我有个问题，就是我不想用重写的em

当我们不用class=“classname” ，时候就是用默认的 em。

示例代码如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <!-- 这是注释的格式-->
    <style>
    .red{color:red}
    .big{font-size:20px}
    .mt10{margin-top:10px}
    .red em{color:green; font-style:normal;}  
</style>

</head>
<div id="text" class="red">
    大家都知道 css 的语法格式为<em> 标签名字</em>{key：value ， key：value}   这样的形式保存的， 但是我们 如何引用这个 css 呢，  一
</div>
<div id="text2">
    大家都知道 css 的语法格式为 <em>标签名字</em>{key：value ， key：value}   这样的形式保存的， 但是我们 如何引用这个 css 呢，  一
</div>

</html>
</body>
</html>