我们前面讲过一些基础选择器,也讲过将这些基础选择器组合在一起,形成相对复杂的选择器。但是我没讲完,还遗漏了两种组合。这两种比较新,我看了一下兼容性倒还是可以,就是基本上常见的浏览器都支持,再早的版本现在应该也遇不上了。不过因为比较新,所以用到的也不多,或者是想不起来用它们。
反正对于初学者,我不太建议在 CSS 中搞得非常复杂,因为可能把握不好。而且像今天所讲的这种选择器,不容易一下子知道它所选择的是哪一个元素,所以也算是一个潜在的混乱因素。这种情况只是一两个,当然容易把控,但是一个项目中的代码里,许多细节的因素交织在一起,你就要考虑怎么才能够把它们理整齐了,否则根本就把控不住。这就好像,如果只是一根数据线,再乱也乱不到哪里去;但是如果是机箱后面的 10 来根线就有些热闹;如果是服务器机柜后面的几百上千根线,如果不给它们理清楚,简直就无法管理。我们知道我们要写的内容肯定不是一两句代码,所以在最开始的时候就要非常留意这些不稳定的因素,把它们理整齐,这样的我们代码写完之后才不会混乱。比如慎用容易搞混的东西,比如加入清晰明确的注释,比如规范的命名,比如整齐的缩进……
好了,废话说的好像有点多了,其实就是凑凑篇幅(哎呀,不小心把实话说出来了呢
主要是因为这一章的内容非常的简单。首先我们知道什么是兄弟元素,就是这些元素拥有共同的父元素。同一个爸爸,所以互称兄弟。
先说相邻兄弟选择,选择器的写法是这样的:.a + .b
。就是用加号来连接两个基础选择器。它的意思是,元素 .a
后面紧跟着的兄弟元素如果符合 .b
这个选择器,则被选中。所以他选出来的最多是一个元素,当然也可能没有找到匹配的元素,就是 0 个。
还有一种,.a ~ .b
,使用波浪线进行连接,表示元素 .a
后面所有符合 .b
这个选择器的兄弟元素。这叫做通用兄弟选择器。
所以就是这样啦。我们所讲的这些选择器都是在 CSS 和 jQuery 中可以通用的,这样就不容易混乱。至于那些特例,反正初期也不怎么用的到,而且把各种方法灵活运用,没有它们也完全可以解决问题了。
暂无评论内容