css样式的继承性、层叠性、优先级

MkkHou 发布于2019-04-23 11:44 / 1691人阅读

摘要：一样式的继承性作用给父元素设置一些属性，子元素也可以使用应用场景一般用于设置网页上的一些共性信息，例如网页的文字颜色，字体，文字大小等内容。

一、css样式的继承性:

作用：给父元素设置一些属性，子元素也可以使用应用场景：一般用于设置网页上的一些共性信息，例如网页的文字颜色，字体，文字大小等内容。优化代码，降低工作量注意点： 1.并不是所有的属性都可以继承，、只有color/font-/text-/ line开头的属性才能继承； 2.在css的继承中，不仅仅是儿子可以继承，只要是后代都能继承 3.继承性中的特殊性 3.1 a标签的文字和颜色和下划线是不能继承父元素的——举例：


 
         < div>
              我是大标题
              我是超链接
               我是段落

（上面的代码，只有p继承了div设置的属性，而a标签是不能继承父元素的属性,颜色不会变红，下划线也不会被去掉）

3.2 h标签的文字大小也是不能继承父元素的(见上面代码，

标签中我是大标题不会继承
的 font-size:24px;属性，所以需要给
多带带写个css样式：h1{font-size:24px;}
应用场景：一般用于设置网页上的一些共性信息，例如网页的文字颜色，字体，文字大小灯内容格式： body{属性：值;} 二、层叠性比如p标签，给p标签设置id和class类名，选择器上选择p 和p的id或者class类名，设置相同的属性，就是层叠性三、优先级：（三一）作用：当多个选择器（比如选择p标签和p标签里设置的id或者class昵称），选中同一个标签，并且给同一个标签设置相同的属性时，如何层叠就优先级来确定。 2.优先级判断的三种方式 2.1 是否直接选中，直接选中指的是直接选中要设置css样式的标签，和标签的id或者class类名。（间接选中就是指的是继承性，比如选择
那里面的li继承ul的属性，就称为继承属性）如果是间接选中，谁离目标标签比较近就听谁的。 2.2是否是相同的选择器。如果是相同选择器，那么就是谁写在后面就听谁的。（比如给两个p标签设置css样式 p{color:blue} p{color:red｝那么就会以第二个p为标准，文字变成红色 2.3不同的选择器如果都是直接选中，并且不是相同类型的选择器，那么就会按照选择器的优先级来层叠 id>类>标签>通配符>继承>浏览器默认权重计算如果选择器里有直接选中和间接选中。哪怕是间接的选择器为id选择器，也会优先实行直接选中的效果

云服务器 GPU云服务器 html外部层叠样式 css的样式 html的css样式 java继承传递性

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/1085.html

上一篇：前端vue系列-起始篇 vue的基本认知

下一篇：a标签伪类选择器以及伪元素:hover的案例

CSS的三大特性

本文内容：层叠性继承性优先级权重计算方法（特异性）首发日期：2018-05-01 层叠性：层叠性是指当一个标签被设置了多个重复的样式的时候，一个属性会覆盖另外一个属性。比如：先给div设置背景颜色为红色，然后设置背景颜色为粉红色，那么最终颜色可能为红色，也可能为粉红色（明显的两种颜色设置不能并立，所以只为其一，这里没给出确定答案是因为还要考虑优先级...

duan199226 2019-04-23 13:46 评论0 收藏0
【译】CSS继承、层叠和全局作用域

摘要：相反的，提供了全局作用域和局部作用域。组成界面的分子的样式可以通过元素选择器定位。元素选择器的优先级很低，因此他们不会覆盖任何基于类选择器的样式。使用元素选择器有以下优点避免了的冗长没有冗余的类。最近学习到CSS的继承属性，正好看到这篇文章，便将它翻译出来。作者的思想，在平时的项目中或多或少都有用过，但是从来没有仔细去思考如何利用这些特性让代码更加优雅。我热爱模块化设计。长期以来，...

WilsonLiu95 2019-08-29 12:57 评论0 收藏0
CSS节选——选择器

摘要：，，层叠样式表，请留意层叠概念。为了区分伪类和伪元素，伪元素采用双冒号写法。常见伪类。常见伪元素。和伪元素的用法和下特有的，用于在渲染中向元素逻辑上的头部或尾部添加内容。CSS，cascading style sheet，层叠样式表，请留意层叠概念。 css3为了区分伪类和伪元素，伪元素采用双冒号写法。常见伪类——:hover,:link,:active,:targ...

番茄西红柿 2019-04-23 13:42 评论0 收藏0
【零基础入门】 css学习笔记（3）选择器与层叠性

摘要：，高级选择器后代选择器空格表示后代选择器就是的后代所有的。注意是后代，并不一定是儿子空格可以出现多次补充后代选择器中出现的东西很灵活，可以是标签，可以是名，可以是名后代选择器，就是一种平衡共性特性的平衡。一，选择器 1，基础选择器 1）标签选择器：div{ } ，选择的所有，而不是一个，用来描述共性。 2）类选择器：.class名{ } 多个元素可以同时属...

cppprimer 2019-08-29 15:43 评论0 收藏0
WEB前端 CSS

摘要：后代选择器，儿子选择器，毗邻选择器，弟弟选择器。后代选择器后代选择器标签选择器后跟标签后代，无论直属还是间接直属，直接后代毗邻后代中最近的一个弟弟，找到和自己同级的标签如通过多个选择器好到具体的标签。目录 WEB前端 CSS WEB前端 CSS TOC CSS简介 CSS引入方式 CSS结构 CSS选择器标签选择...

darry 2019-04-23 13:34 评论0 收藏0