1.继承

(1)样式应用于某个特定的HTML标签元素,而且应用于其后代。

(2)但某些标签不适用,如border;

(3)例子:p{color:red;}设置了颜色

<p class="first">

<p id="second">

效果一样。

2.特殊性

(1)当标签匹配多个样式,浏览器根据权值来判断适用哪种CSS样式,权值高就使用哪种。

(2)例子:

p{color:red;}
.first{color:green;}
<p class="first">三年级时,我还是一个<span>胆小如鼠</span>的小女孩。</p>
“胆小如鼠”显示的是绿色的字体。
(3)规则:

3.层叠

(1)层叠就是在html文件中对于同一个元素可以有多个css样式存在,当有相同权重的样式存在时,会根据这些css样式的前后顺序来决定,处于最后面的css样式会被应用。

(2)例子:

p{color:red;}
p{color:green;}
<p class="first">三年级时,我还是一个<span>胆小如鼠</span>的小女孩。</p>
(3)设置样式层次一致,最后文本显示绿色,后面覆盖了前面的。
4.重要性
(1)为某些样式设置最高权值,使用important解决。
(2)语法:p{color:red!important;}
(3)例子:
p{color:red!important;}
p{color:green;}
<p class="first">三年级时,我还是一个<span>胆小如鼠</span>的小女孩。</p>
(4)原来是绿色覆盖了红色,现在是红色覆盖了绿色,因为红色设置了最高权值。
 

CSS继承、层叠和特殊性的更多相关文章

  1. CSS选择器与CSS的继承,层叠和特殊性

    什么是选择器?选择器{样式;},在{}之前的部分就是"选择器","选择器"指明了{}中的"样式"的作用对象,也就是"样式" ...

  2. HTML+CSS学习笔记(9)- CSS的继承、层叠和特殊性

    标签:HTML+CSS 继承 CSS的某些样式是具有继承性的,那么什么是继承呢?继承是一种规则,它允许样式不仅应用于某个特定html标签元素,而且应用于其后代.比如下面代码:如某种颜色应用于p标签,这 ...

  3. CSS中的层叠、特殊性、继承、样式表中的@import

    CSS中的层叠.特殊性.继承.样式表中的@import 层叠 CSS有一个机制是层叠,层叠可以理解为对样式的覆盖,优先性为: 网站开发者的样式表 用户样式(通过设置浏览器的显示选项) 浏览器默认的样式 ...

  4. css继承和层叠

    在前面介绍了如何利用文档结构和css选择器为元素应用各种丰富的样式,今天来好好聊聊css的层叠和继承,先说说概念. 继承:一个元素向其后代元素传递属性值所采用的机制,说的通俗点,就是元素的某些属性可以 ...

  5. 精通CSS高级Web标准解决方案(1-2 层叠与特殊性)

     层叠与特殊性 选择器的特殊性分成四个等级,a.b.c . d 如果样式是行内样式,那么a=1 b=ID选择器的总数 c=类.伪类.属性选择器的总数 d=标签选择器与伪元素选择器数量 例如:style ...

  6. CSS的“层叠”规则的总结

    当你随机打开一个页面,查看源代码,你会发现,同一个元素,不止有一个CSS选择器及对应的样式.而一个元素只能应用一个样式,那么一堆样式中究竟是应用哪一个呢?这就涉及到CSS的层叠规则了.下面就来总结下C ...

  7. 关于css中层叠性的一点理解

    关于css层叠性的一点理解 标签(空格分隔): html css 我们平时在写css的时候会遇到这样的情况 <!DOCTYPE html> <html lang="en&q ...

  8. 谈谈一些有趣的CSS题目(四)-- 从倒影说起,谈谈 CSS 继承 inherit

    开本系列,讨论一些有趣的 CSS 题目,抛开实用性而言,一些题目为了拓宽一下解决问题的思路,此外,涉及一些容易忽视的 CSS 细节. 解题不考虑兼容性,题目天马行空,想到什么说什么,如果解题中有你感觉 ...

  9. CSS继承总结

    CSS的一个重要特征就是继承,它是依赖于祖先-后代的关系的.继承是一种机制,它允许样式不仅可以应用于某个特定的元素,还可以应用于它的后代. CSS可以继承的属性有: 1.文字相关:font-famil ...

  10. CSS+DIV入门第一天基础视频 CSS选择器层叠性和继承性

    大家好,我是小强老师, 现在网上的CSS+DIV视频,要么讲的太深,要么太浅,很多初学的同学们总是遇到困难,今天小强老师专门给大家准备了css课程的视频.带你从零基础学习CSS+DIV一直到能独立完成 ...

随机推荐

  1. \(?0\d{2}[) -]?\d{8}正则表达式的解释

    正则表达式30分钟出现了这样一个正则表达式:(?0\d{2}[) -]?\d{8} "("和")"也是元字符,所以需要转义. ?匹配零或一次 (? 表示 出现( ...

  2. weui 中的tabbar导航

    最近做微信的服务号项目,用的weui作为主要的ui,但是对于用惯了ele ui的开发者来说,文档貌似有点不友好.真是很让人头疼! 所以结合着自己做的项目,随便写一点东西. 比如说,tabbar导航的切 ...

  3. 集合 (set) 的增删改查及 copy()方法

    一.集合 1.集合的创建 set1 = set({1,2,'barry'}) set2 = {1,2,'barry'} print(set1,type(set1)) print(set2,type(s ...

  4. (转)Android Studio Error:Failed to resolve: com.android.support:appcompat-v7:25.1.0解决方案

    今天不知道为什么导入eclipse项目后就出现了错误,没导入之前是正常使用AS的 Error:(26, 13) Failed to resolve: com.android.support:appco ...

  5. Codeforces Round #300(A.【字符串,多方法】,B.【思维题】,C.【贪心,数学】)

    A. Cutting Banner time limit per test:2 seconds memory limit per test:256 megabytes input:standard i ...

  6. Codeforces Round #415 (Div. 2)(A,暴力,B,贪心,排序)

    A. Straight «A» time limit per test:1 second memory limit per test:256 megabytes input:standard inpu ...

  7. 解决在SecurecCRT登录后,发现方向键、backspace(退格键)、delete(删除键)为乱码的问题

    问题:使用securecrt ssh到linux之后,backspace(退格键),delete(删除键),以及4个方向键都为乱码,不能正常使用.按tab键也没有自动补全文件名. 即: 按Backsp ...

  8. Java集合系列[4]----LinkedHashMap源码分析

    这篇文章我们开始分析LinkedHashMap的源码,LinkedHashMap继承了HashMap,也就是说LinkedHashMap是在HashMap的基础上扩展而来的,因此在看LinkedHas ...

  9. javascript 对象-13

    对象 无序属性的集合,属性可以包含基本值.对象或者函数,简单理解为对象是若干属性的集合:我们常说的面向对象(oop)编程其实是指的一种编码的思想,简单理解为用对象来封装数据,利用封装.继承.多态对代码 ...

  10. 电脑打不开网页,使用dns优化下就可以了。

    通过电脑管家dns优化下就可以了.启用114DNS