精华内容
下载资源
问答
  • 文字相关的样式可以被继承 布局相关的样式不能被继承:默认不能被继承,但是可以设置继承属性。设置方法是在需要继承父类的元素上添加 需要继承的属性名:inherit

    文字相关的样式可以被继承

    布局相关的样式不能被继承:默认不能被继承,但是可以设置继承属性。设置方法是在需要继承父类的元素上添加 需要继承的属性名:inherit
    在这里插入图片描述

    展开全文
  • css样式融合与类继承

    2021-08-04 06:02:24
    这种做法很常见,一般用于.title定义公共样式,title#{n}定义各自独有的样式。如果希望通过css-module来完成的话,代码大概是这样。import style from "./index.scss"但是会报错,因为官方的css-module只能接受一个...

    前言

    前一阵子用了一下css-module,有一个问题没有解决,那就是同样一个元素添加多个类名的情况。比如我想要这样的效果。这种做法很常见,一般用于.title定义公共样式,title#{n}定义各自独有的样式。

    如果希望通过css-module来完成的话,代码大概是这样。

    import style from "./index.scss"

    但是会报错,因为官方的css-module只能接受一个变量字符串。

    #1. 通过类名解决

    当时找到了两个解决方案。

    字符串拼接。

    但是这种方法好搓啊。。。肯定有更优雅的解决方案。

    2. react-css-module

    这个loader可以直接定义多个类名,具体参考这里

    #2. 通过样式继承解决

    后来跟别人交流这个问题的时候得出以下的帮助:

    官方说法,css-module在设计的时候就没打算支持多个类名,因为在他们看来,每一个元素应该像一个对象一样,只添加一个className值,至于样式的融合应该通过样式的继承来完成。

    嗯,细细想来,还是很有道理的。这样每个元素最多只有一个类名,简洁多了。

    scss的继承与占位符

    在我用scss的继承去实现它的时候发现一个有趣的问题。

    .title {

    height: 100px;

    }

    .title1 {

    @extend .title;

    background-color: blue;

    }

    .title2 {

    @extend .title;

    background-color: pink;

    }

    scss-lint会报语法警告,如下。

    7cefb9ec46f5dbdd0c8c42a771bf78b3.png

    查阅了一下,才发现scss的继承和占位符的细微区别。

    上面的scss代码会被编译成这样子。

    .title, .title1, .title2 {

    height: 100px;

    }

    .title1 {

    background-color: blue;

    }

    .title2 {

    background-color: pink;

    }

    但是如果我们不需要用到.title这个类呢?如果这个类唯一存在的作用就是抽象出公共的title1和title2那一部分呢?那么,用占位符要更好。

    // scss 写法

    %title {

    height: 100px;

    }

    .title1 {

    @extend %title;

    background-color: blue;

    }

    .title2 {

    @extend %title;

    background-color: pink;

    }

    编译之后是这样子的。

    .title1, .title2 {

    height: 100px;

    }

    .title1 {

    background-color: blue;

    }

    .title2 {

    background-color: pink;

    }

    区别在于不再有.title这个类了。

    展开全文
  • CSS选择器一级目录 一级目录

    四、CSS样式继承

    文字相关的样式可以被继承
    布局相关的样式不能被继承 ( 默认是不能继承的,但是可以设置继承属性 inherit 值 )

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Document</title>
        <style>
            div{width: 300px;height: 300px;border:1px red solid;color: red;font-size: 30px;}
            p{border:inherit;}
        </style>
    </head>
    <body>
        <div>
            <p>这是一个段落</p>
        </div>
    </body>
    </html>
    

    未设置inherit属性,仅文字相关样式继承:
    在这里插入图片描述
    设置inherit属性,布局相关样式继承:
    在这里插入图片描述
    注:文本相关属性:font-family,font-size,font-style,font-variant,font-weight,font,letter-spacing,line-height,text-align,text-indent,text-transform,word-spacing列表相关属性:list-style-image,list-style-position,list-style-type,list-style还有一个属性比较重要,color属性。都可被继承。

    五、CSS优先级

    我们可以通过不同选择器对同一个元素进样式设置,当产生相同样式时,谁的优先级更高?

    1. 相同样式优先级
        当设置相同样式时,后面的优先级较高,但不建议出现重复设置样式的情况。
        
    2. 内部样式与外部样式
        内部样式与外部样式优先级相同,如果都设置了相同样式,那么后写的引入方式优先级高。
        
    3. 单一样式优先级
        style行间 > id > class > tag > * > 继承
    	<div id= class= style=>
    	
    	等级关系(对后期更复杂的优先级判断有帮助)
        注:style行间 权重 1000
                  id 权重 100
               class 权重 10
                 tag 权重 1
                 
     4. !important
        提升样式优先级,非规范方式,不建议使用。( 不能针对继承的属性进行优先级的提升)
      
     5. 标签+类与单类
        标签+类 > 单类 
    	
     6. 群组优先级
    	群组指div,p{}。
        群组选择器与单一选择器的优先级相同,靠后写的优先级高。
        
     7. 层次优先级
        (1) 权重比较
            ul li .box p input{}   1 + 1 + 10 + 1 + 1
            .hello span #elem{}    10 + 1 + 100
    
        (2) 约分比较    
            ul li .box p input{}  约分完  li p input{}
            .hello span #elem{}    约分完  #elem{}
    
    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Document</title>
        <!-- <link rel="stylesheet" href="./base.css">
        <style>
            div{color:red;}
        </style> -->
    
        <style>
            /* #elem{color: red;} */
            /* .box{color: blue;} */
            /* div{color: green;} */
            /* *{color: red;}
            body{color: blue;} */
            /* #elem{color: red !important;} */
    
            /* div.box{color: blue;}
            .box{color: red;} */
            
            div{color: blue;}
            div,p{color: red;}
            
        </style>
    </head>
    <body>
        <!-- <div id="elem" style="color: blue;">这是一个块</div> -->
        <!-- <div id="elem" class="box">这是一个块</div> -->
        <!-- <div id="elem" style="color: blue;">这是一个块</div> -->
        
        <div class="box">这是一个块</div>
        <p>这是一个段落</p>
    </body>
    </html>
    

    注:这时利用!important可以把id样式优先级提前,但对继承无效;
    写层次选择器时层次尽量少,三层就行了

    展开全文
  • css样式继承、覆盖

    2021-02-01 15:21:59
    哪属性会被继承。 文本 color,颜色a元素除外 direction,方向 -font 字体 font-Family. 字体系列 font-style 字体风格 font-size 字体大小 font-weight 字体粗细 letter-spancting 字母间距 line-height 行高 text ...

    首先我们梳理一下。哪属性会被继承。

    文本

    • color,颜色a元素除外
    • direction,方向
    • -font 字体 font-Family. 字体系列
    • font-style 字体风格
    • font-size 字体大小
    • font-weight 字体粗细
    • letter-spancting 字母间距
    • line-height 行高
    • text -align 对齐方式
    • text-indent首行缩进量
    • text-transform 大小写修改
    • visibility可见性
    • white-space 指定任何处理表格
    • Word-spacing 字符间距

    列表

    • list-style 列表样式
    • list-style-image 列表指定样式图片
    • list-style-position列表标记位置等等

    css样式继承

    页面布局的时候。往往采用的是分级布局。如果对每一块内容均单独进行样式编辑,修改会非常麻烦,而且调试困难。

    • 样式继承不是一个默认行为,而是看那一个属性的默认行为,是否是inherit。浏览器默认样式 a标签的color浏览器默认样式不是inherit
    .abstract{
           color:grey;
    }
    .abstract a{
    color:inherit;
    text-decoration:none;
    border:thin black;
    }
    .different {
    color:red;
    }
    .different a{
    text-decoration:none;
    border:thin black solid;
    }
    

    在这里插入图片描述

    • 前面讲到外部文件引用css的优先级比style标签里的低 但是id选择器的优先级比元素选择器的要高 所以当元素选择器和id选择器都命中相同元素的时候id选择器的样式会覆盖元素选择器的样式
    h1{
    color:red;
    }
    #change{
    color;blue;
    }
    

    样式的覆盖

    规则:

    • 根据引入方式来确定优先级
    • 后写的覆盖先写的(同一级别)
    • 加有"!important"的样式优先级最高,即使无论哪一种情况只要样式加了important那么该样式的优先级最高。
    p{
    color: white !important;
    }
    
    • 我们知道内联样式的优先级最高我们通过!important来进行覆盖
    <body>
    <h1 id="change" style="color:grey">
        helloword,你看到的是已经经历了三次变换的文字。
    </h1>
    </body>
    
    h1{
    color:red;
    }
    #change{
    color: white !important
    }
    
    • 选择器优先级 在选择器不同的情况下给每一种选择器指定一个权值,计算一个元素的所有选择器的总权值,值高者获胜

    元素选择器:1
    类选择器:10
    id选择器:100
    内联选择器:1000

    展开全文
  • 文本相关\列表相关的可以继承 宽度\高度\背景\边框\margin\padding\浮动是不可以继承 宽度不可以继承是因为默认宽度是盛满的 背景颜色也不可以继承,之所以能看到是因为每个标签默认都是带有透明色 ...
  • 一、css样式继承 1、样式继承只能被选择的标签内部的子孙标签继承,可以方便代码开发 2、background-color样式不能被继承,背景样式会造成内部标签背景样式混乱 二、选择器权重(优先级) 解释:当多个选择器选中...
  • CSS 样式继承规则 宽高的继承 宽度 子元素对父元素继承(子元素默认100%宽度) 高度 父元素会被子元素撑开 与文本相关样式,子元素默认会继承父元素 当 固定定位(fixed)和绝对定位(absolute)时,子...
  • 继承 属性
  • Web前端开发笔记-----9.css样式继承 文章目录Web前端开发笔记-----9.css样式继承一、css样式继承二、css优先级 一、css样式继承 css样式继承: 文字相关的样式可以被继承 如:字体样式,颜色 布局相关的样式不能被...
  • 有些时候,CSS继承了父元素的样式会很麻烦。请问有何方法可以清空继承样式?如何让css继承样式?目前只能通过覆盖的方式清空样式这个问题应该在写css的时候考虑到后面的问题一般只有通用的样式,和结构固定的...
  • 不可继承的 display、margin、border、padding、background、height、min-height、max- height、width、min-width、max-width、overflow、position、left、right、top、 bottom、z-index、float、clear、table-...
  • 更新3解决方案是在内容周围添加一个内容框,让他拥有滚动条.HTMLHEADERACTIONS CSS.lightbox img {margin-top: 2%;}.viewer-v3.lightbox {overflow: auto;display: block;position: fixed;z-index: 9999;width: 100%;...
  • 继承 <body> <p> 我是p元素 <span>我是p里面的span</span> </p> ​ <span>我是p元素外面的span</span> </body> ​ <style> p{ color:red; .....
  • CSS样式继承

    2020-12-30 08:43:34
    CSS样式继承指的是,特定的CSS属性向下传递到子孙元素,会被继承下去的属性: b.文本相关:font-family,font-size, font-style,font-variant,font-weight, font,letter-spacing,line-height,color c. ...
  • .green-flag {width: 2rem;height: 2rem;padding: 0.375rem;border-radius: 0.25rem;user-select: none;...}.green-flag:hover { //冒号:的含义是此样式的不同状态下background-color: $motion-l...
  • 什么是css继承

    2021-06-26 02:44:22
    CSS继承是指设置上级(父级)的CSS样式,上级(父级)及以下的子级(下级)都具有此属性。css继承性:继承性是指被包在内部的标签将拥有外部标签的样式性,即子元素可以继承父元素的属性。继承是一种规则,它允许样式不仅...
  • CSS样式继承

    2021-01-06 15:49:06
    CSS样式继承指的是,特定的CSS属性向下传递到子孙元素,会被继承下去的属性: b.文本相关:font-family,font-size, font-style,font-variant,font-weight, font,letter-spacing,line-height,color c. ...
  • 白板的微信百度:Tailwind这套CSS框架,可以满足你类似的需求;12345678910111213Button  .btn {    @apply .font-bold .py-2 .px-4 .rounded;  ...
  • CSS样式继承和覆盖

    2021-12-08 10:01:27
    样式继承和覆盖
  • 花事了l2017-03-12 09:15已采纳不可继承的:display、margin、border、padding、background、height、min-height、max-height、width、min-width、max-width、overflow、position、left、right、top、bottom、z-...
  • css样式继承

    2021-05-07 18:43:43
    继承 <!DOCTYPE html> <html lang="zh"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=...
  • 上一节介绍了样式的五种来源,咱们再通过一张图回顾一下。对于上面的三层,咱们大概都比较熟悉了。下面的两层中,用户自定义样式一般也就是改一改字号大小和字体样式,也没甚好说的。而最有的说的就是浏览器的默认...
  • [css] 如何取消从父级元素继承下来的CSS样式呢? 如果是恢复单个属性样式,例如font-size,可以使用 font-size: initial; 如果是将所有属性样式恢复为默认状态,可以使用 all: initial; 个人简介 我是歌谣,欢迎和...
  • CSS - 样式继承与覆盖

    2021-06-13 04:59:39
    样式继承(分类)文本相关属性font-family, font-size, font-style,font-variant, font-weight, font, letter-spacing,line-height, text-align, text-indent, texttransform,word-spacingfont-size是比较特殊的,他...
  • 所以我使用以下方法创建一个带圆角的容器: div.rounded { background: #CFFEB6 url('tr.gif') no-repeat top right; } div.rounded div { background: url('br.gif') no-repeat bottom ... 如何删除继承的背景图片?
  • 继承样式: font-size ,font-family color, UL LI DL DD DT; 不可继承样式:border, padding, margin ,width ,height ;
  • 编写一段时间的html网页,借鉴和总结了一些css样式,下面我把一些通用的css样式搬了过来,希望以后直接来搬去节省时间,虽然通用样式一讲得比较详细,但个人建议用后边的通用模板通用样式01@charset "utf-8";...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 79,316
精华内容 31,726
关键字:

css样式继承