广告
返回顶部
首页 > 资讯 > 前端开发 > html >css如何设置权重
  • 559
分享到

css如何设置权重

css 2022-10-19 03:10:38 559人浏览 泡泡鱼
摘要

小编给大家分享一下CSS如何设置权重,相信大部分人都还不怎么了解,因此分享这篇文章给大家参考一下,希望大家阅读完这篇文章后大有收获,下面让我们一起去了解一下吧! 在css中,可以

小编给大家分享一下CSS如何设置权重,相信大部分人都还不怎么了解,因此分享这篇文章给大家参考一下,希望大家阅读完这篇文章后大有收获,下面让我们一起去了解一下吧!

在css中,可以使用“!important”语句来设置权重,该语句为开发者提供了一个增加样式权重的方法;语法格式“属性:属性值 !important;”。“!important”语句是对整条样式的声明,包括这个样式的属性和属性值。

教程操作环境:windows7系统、css3&&HTML5版、Dell G3电脑。

CSS权重

是指样式的优先级,有两条或多条样式作用于一个元素,权重高的那条样式对元素起作用,权重相同的,后写的样式会覆盖前面写的样式。

权重的等级

(1)!important,加在样式属性值后,权重值为10000

(2)内联样式,如:style=“”,权重值为1000

(3)ID选择器,如:#content,权重值为100

(4)类,伪类和属性选择器,如:content、:hover权重值为10

(5)标签选择器和伪元素选择器,如:div,p,:before权重值为1

(6)通用选择器( * ) 、子选择器(>)、相邻选择器(+)、同胞选择器(~)、权重值为0

css怎么设置权重?

在css中,可以使用“!important”语句来设置权重,该语句为开发者提供了一个增加样式权重的方法。

css权重值(重叠性)实例

  • css中有很多选择器,那在多个选择器都作用于同一个元素的情况下会出现什么效果呢?    代码

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title></title>
    <style type="text/css">
      p{
        color:red;
        font-size: 10px;
      }
      #wrap{
        color: deeppink;
        font-size: 30px;
      }
      .box{
        color:yellow;
        font-size: 50px;
      }
    </style>
  </head>
  <body>
    <p id="wrap">
       猜猜我是什么颜色
    </p>
  </body>
</html>
  • 执行可结果
    css如何设置权重

  • 小结  :  出现这种效果是因为浏览器是根据权重值来判断使用哪种css样式的,权重值高的它的优先级会越高,就会呈现那种css样式,id选择器的权重值为100>类选择器10>标签选择器1,所以最终结果为id选择器设置的样式

  • 示列二  代码

!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title></title>
    <style type="text/css">
      *{
          color: cyan;
      }
      div {
          color: yellow;
      }
    </style>
  </head>
  <body>
    <div>
        <p id="wrap">
        猜猜我是什么颜色
        </p>
    </div>
  </body>
</html>
  • 执行结果

css如何设置权重

  • 小结  : 继承元素是没有权重值的,所以最终结果为通用选择器设置的样式

  • 实例三   代码

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title></title>
    <style type="text/css">
      p{
          color: yellow;
      }
      *{
          color: cyan;
      }
    </style>
  </head>
  <body>
    <div>
        <p id="wrap">
        猜猜我是什么颜色
        </p>
    </div>
  </body>
</html>
  • 执行结果
    css如何设置权重

  • 小结 :   标签选择器的权重值是1,但是仍然大于通用选择器,所以最终结果为标签选择器设置的样式

  • 实例四  代码

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title></title>
    <style type="text/css">
      div p{
          color: yellow;
      }
      div>p{
          color: cyan;
      }
      p{
          color: red;
      }
    </style>
  </head>
  <body>
    <div>
        <p id="wrap">
        猜猜我是什么颜色
        </p>
    </div>
  </body>
</html>
  • 执行结果

css如何设置权重

  • 实例五  代码

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title></title>
    <style type="text/css">
      div>p{
          color: cyan;
      }
      div p{
          color: yellow;
      }
      p{
          color: red;
      }
    </style>
  </head>
  <body>
    <div>
        <p id="wrap">
        猜猜我是什么颜色
        </p>
    </div>
  </body>
</html>
  • 执行结果
    css如何设置权重

!important 提升权重值实例

