css选择器继承和层叠

ThisCall      2022-02-09     153

关键词:

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的样式



























css层叠性和继承性

1.了解css层叠性层叠性是什么?就是解决处理css选择器和属性冲突的能力。css的选择器权重是分大小,就是当多个选择器都选中了同一个标签时,听谁的???标签选择器<类选择器< id选择器 <行内式< !important... 查看详情

css选择器与css的继承,层叠和特殊性

什么是选择器?选择器{样式;},在{}之前的部分就是“选择器”,“选择器”指明了{}中的“样式”的作用对象,也就是“样式”作用于网页中的哪些元素,类似这样body{color:pink;font-size:16px;};:标签选择器其实就是html代码中的标签,比... 查看详情

继承性和层叠性

在前面的博客中已经列出了1.引入方式;2.基本选择器;3.高级选择器;4.属性选择器;5.伪类选择器。接下来我要把剩下的css知识点全写完!!!7.Css的继承性和层叠性Css有两大特性:继承性和层叠性继承性对父级设置的一些属... 查看详情

css选择器层叠继承的那些事

题外话最近看了《精通CSS,高级web标准解决方案》这本书。所以接下来的几篇文章结合自己的理解,参照本书做一下总结。好,废话不多说,开始进入正题。CSS的前世今生在很久很久以前,早期的浏览器只支持简易版本的HTML,... 查看详情

css选择器

...是说当数量相同时,通过层叠(后者覆盖前者)的样式。css选择符分类  首先来看一下css选择符(css选择器)有哪些?  1.标签选择器(如:body,div,p,ul,li)  2.类选择器(如:class="head",class="head_logo")  3.ID选择 查看详情

css选择器优先级总结

...是说当数量相同时,通过层叠(后者覆盖前者)的样式。css选择符分类  首先来看一下css选择符(css选择器)有哪些?  1.标签选择器(如:body,div,p,ul,li)  2.类选择器(如:class="head",class="head_logo")  3.ID选择器(如:id 查看详情

css选择器优先级(代码片段)

...是说当数量相同时,通过层叠(后者覆盖前者)的样式。css选择符分类  首先来看一下css选择符(css选择器)有哪些?  1.标签选择器(如:body,div,p,ul,li)  2.类选择器(如:class="head",class="head_logo")   查看详情

css的继承性和层叠式

...的、布局属性都不能继承。二、层叠式1、权重规则多个选择器同时作用在同一个元素上时候,看权重,那个高,最后显示那个,优先级从高到低分别是:ID选择器数量>类选择 查看详情

css的继承性和层叠式

...的、布局属性都不能继承。二、层叠式1、权重规则多个选择器同时作用在同一个元素上时候,看权重,那个高,最后显示那个,优先级从高到低分别是:ID选择器数量>类选择 查看详情

css学习摘要-层叠和继承

当有多个选择器作用在一个元素上时,哪个规则最终会应用到元素上?其实这是通过层叠机制来控制的,这也和样式继承(元素从其父元素那里获得属性值)有关。元素的最终样式可以在多个地方定义,它们以复杂的形式相互影响... 查看详情

css层叠的问题标准文档流伪类选择器

...的问题 CSS有两个性质:  1、继承性  2、层叠性:选择器的一种选择能力,谁的权重大就选谁   层叠性又分为:    1)、选不中:走继承性     (font、color、text、)     继承性的权重是0     ... 查看详情

html和css前端教程03-css选择器

...S层叠和继承3.1.浏览器样式3.2.样式表层叠3.3.样式继承4.CSS选择器4.1.选择器的总汇(1)基本选择器(2)复合选择器(3)伪元素选择器::(4)伪类选择器1.CSS定义层叠样式表2.创建CSS的三种方法2.1.元素内嵌(权重最高)<pstyle="color:red; 查看详情

css--基础结构层叠

权值:通配符*的权值为0,标签和伪元素的权值为1,类选择符,属性选择器或伪类的权值为10,ID选择符的权值为100,内联样式最高为1000。还有一个权值比较特殊--继承也有权值但很低,有的文献提出它只有0.1有的认为没有权值... 查看详情

html328

1.css复合选择器  1.标签指定式选择器  2.后代选择器   3.并集选择器   2.css层叠性和继承性  1.层叠性  2继承性     继承性不适合下列属性:   &n 查看详情

关于css层叠css继承css盒模型概述

一、CSS层叠在前端程序员对CSS编写的过程中,CSS选择器的作用是用来选中某个元素,并对当前的元素进行样式上的渲染,那么每一个选择器都有属于自己的一些解析规则。那我们今天所探讨的CSS层叠就是浏览器对多个样式的来源... 查看详情

0017css三大特性:层叠性继承性优先级

...的样式会有继承应用能写出CSS优先级的算法能会计算常见选择器的叠加值5.1CSS层叠性概念:所谓层叠性是指多种CSS样式的叠加。是浏览器处理冲突的一个能力,如果一个属性通过两个相同选择器设置到同一个元素上,那么这个时... 查看详情

css层叠的问题

...本无关的都不能继承继承性的好处:节省代码量2层叠性选择器的一种选择能力谁的权重大就选谁A选不中,走继承,(fomt,c 查看详情

css的特性之层叠性介绍

...大家介绍一下CSS的层叠性属性。CSS层叠性的概念:有多个选择器或一个选择器对某个或某几个标签中的多条样式进行选择,如果多个选择器都赋给某个或某几个标签相同属性,样式的作用范围发生了重叠CSS层叠性的体现:1.样式... 查看详情