CSS选择器的优先级

最新推荐文章于 2024-09-14 17:04:32 发布

Belle_Daisy

最新推荐文章于 2024-09-14 17:04:32 发布

阅读量82

点赞数 1

分类专栏：前端文章标签： css 前端 Powered by 金山文档

本文链接：https://blog.csdn.net/Belle_Daisy/article/details/129209811

版权

前端专栏收录该内容

26 篇文章 0 订阅

订阅专栏

CSS选择器有哪些

id选择器类选择器元素选择器属性选择器[name=box] 伪类选择器.box:hover

伪类选择器的放置顺序是不能够颠倒的

:link :visited :hover :active

属性选择器的使用

<style>
    .site {
        background:blue;
    }
    [name='alink'] {
        color:#bfa;
    }
</style>
<body>
    <a href="#" class="site" name="alink">我是链接</a>
</body>

优先级

#id选择器>.class选择器

内联样式>#id选择器

!important>内联样式

伪类选择器>类选择器

属性选择器=类选择器那么执行越往后面放的

相同优先级的选择器，浏览器会选择器使用更靠后的选择器配置的属性

总结：

!important>内联样式>id选择器>伪类选择器>class类选择器=属性选择器>元素选择器

相同优先级的选择器，浏览器会选择器使用更靠后的选择器配置的属性

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

Belle_Daisy

关注关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
复制链接

分享到 QQ

分享到新浪微博

扫一扫

专栏目录

关于CSS选择器优先级的判断题附结果截图

09-25

理解CSS选择器优先级是编写高效、可维护CSS代码的关键。以下是关于CSS选择器优先级的一些详细说明：首先，CSS选择器的优先级由四个部分组成，每个部分对应一个权重值： 1. ID选择器（#id）：每个ID选择器的权重为...

css选择器优先级深入理解

12-13

掌握CSS选择器优先级对于精确控制网页样式和解决样式冲突至关重要。在编写CSS时，应尽量避免使用!important，因为它降低了代码的可读性和可维护性。合理运用选择器和优先级，可以使CSS代码更加简洁高效。

参与评论您还未登录，请先登录后发表或查看评论

css选择器优先级的问题

tttbbchfgg的博客

11-19

266

css选择器优先级的问题

css优先级调整-解决整体设置a:hover的方法

weixin_34390105的博客

01-10

698

2019独角兽企业重金招聘Python工程师标准>>> ...

CSS选择器优先级

热门推荐

qq_46133833的博客

04-30

5万+

CSS选择器优先级 （1）CSS选择器都有权重值，权重值越大优先级越高。内联样式表的权重值最高，值为1000。 id选择器的权重值为100。 class选择器的权值为10。类型（元素）选择器的优先级为1。通配符选择器的优先级为0。（2）当权值相等时，后定义的样式表要优于先定义的样式表。（3）在同一组属性设置中表有**“!important"**规则的优先级最大。后代选择器 CSS后代选择器指为某标签元素内的特定后代标签元素来定义其样式。在CSS后代选择器中，规则左边的选择器一端包含两个或多个

css选择器优先级计算

weixin_42686022的博客

01-17

355

C的值等于类选择器（.class）和属性选择器（a[href="https://www.baidu.com"]）和伪类选择器（:first-child）出现的总次数。D的值等于标签选择器（div,span,a）和伪元素选择器（::before,::after）出现的总次数。::first-letter ：用于选取指定选择器的首字母。::before : 选择器在被选元素的内容前面插入内容。::after : 选择器在被选元素的内容后面插入内容。::first-line ：选取指定选择器的首行。

css选择器优先级

樊小书生

10-30

520

最初接触css选择器优先级这一块的内容的时候，是以下面这张图为准：，按照上图进行计算，但是我昨天看了一篇文章发现这样算是错误的。文章地址：https://hacks.mozilla.org/2017/08/inside-a-super-fast-css-engine-quantum-css-aka-stylo/ 。他里面讲的css选择器是按照如下的这种方式计算优先级的：看到上面图我就突...

css选择器优先级排序

黄某人的爬坑之路

12-28

2220

css选择器优先级排序

CSS 选择器优先级

频繁记录

06-13

2173

CSS 选择器优先级

CSS选择器优先级顺序是什么

qf2019的博客

08-13

1万+

