首页 > 其他分享 >CSS全局关键字

CSS全局关键字

时间:2023-03-01 22:45:54浏览次数:61  
标签:父级 color unset initial 关键字 CSS 全局 css 属性

css的全局关键字有下面几个:

  • inherit : 继承父级属性
  • initial:将元素初始化成css的初始值
  • unset:继承和初始化元素
  • revert:还原到浏览器内置样式
  • all:代指所有css属性

下面分别说说这几个关键字的实际作用

inherit 继承父级属性

inherit可以继承父级属性,可以将某个属性设置为inherit,那么该属性就会继承父级元素属性

    <div class="father">父级容器
        <div class="children">子级容器</div>
    </div>
.father{
     color:red;
  }
.children{
     color: blue;  /*被父级覆盖*/
     color:inherit;  /*继承父级属性*/
}

按照执行顺序,color:blue会被覆盖,children下的inherit如果生效,则会继承父级的color属性,字体颜色会变为红色
在这里插入图片描述


initial 将元素初始化成css的初始值

<ul class="initial_ul">
    <li>initial部分</li>
    <li>疾风劲草</li>
    <li>东方不败</li>
    <li>西方求败</li>
</ul>
/* initial 将元素初始化成css的初始值 */
.initial_ul{
     font-size: 30px;
}
.initial_ul li:last-of-type{
     font-size: initial;
}

正常情况下,给ul设置字体大小为30px,那么li的字体大小也会继承为30px,这里设置最后一个li还原成css的初始值,下面是显示效果:
在这里插入图片描述


unset 关键字

unset关键字有两种情况,如果这个属性有从父级继承的值(这个属性默认可以继承,且父级有定义),则该属性为继承父级属性,如果这个属性没有从父级继承,那么这个属性会被重置为css初始属性。这里以dialog对话框举例,对话框有默认样式,这些样式我们是不想要的,可以使用all:unset进行批量重置。

<dialog open class="dialog_unset">unset对话框</dialog>

默认样式如下:
在这里插入图片描述
使用unset关键字重置

.dialog_unset{
       all : unset; /*重置初始属性*/
       /*这里写自定义的属性...*/
}

重置完后的效果:
在这里插入图片描述
其实unset就相当于inheritinitial的综合体,在有继承的情况下,类似于inherit;在无继承的情况下,类似于initial
unset可以应用于任何css属性。


revert还原到浏览器内置样式

其实revertinitial有点像,只不过initial == css初始属性,而 revert == 浏览器默认样式

<ul class="revert_ul">
    <li>让子弹飞</li>
    <li>楚门世界</li>
    <li>东方不败</li>
    <li>南辕北辙</li>
</ul>
/* revert关键字 */
.revert_ul{
      list-style-type: none;  /*取消li圆点*/
      list-style-type: revert; /*还原li为浏览器默认样式*/
}

正常情况下,这里设置了list-style-type: none之后,li的圆点应该被取消,但后面li被重置为浏览器默认样式,所以li的圆点会出现。
在这里插入图片描述


all 代指所有css属性

all的取值有四种:initialinheritunsetrevert
all属性为css全局关键字的其中之一,all代指当前代码块的所有属性。
需要注意:unicode-bididirection这两个属性不受all影响。

<div class="father_all">父级all
     <div class="children_all">子级all</div>
</div>
/* all关键字 */
.father_all{
     color: red;
     font-size: 30px;
}
.children_all{
     /*color : initial;*/  /*只还原color的初始属性*/
     all : initial; /*还原所有css属性为初始值*/
}

上述代码中,children_all继承了father_all所有属性,所以children_all的字体颜色为红色,字体大小为30px,但由于all : initial重置了children_all的所有属性,所以children_all的属性全部恢复成css的初始值。
上面的color : initial只能还原单个元素,而all为全部元素。
在这里插入图片描述


案例源码:https://gitee.com/wang_fan_w/css-diary

如果觉得这篇文章对你有帮助,欢迎点赞、收藏、转发哦~

标签:父级,color,unset,initial,关键字,CSS,全局,css,属性
From: https://www.cnblogs.com/wang-fan-w/p/17170187.html

相关文章

  • 路飞:路飞前端全局css,全局配置文件、配置axios实现前后台交互、安装vue-cookies、安装e
    目录一、路飞前端全局css,全局配置文件1.1整理项目1.2设置全局css1.3配置全局js二、配置axios实现前后台交互三、安装vue-cookies四、安装elementui五、安装bootstrap和j......
  • Java 关键字,标识符
    关键字(keyword)关键字是被Java语言赋予了特殊含义,用做专门用途的字符串(或单词)HelloWorld案例中,出现的关键字有class、public、static、void等,这些单词已经被Java定义......
  • 使用 CSS 替换表行颜色?
    我正在使用一个带有交替行颜色的表格。tr.d0td{background-color:#CC9999;color:black;}tr.d1td{background-color:#9999CC;color:black;}<table><trclas......
  • 前端项目全局样式借鉴
    首先,css的--前缀通常被用在类中,是CSS中对变量声明的前缀。:root{--rotate-arrow:0;--dropdown-height:0;--list-opacity:0;--translate-v......
  • css中的counter计数器
    作为程序猿,代码比什么都有说服力,嗯,所以废话不多说,直接看吧,认真看完了,就一定有收获(内容有点多,需要一点耐心哦,我是一点一点写的,咱也一点一点看呗)counter:是css计数器,只能跟co......
  • 2023-03-01 'react-natvie' 不是内部或外部命令,也不是可运行的程序 这个报错是因为你
    问题描述:想要初始化一个新的rn项目,执行【react-natvieinitmyApp--version0.68.2】,报错:'react-natvie'不是内部或外部命令,也不是可运行的程序原因:没有全局安装react-n......
  • CSS 列表
     CSS列表属性作用如下:设置不同的列表项标记为有序列表设置不同的列表项标记为无序列表设置列表项标记为图像列表在HTML中,有两种类型的列表:无序列表 ul -......
  • CSS 表格
     使用CSS可以使HTML表格更美观。CompanyContactCountryAlfredsFutterkisteMariaAndersGermanyBerglundssnabbköpChristinaBerglundSwedenCentr......
  • HTML页面自动清理js、css文件的缓存(自动添加版本号)
    在web项目开发过程中,我们经常会引用css、js文件,更新文件后常出现缓存问题(明明更改了代码,在浏览器上访问的时候却没有发生变化),这种情况我们通常采用以下两种解决方案:1、手......
  • css基础
    CSS导入方式 这种方式会导致CSS和HTML的耦合度高,不利于维护<style>标签在head,而不是body,如图,其中div是选择器,表示应用在<div>上,类似的有<span>等等可以在外部......