我有一个项目,我对标记没有任何控制权.我正在寻找一种方法来选择紧跟在’class1’实例之后的’class2’的每个实例.以下策略有效,但在某些情况下,连续存在超过20个“class2”实例,我宁愿避免代码中出现这么大的混乱.
- .class1 + .class2,.class1 + .class2 + .class2,.class1 + .class2 + .class2 + .class2,.class1 + .class2 + .class2 + .class2 + .class2,.class1 + .class2 + .class2 + .class2 + .class2 + .class2
- // etc.
- {
- // Applied Styles
- }
……以下风格
- <div class="class1"></div>
- <div class="class2">Style Me!</div>
- <div class="class2">Style Me!</div>
- <div class="class2">Style Me!</div>
- <div class="class2">Style Me!</div>
- <p>Blah blah blah</p>
- <div class="class2">DO NOT STYLE ME</div>
- <div class="class2">DO NOT STYLE ME EITHER</div>
解决方法
这是在黑暗中使用新的刺：未选择@spudley建议.它看起来好像支持：
http://caniuse.com/#search=%3Anot.我希望语法是正确的.编辑欢迎.
其中大部分来自@ mookamafoob的解决方案.我没有提交编辑,以防@mookamafoob过早地使用：not selector.
http://jsbin.com/umivas/6/edit
- .class1 ~ .class2 + .class2 {
- color: red;
- }
- .class1 + .class2 {
- color: red;
- }
- .class1 ~ *:not(.class2) ~ .class2 {
- color: inherit;
- }
编辑：抱歉没有解释.最后一部分尝试选择任何不具有.class2的.class1兄弟元素,并将.class2的所有后续兄弟重置为原始状态.根据您使用的样式数量,这可能会有点疯狂.
