CSS 选择器继承和层叠

CSS选择器及其继承特性、层叠特性
1.基本选择器
  标记  id  class  这个就不再作介绍了

2.复合选择器
  交集
 交集选择器由两个选择器直接连接构成，其结果是选中二者各自元素范围的交集
 其中第一个必须是标记选择器，第二个必须是类别选择器或者ID选择器，须连续书写
 如，div.class

并集
 并集选择器的结果是同时选中各个基本选择器所选择的范围，任何形式的选择器(包括
 标记、类选择器、ID选择器)都可作为并集选择器的一部分，它们之间用逗号相连
 如，div,class,h3,#nav

　后代
 DOM树中鉴于嵌套关系的存在，使用后代选择器可以非常方便的通过组合来给各个元素设置
 样式，而不需要给每个元素进行ID或类命名,使命名大大简化，并且条理清晰
 各种基本选择器均可自由组合，不受限制
 如  div class h3(意思为选中div下class下的h3)

子代
 子代选择器与后代的选择器的区别是使用大于号连接
 如div>span
注:后代与子代从效果上的区别是，后代选择器产生的影响不仅限于元素的“直接后代”，还影响到它

的“各级后代”;而子代的影响仅限于元素的选中后代本身

3.继承特性
 继承特性可一句话概括为子元素拥有父元素的所有CSS属性，哪怕子元素另行设置，那也只是
 另行设置覆盖了从父元素继承来的属性值

4.层叠特性
 层叠特性可概括为各样式间的优先级顺序
 行内样式>ID样式>类别样式>标记样式
 打个比方，当前元素设置了以上四种情况上不同的样式，那么最终显示的结果为行内样式的
 属性，如此，我们去掉行内样式，依次类推便显示ID、class的样式

时间： 2024-08-11 09:40:39

CSS 选择器继承和层叠的相关文章

CSS系列：CSS的继承与层叠特性

1. CSS的继承特性 所有的CSS语句都是基于各个标记直接的继承关系,CSS继承是指子标记会继承父标记的所有样式风格,并可以再父标记样式风格的基础上再加以修改,产生新的样式,而子标记的样式完全不会影响父标记. CSS的继承贯穿整个CSS设计的始终,每个标记都遵循着CSS继承的概念. 示例: <!DOCTYPE html> <html> <head> <title></title> <style type="text/css&qu

CSS 的继承、层叠和特殊性

继承 CSS的某些样式是具有继承性的,那么什么是继承呢? 继承是一种规则,它允许样式不仅应用于某个特定的HTML标签元素,而且应用于其后代. EX: p{color:red;} <p>测试CSS的<span>继承</span></p> 该段代码测试效果为:  测试CSS的继承 可见P文本和span中的文本都设置成了红色. 但是注意有一些CSS样式是不具有继承性的. EX: p{border:1px solid red;} <p>测试CSS的<

css的继承和层叠

标签(空格分隔): css css称为层叠样式表,CSS有两大特性:继承性和层叠性,本章简单介绍一下继承性: 继承性: 定义:继承就是给父及设置了一些属性,子级继承了父及的该属性,这就是我们的css的继承,有一些属性可以继承, <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>继承性</title> <

css的继承、层叠和特殊性

1,继承  css的某些样式是具有继承性的,那么什么是继承呢?继承是一种规则,它允许样式不仅应用于某个特定html标签元素,而且应用于其后代. 但注意有一些css样式是不具有继承性的.如border:1px solid red; 2,特殊性  有的时候我们为同一个元素设置了不同的css样式代码,那么元素会启用哪一个css样式呢?浏览器是根据权值来判断使用哪种css样式的,哪个权值高的就使用那种css样式. 权值规则:标签的权值为1,类选择器的权值为10,ID选择器的权值为100. 例如: p{c

html学习第二天—— 第九、十章——CSS的继承、层叠和特殊性+CSS格式化排版

继承CSS的某些样式是具有继承性的,那么什么是继承呢?继承是一种规则,它允许样式不仅应用于某个特定html标签元素,而且应用于其后代.比如下面代码:如某种颜色应用于p标签,这个颜色设置不仅应用p标签,还应用于p标签中的所有子元素文本,这里子元素为span标签.p{color:red;} <p>三年级时,我还是一个<span>胆小如鼠</span>的小女孩.</p>可见右侧结果窗口中p中的文本与span中的文本都设置为了红色.但注意有一些css样式是不具有继承

css的继承以及层叠

继承 1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>CSS的继承性</title> 6 <style> 7 .father { 8 color:red; 9 } 10 </style> 11 </head> 12 <body> 13 &

CSS选择器、层叠、继承的那些事

题外话 最近看了<精通CSS,高级web标准解决方案>这本书.所以接下来的几篇文章结合自己的理解,参照本书做一下总结. 好,废话不多说,开始进入正题. CSS的前世今生 在很久很久以前,早期的浏览器只支持简易版本的HTML,使用HTML添加基本的格式和结构.但是随着web的流行,人们开始不满足于只有结构和文本的样式了!! 看一下1999年搜狐的页面: 人都是爱美的,所以HTML开始用来表现页面了,这样一来就web领域就变得一团糟了,试想一下当你把所有的样式都装在同一个HTML文档的时候,是多么

CSS语法、选择器、继承、层叠

行内样式(内联样式) <h1 style="color:red;font-size:20px;">css行内样式</h1> 内部样式表(嵌入样式) <!-- -->解决低版本浏览器不识别style标签的情况 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Doc

css中的继承、层叠、样式优先级机制

一.继承与层叠: 注: 可继承的样式: font-size font-family color ul li dl dt dd; 不可继承的样式:border padding margin width height ; 二.样式优先级机制: 1.css中的选择器有如下几类: 1.id选择器( # myid) 2.类选择器(.myclassname) 3.标签选择器(div, h1, p...) 4.相邻选择器(h1 + p) 5.子选择器(ul > li) 6.后代选择器(li a) 7.通配符选