[英]CSS - Grouping Selectors AND pseudo classes
I have a bunch of selectors i'm wanting to group, which is easily done this way: 我有很多要分组的选择器,可以通过以下方式轻松完成:
.class1 #id1, .class2 #id2, .class3 #id3 { }
And I also want to apply psuedo classes on them. 我也想对它们应用伪类。
But is there a way to group multiple selectors, AND multiple pseudo classes without repeating myself? 但是,有没有一种方法可以对多个选择器和多个伪类进行分组而不重复我自己呢?
ie. 即。 I would like all the above elements, in either Link, Hover and Active states to have the same styling. 我希望以上所有元素在链接,悬停和活动状态下都具有相同的样式。 Do I have to do it like this? 我必须这样做吗?
.class1 #id1:link, .class2 #id2:link, .class3 #id3:link, .class1 #id1:hover, .class2 #id2:hover, .class3 #id3:hover, .class1 #id1:active, .class2 #id2:active, .class3 #id3:active {}
or is there a better way? 或者,还有更好的方法?
EDIT: 编辑:
I'd like to clarify my position. 我想澄清一下我的立场。 I have a list of links arranged something like this: 我有一些这样排列的链接列表:
<div class="NAV">
<a id="id1"></div>
<a id="id2"></div>
<a id="id3"></div>
<a id="id4"></div>
</div>
but class NAV
, is actually an interchangeable class name using <?php echo $current ?>
但是类NAV
实际上是使用<?php echo $current ?>
的可互换类名称<?php echo $current ?>
So my CSS reflects a scenario where NAV is either class1
, class2
, class3
OR class4
& one of the ids listed above are parent and child. 所以我的CSS反映了NAV是class1
, class2
, class3
OR class4
,上面列出的ID之一是父级和子级。 eg. 例如。 class1 > id1
So to create one style to reflect all scenarios I have to represent ALL scenarios and group them. 因此,要创建一种反映所有场景的样式,我必须代表所有场景并将其分组。 I was hoping there was a way to at least group the pseudo classes separately so I don't have to create 3 times the amount of elements for each link state. 我希望有一种方法可以至少将伪类分开分组,这样我就不必为每个链接状态创建3倍数量的元素。
As a general answer: Yes, you have to do this. 作为一个普遍的答案:是的,您必须这样做。 There's no better way. 没有更好的方法。 because your elements have different parents. 因为您的元素有不同的父母。
But consider the markup below: 但请考虑以下标记:
<div class="class1">
<div id="id1">
<div class="some-div"></div>
</div>
<div id="id2">
<div class="some-div"></div>
</div>
<div id="id3">
<div class="some-div"></div>
</div>
</div>
In this case you can select the elements like this: 在这种情况下,您可以选择以下元素:
.class1 > div:hover {
// your css rule...
}
And not effect div
's with class some-div
而且不影响div
与some-div
类
You can give the affected elements a unique class of their own. 您可以为受影响的元素提供自己独特的类。
<div class="class1">
<a id="id1" class="hoverable">xxx</a>
</div>
<div class="class2">
<a id="id3" class="hoverable">xxx</a>
</div>
<div class="class3">
<a id="id3" class="hoverable">xxx</a>
</div>
Then all you need for the CSS is 然后,您需要的CSS就是
.hoverable:link, .hoverable:hover, .hoverable:active {}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.