css的选择器有很多种，那么，自然而然的就会有优先级这一概念出现，所以，css选择器优先级顺序是怎样的呢?本篇文章将来给大家介绍css选择器优先级的排序，话不多说，我们来直接看正文内容。在看css选择器优先级顺序前，我们先来简单说说css基本选择器有哪些? 1.标记选择器(如：body,div,p,ul,li) 2.id选择器(如：id=“name”,id=“name_txt”) 3.类选择器(如：id=“name”,id=“name_txt”) 4.后代选择器(如：#head .nav ul li 从父

CSS选择器优先级，及权重计算规则

慢才后生

02-16

789

CSS选择器优先级，及权重计算规则

CSS 选择器优先级详解及实例演示

一起coding，一起嗨。

02-02

990

CSS 选择器优先级详解及实例演示

深入理解CSS选择器优先级

09-27

本文将深入探讨CSS选择器优先级，通过八个实例来帮助你更好地理解这个概念。首先，我们要明确一点，类的覆盖顺序并不取决于它们在HTML中的引用顺序，而是取决于它们在CSS文件中定义的顺序。例如，如果有两个类选择...

CSS——弹性盒子布局（display: flex）

懒羊羊大王的博客

09-14

973

Flexbox或者是弹性布局，它的全称叫做弹性盒子布局，那么它到底该如何实现呢？从我们熟悉的 display 属性开始。给元素添加 display: flex，该元素变成了一个弹性容器（flex container），它的直接子元素变成了弹性子元素（flex item）。那么我们该如何具体地操作使用呢？下面我们来进行细致深入的学习。

js的书写位置和css的书写位置的区别？为什么要这样写？

QQ1257871322的博客

09-10

436

这种分离方式有助于优化加载速度和页面渲染性能，使得 HTML、CSS 和 JavaScript 各司其职，各自处理不同的任务。JavaScript 用于添加页面的动态行为和交互。标签之前），以确保在执行脚本时页面的 DOM 元素已经加载完毕，从而避免脚本执行时无法找到需要操作的元素。CSS 主要用于控制页面的视觉样式和布局，通常在 HTML 文件的。部分引入，以确保在页面渲染时样式已经加载完毕，从而避免样式闪烁。标签中，或者在外部样式表文件中（标签中，或者在外部脚本文件中（

基于less和scss 循环生成css

最新发布

k0933的博客

09-14

162

【代码】基于less 循环生成css。

css 个人喜欢的样式速查笔记

waterHBO的博客

09-07

523

记录自己喜欢的，觉得比较好看的 css.下次用的时候，直接复制，很方便。

CSS“多列布局”（补充）——WEB开发系列35

一条晒干的咸鱼的博客

09-10

636

多列布局是一种非常常见的布局方式，适用于内容丰富的页面，如新闻网站、杂志或博客。

CSS基本语法结构

nice66660的博客

09-10

1290

*某某[属性|=属性值] 选择到有a标签,且有属性title,且属性值只有1个是link的或者属性值有多个但是得是link-开头的变 *//*某某[属性~=属性值] 选择到的是a标签且有class属性,且属性值有完整的itme词的变 *//*某某[属性=属性值] 选择到有某某标签有指定属性且属性值必须一模一样的，多一个空格都不行 *//*某某[属性^=属性值] a标签有class属性且属性值是li开头的 *//*某某[属性$=属性值] a标签有class属性且属性值结尾是t的变 */

css 选择器优先级

08-15

CSS选择器优先级是用来确定在多个选择器应用于同一个元素时，哪个选择器的样式规则将被应用。CSS选择器优先级由四个部分组成：内联样式、ID选择器、类和伪类选择器、元素和伪元素选择器。它们的优先级从高到低依次降低。具体的优先级规则如下： 1. 内联样式：使用style属性直接在HTML元素中定义的样式具有最高的优先级。 2. ID选择器：通过id属性定义的选择器具有较高的优先级。 3. 类和伪类选择器：包括类选择器（如.class）、属性选择器（如[type="text"]）和伪类选择器（如:hover）。 4. 元素和伪元素选择器：包括元素选择器（如div、p）和伪元素选择器（如::before、::after）。如果有多个选择器具有相同的优先级，那么后面定义的样式规则将覆盖前面的规则。如果在不同CSS文件中定义了相同的选择器，后面引入的文件中的规则将覆盖前面引入的文件中的规则。需要注意的是，使用!important声明的样式具有最高的优先级，应该谨慎使用，因为它会覆盖其他所有规则，可能导致样式冲突和难以调试的问题。在编写CSS时，应该尽量避免使用!important，并合理使用选择器优先级来管理样式。