美文网首页
笔记《五》CSS的继承

笔记《五》CSS的继承

作者: Mae_grace | 来源:发表于2020-06-10 11:32 被阅读0次

(一)什么是继承?

一个选择器不仅作用域该选择器还作用与该选择器的子选择器

比如:

head中style:

p {

        color: red;

    }

body中:

<p class="first">三年级时,我还是一个<span>胆小如鼠</span>的小女孩</p>

效果:所有文字,不管是p内的还是span内的都是红色的。

(二)选择器的优先级

1、各个选择器的优先级

给div配置选择器和style 选择器设置

上述的效果是:div为style:orange

优先级:内联>ID>类>标签>通配

2、为什么会有:“内联>ID>类>标签>通配”的优先级呢?因为有权值

head的style中

.first{color:green;}

span{color:pink;}

#second{ color:blue;}

body中:

<p id="second" class="first">到了三年级下学期时<span>老师</span>提出了一个很简单的问题</p>

效果如下:老师为pink;其余的为blue;

原因如下:ID选择器的权重为100;类选择器的权重为10;标签选择器的权重为1;!important的权重最高。

所以,“老师”两个字的权重是:100+1

其余字的权重为100;

p{color:red;}/*权值为1*/

p span{color:green;}/*权值为1+1=2*/

.warning{color:white;}/*权值为10*/

p span.warning{color:purple;}/*权值为1+1+10=12*/

#footer .note p{color:yellow;}/*权值为100+10+1=111*/

!important的用法:

head中style内:

p{color:red!important;}

.first{color:blue}

body内

<p class="first">觉得客服接口的加实付</p>

效果:显示红色,因为!important的权重最高。

相关文章

  • CSS 自学笔记(中)

    传送门: CSS 自学笔记(上) CSS 自学笔记(中) CSS 自学笔记(下) 继承、层叠和特殊性 继承 CSS...

  • 笔记《五》CSS的继承

    (一)什么是继承? 一个选择器不仅作用域该选择器还作用与该选择器的子选择器 比如: head中style: p {...

  • CSS

    CSS规则 at 规则 CSS选择器 CSS选择器 继承与层叠 继承与层叠 CSS 属性 CSS 属性 CSS值 ...

  • CSS 继承属性

    本文为个人学习笔记,发表仅供参考,摘自继承属性 (inherited property ) 每个CSS 属性定义的...

  • CSS基础样式

    CSS继承 一、什么是CSS继承 CSS继承是指我们设置父级CSS样式时,父级及以下的子级都具有此属性。 二、不可...

  • HTML标签类型

    修改标签的显示类型 CSS属性 CSS属性-可继承属性 CSS属性-不可继承属性 CSS常用属性代码附录:

  • day04

    1.今天学到了 1.css样式的继承 继承:是子元素对父元素的继承 2.css可以继承的属性 3.css盒子模型 ...

  • 1.CSS选择的样式-第四章css继承、层叠、优先级

    1.CSS继承 从父元素那继承部分CSS属性继承好处:1.父元素设置样式,子元素可以继承部分属性2.减少CSS代码...

  • 2.CSS特性-CSS进阶

    二、CSS特性 CSS具有两大特性:继承性层叠性 1.继承性 CSS的继承性,指的是子元素继承父元素的某些样式属性...

  • HTML+CSS学习笔记 05

    一.CSS的特性 1.1 CSS属性的继承 CSS的有些属性是可以被继承的,何谓继承?一个元素如果没有设置某个属性...

网友评论

      本文标题:笔记《五》CSS的继承

      本文链接:https://www.haomeiwen.com/subject/sjputktx.html