第一百五十章 兄弟选择器

我们前面讲过一些基础选择器,也讲过将这些基础选择器组合在一起,形成相对复杂的选择器。但是我没讲完,还遗漏了两种组合。这两种比较新,我看了一下兼容性倒还是可以,就是基本上常见的浏览器都支持,再早的版本现在应该也遇不上了。不过因为比较新,所以用到的也不多,或者是想不起来用它们。

反正对于初学者,我不太建议在 CSS 中搞得非常复杂,因为可能把握不好。而且像今天所讲的这种选择器,不容易一下子知道它所选择的是哪一个元素,所以也算是一个潜在的混乱因素。这种情况只是一两个,当然容易把控,但是一个项目中的代码里,许多细节的因素交织在一起,你就要考虑怎么才能够把它们理整齐了,否则根本就把控不住。这就好像,如果只是一根数据线,再乱也乱不到哪里去;但是如果是机箱后面的 10 来根线就有些热闹;如果是服务器机柜后面的几百上千根线,如果不给它们理清楚,简直就无法管理。我们知道我们要写的内容肯定不是一两句代码,所以在最开始的时候就要非常留意这些不稳定的因素,把它们理整齐,这样的我们代码写完之后才不会混乱。比如慎用容易搞混的东西,比如加入清晰明确的注释,比如规范的命名,比如整齐的缩进……

好了,废话说的好像有点多了,其实就是凑凑篇幅(哎呀,不小心把实话说出来了呢

主要是因为这一章的内容非常的简单。首先我们知道什么是兄弟元素,就是这些元素拥有共同的父元素。同一个爸爸,所以互称兄弟。

先说相邻兄弟选择,选择器的写法是这样的:.a + .b。就是用加号来连接两个基础选择器。它的意思是,元素 .a 后面紧跟着的兄弟元素如果符合 .b 这个选择器,则被选中。所以他选出来的最多是一个元素,当然也可能没有找到匹配的元素,就是 0 个。

还有一种,.a ~ .b,使用波浪线进行连接,表示元素 .a 后面所有符合 .b 这个选择器的兄弟元素。这叫做通用兄弟选择器。

所以就是这样啦。我们所讲的这些选择器都是在 CSS 和 jQuery 中可以通用的,这样就不容易混乱。至于那些特例,反正初期也不怎么用的到,而且把各种方法灵活运用,没有它们也完全可以解决问题了。

原文链接:https://www.ek58.com/archives/3826,转载请注明出处。

0

评论0

请先

没有账号? 注册  忘记密码?