14.类选择器,id选择器,通配符选择器

最新推荐文章于 2024-09-12 16:43:23 发布

Little_Green1

最新推荐文章于 2024-09-12 16:43:23 发布

阅读量403

点赞数 13

分类专栏：前端文章标签：前端 html css3

本文链接：https://blog.csdn.net/Little_Green1/article/details/141169230

版权

前端专栏收录该内容

18 篇文章 0 订阅

订阅专栏

一.类选择器

类选择器可以差异化设置标签的显示效果,下面看看我们如何定义类选择器

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

        .size {
            font-size: 50px;
        }
    </style>
</head>

先打一点. 然后加上类名,类名自己喜好,但不要纯数字或中文,然后大括号,使用方法:在想添加CSS样式的标签内加class属性,然后属性值写类选择器的名字就好,比如

<p class="red">1111111</p>

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

<div class="red size">这是div标签</div>

类名之间用空格隔开就好.

二.id选择器

id选择器跟类选择器类似,但有区别,id选择器一个页面只能用一次,什么叫只能用一次,就是

<div id="red">这是div标签</div>
<div id="red">这个是第二个</div>

这个就是不可以的,将id选择器给了两个标签,具体为什么不可以,下面是我去问ai得到的结果:

CSS样式冲突：虽然CSS规范没有明确说明如何处理这种情况下的样式冲突，但实际上，由于id选择器的特异性（specificity）非常高，浏览器可能会尝试应用这些样式到所有具有相同id的元素上，但这并不是预期的行为，且可能导致不可预测的布局和样式问题。
JavaScript操作困难：在JavaScript中，通常使用document.getElementById()方法来通过id获取元素。如果页面上有多个相同的id，getElementById()只会返回第一个匹配到的元素，这可能会使得开发者难以准确地操作或访问其他具有相同id的元素。
可访问性和SEO问题：虽然这不是直接的技术问题，但重复的id可能会影响页面的可访问性（如屏幕阅读器可能无法正确解释重复的id）和搜索引擎优化（SEO），因为搜索引擎算法可能会基于id的唯一性来解析页面结构.

知道就好,那么id选择器怎么书写,我们用#加id名就可以了

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

然后使用时就在标签内加id属性,属性值写id选择器名字.

三.通配符选择器

这个用来查找页面所有标签,设置相同样式,会用来把标签的基本样式全部删除,然后我们自己来设置想要的样式,*加空格加大括号然后就可以编写CSS代码了

<!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>
        * {
            color: red;
        }
    </style>
</head>
<body>
    <p>这是p标签</p>
    <div>这是div标签</div>
    <h1>h1 标签</h1>
</body>
</html>

如有错误,欢迎指正