我们在做网页代码时,有些特殊的情况需要为某些样式设置具有最高权重值,怎么办?比如我们知道内联样式的权重值是1000,比较大,那么我们可以使用!important来解决。

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>!important的使用</title>
        <style type="text/css">
            div{
                color:green !important;
            }
        </style>
    </head>
    <body>
        <div id="box" style="color:red;">
            <span>猜猜我是什么颜色</span>
        </div>
    </body>
</html>
  • 执行结果

css如何设置权重

  • 小结:  使用!important是一个坏习惯,应该尽量避免,因为这严重破坏了样式表中固有的权重值比较规则,使得在调试bug变得更加困难。当两条相互冲突的带有!important规则作用与同一个标签,那么拥有最大优先级的将会被采用。

什么情况下可以使用!important ?

  • 第一种

    • 你的网站上有一个设计了全站样式的css文件

    • 同时你或者你的小伙伴写了一些很差的内联样式

  • 第二种

    box p { color: blue; } p.awesome { color: red; }

    怎样才能使得文本的颜色变为红色?这种情况下,如果不适用!important.第一条规则永远大于第二条的规则。

总结

css如何设置权重

以上是“css如何设置权重”这篇文章的所有内容,感谢各位的阅读!相信大家都有了一定的了解,希望分享的内容对大家有所帮助,如果还想学习更多知识,欢迎关注编程网html频道!

--结束END--

本文标题: css如何设置权重

本文链接: https://www.lsjlt.com/news/70005.html(转载时请注明来源链接)

有问题或投稿请发送至: 邮箱/279061341@qq.com    QQ/279061341

本篇文章演示代码以及资料文档资料下载

下载Word文档到电脑,方便收藏和打印~

