第二章 CSS 工作原理.pdfVIP

第⼆章 CSS ⼯作原理 在本章中作者主要讲解了 CSS 如何对 HTML 添加样式的，并且解释了层叠的⼯作机 制⽐如当元 的同⼀个属性被多次设置样式后到底应该选择何种样式，这就要靠 CSS 的层叠机制来决定最终应⽤哪种样式了。 每个 HTML 元 都有⼀组样式属性，这些属性涉及元 在⽂档流中显⽰时的不同⽅ ⾯，⽐如在⽂档流中的位置、边框、背景、颜⾊等等。CSS 就是⼀种先选择 HTML 元 ，然后设定选中元 CSS 属性的机制。CSS 选择符和要应⽤的样式构成⼀条 CSS 规则。 2.2 上下⽂选择器 上下⽂选择器的格式如下： 标签1 标签2 ｛ 声明｝ 其中标签2就是我们要选择的⽬标，⽽且只有在标签1是标签2的祖先元 （不⼀定是 ⽗级元 ）的情况下才会被选中。上下⽂选择器严格来讲应该叫 「后代组合式选择器 （Descendant Comninator Selector ）」。 还有⼀点要注意的是，上下⽂选择器以空格作为分隔符，⽽分组选择器则以逗号作为 分隔符，不要弄混。 2.3 特殊的上下⽂选择器 前⾯⼀节作者介绍的上下⽂选择器是以某个祖先元 作为上下⽂的，只要⽬标元 在 DOM 结构 「上游」存在这么⼀个祖先元 即可，⽆论这个祖先元 和⽬标元 隔了 多少层级都没有关系，但有的时候我们需要⽐ 「某个祖先元 」更具体的上下⽂，这 时候我们就可以使⽤⼀些特殊的选择器了，⽐如⾃选择器 、 紧邻兄弟选择器+、⼀ 般兄弟选择器 ~ 和通⽤选择器 *。 2.3.1 ⼦选择器 标签1 标签2 这⾥的标签2必须是标签1的⼦元 ，也就是说标签1必须是标签2的⽗元 ，⽽不能是 标签2的任何其他祖先元 。 2.3.2 紧邻兄弟选择器 + 标签1 + 标签2 在这⾥标签2必须紧跟在兄弟标签1的后⾯，否则⽆效。 2.3.3 ⼀般兄弟选择器 ~ 标签1 ~ 标签2 在这⾥标签2必须跟 （不⼀定要紧跟，只需在标签1的后⾯即可）在其兄弟标签1后 ⾯。 2.3.4 通⽤选择器 * * 通⽤选择器 * 是⼀个是⼀个通配符，代表⽂档流中的任意元 ，不过通⽤选择器 * 通 常会搭配⼀些其他选择器来使⽤，⽐如： section * 代表 section 的所有⼦元 ，不过⼀般情况下很少通过通配符来选择某个元 下的 所有⼦元 ，因为这涉及到浏览器性能问题，它会影响⽹页的渲染时间，我们写的时 候是从左到右写的，但是浏览器渲染却是从右到左的，就上⾯这段代码来说，浏览器 会先遍历所有的元 ，然后在找出哪些元 的⽗元 是 section，另外举⼀个例 ⼦，有选择器： div .container #main .article {} 浏览器在渲染时，先把所有类中包含 article 的元 取出来组成⼀个集合，然后对 每⼀个集合中的元 进⾏遍历，如果元 的⽗元 的 id 不为 main 则把元 从集合 中删去。 再然后从这个元 的⽗元 开始向上找，没有找到⼀个标签名为 div 并且 类名中有 container 的元 ，就把元 从集合中删去，直到匹配所有的条件，所以 在能不使⽤通配符的情况就尽量不要使⽤它。 2.4 ID 和类选择器 作者在这⼀节介绍了 id 和 class 选择器，为我们选择元 提供了另⼀种⼿段，利⽤ 它们可以不考虑元 在⽂档流中的层次结构，只要在元 中添加了 id 和 class 属性 和值，我们就可以通过它们的值来找到⽬标元 。 可以给 id 和 class 属性设定任何值，但不能以数字或者特殊符号开 头。 2.4.3 什么时候⽤ id 什么时候⽤ class id 的⽤途是在页⾯中唯⼀地标识元 ，所以每个页⾯中每⼀个 id 属性值都是独⼀⽆ ⼆的。⽽ class 的⽬的是为了标识⼀组具有相同特征的元 ，也就是说⼀个页⾯中 可以出现多个相同的类。 对于什么时候⽤ id 这个问题作者的观点是： 每⼀个顶级区域都应该添加⼀个 id，从⽽得到⾮常明确的上下⽂关系， 以便编写 CSS 时只选择嵌套在相应区域内的标签。 对于什么时候使⽤ class，由于 class 的⽬的是为了标识⼀组具有相同特征的元 ，所以如果当页⾯中有⼀组元 具有某种相同的特征，就应该毫不犹豫的时 候 class了。 但是这⾥也应该注意不要乱⽤类，避免造成类泛滥，例如： nav ul li class=boya hre =#Alan/a/li li class=g