下载Word文档
猜你喜欢
  • css如何设置权重
    小编给大家分享一下css如何设置权重,相信大部分人都还不怎么了解,因此分享这篇文章给大家参考一下,希望大家阅读完这篇文章后大有收获,下面让我们一起去了解一下吧! 在css中,可以...
    99+
    2022-10-19
    css
  • css如何设置图片拉伸不重复
    这篇文章给大家分享的是有关css如何设置图片拉伸不重复的内容。小编觉得挺实用的,因此分享给大家做个参考,一起跟随小编过来看看吧。css设置图片拉伸不重复的方法:首先通过“background: url("../../../stat...
    99+
    2023-06-15
  • 如何重启亚马逊服务器设置权限
    打开控制面板(图1),然后选择“管理工具”。 在“管理工具”中,找到“服务”选项。 找到“Amazon Web Services”服务,右键单击它,然后选择“停止”。 在“停止Amazon Web Services”对话框中,选择“启动”...
    99+
    2023-10-27
    亚马逊 重启 权限
  • 如何使用CSS重置
    这篇文章将为大家详细讲解有关如何使用CSS重置,小编觉得挺实用的,因此分享给大家做个参考,希望大家阅读完这篇文章后可以有所收获。使用CSS重置(reset)css重置库如normalize.css已经被使用很多年了,它们可以为你的网站样式提...
    99+
    2023-06-27
  • 如何在css中设置图片不重复拉伸
    这篇文章将为大家详细讲解有关如何在css中设置图片不重复拉伸,文章内容质量较高,因此小编分享给大家做个参考,希望大家阅读完这篇文章后对相关知识有一定的了解。css的基本语法是什么css的基本语法是:1、css规则由选择器和一条或多条声明两个...
    99+
    2023-06-14
  • css中如何重置样式
    小编给大家分享一下css中如何重置样式,相信大部分人都还不怎么了解,因此分享这篇文章给大家参考一下,希望大家阅读完这篇文章后大有收获,下面让我们一起去了解一下吧!     1、css初...
    99+
    2022-10-19
    css
  • javascript如何设置css
    这篇文章给大家分享的是有关javascript如何设置css的内容。小编觉得挺实用的,因此分享给大家做个参考,一起跟随小编过来看看吧。JavaScript是什么JavaScript是一种直译式的脚本语言,其解释器被称为JavaScript引...
    99+
    2023-06-14
  • css如何设置transform
    这篇文章给大家分享的是有关css如何设置transform的内容。小编觉得挺实用的,因此分享给大家做个参考,一起跟随小编过来看看吧。css设置transform的语法是“transform: none|transform-functions...
    99+
    2023-06-15
  • 如何让css的权重变得更友好
    这篇文章主要介绍了如何让css的权重变得更友好的相关知识,内容详细易懂,操作简单快捷,具有一定借鉴价值,相信大家阅读完这篇如何让css的权重变得更友好文章都会有所收获,下面我们一起来看看吧。   技巧一:...
    99+
    2022-10-19
    css
  • css 图像不重复的设置方法
    这篇文章主要介绍css 图像不重复的设置方法,文中介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们一定要看完!css图像不重复的设置方法:首先创建一个HTML示例文件;然后引入一张背景图片;最后通过设置属性为“background-re...
    99+
    2023-06-06
  • css如何设置渐变
    这篇文章将为大家详细讲解有关css如何设置渐变,小编觉得挺实用的,因此分享给大家做个参考,希望大家阅读完这篇文章后可以有所收获。什么是csscss是一种用来表现HTML或XML等文件样式的计算机语言,主要是用来设计网页的样式,使网页更加美化...
    99+
    2023-06-14
  • css如何设置间距
    小编给大家分享一下css如何设置间距,希望大家阅读完这篇文章之后都有所收获,下面让我们一起去探讨吧!什么是csscss是一种用来表现HTML或XML等文件样式的计算机语言,主要是用来设计网页的样式,使网页更加美化。它也是一种定义样式结构如字...
    99+
    2023-06-14
  • css如何设置高宽
    这篇文章给大家分享的是有关css如何设置高宽的内容。小编觉得挺实用的,因此分享给大家做个参考,一起跟随小编过来看看吧。css的三种引入方式1.行内样式,最直接最简单的一种,直接对HTML标签使用style=""。2.内嵌...
    99+
    2023-06-14
  • css如何设置角度
    这篇文章给大家分享的是有关css如何设置角度的内容。小编觉得挺实用的,因此分享给大家做个参考,一起跟随小编过来看看吧。 在css中可以通过rotate函数设置角度,使用语法是“r...
    99+
    2022-10-19
    css
  • css如何设置实线
    小编给大家分享一下css如何设置实线,相信大部分人都还不怎么了解,因此分享这篇文章给大家参考一下,希望大家阅读完这篇文章后大有收获,下面让我们一起去了解一下吧! css设置实线的...
    99+
    2022-10-19
    css
  • css如何设置椭圆
    这篇文章主要讲解了“css如何设置椭圆”,文中的讲解内容简单清晰,易于学习与理解,下面请大家跟着小编的思路慢慢深入,一起来研究和学习“css如何设置椭圆”吧! css设置椭圆的方...
    99+
    2022-10-19
    css
  • css边距如何设置
    小编给大家分享一下css边距如何设置,相信大部分人都还不怎么了解,因此分享这篇文章给大家参考一下,希望大家阅读完这篇文章后大有收获,下面让我们一起去了解一下吧!css的选择器有哪些css的选择器可以分为三大类,即id选择器、class选择器...
    99+
    2023-06-14
  • css如何设置居中
    这篇文章主要介绍了css如何设置居中,具有一定借鉴价值,感兴趣的朋友可以参考下,希望大家阅读完这篇文章之后大有收获,下面让小编带着大家一起了解一下。css设置居中的方法:1、通过【margin: 0 auto; text-align: ce...
    99+
    2023-06-14
  • css如何设置图片
    本文小编为大家详细介绍“css如何设置图片”,内容详细,步骤清晰,细节处理妥当,希望这篇“css如何设置图片”文章能帮助大家解决疑惑,下面跟着小编的思路慢慢深入,一起来学习新知识吧。在css中可以使用background-image属性来设...
    99+
    2023-07-04
  • CSS中如何计算选择器的权重值
    这篇文章主要为大家展示了“CSS中如何计算选择器的权重值”,内容简而易懂,条理清晰,希望能够帮助大家解决疑惑,下面让小编带领大家一起研究并学习一下“CSS中如何计算选择器的权重值”这篇文章吧。CSS 选择器...
    99+
    2022-10-19
    css
软考高级职称资格查询
编程网,编程工程师的家园,是目前国内优秀的开源技术社区之一,形成了由开源软件库、代码分享、资讯、协作翻译、讨论区和博客等几大频道内容,为IT开发者提供了一个发现、使用、并交流开源技术的平台。
  • 官方手机版

  • 微信公众号

  • 商务合作