使用两个带有*的CSS属性选择器
[英]using two css attribute selectors with *
问题描述
I have the following four different types of body tag situations: 
我有以下四种不同类型的身体标签情况：
<body class= 'not-front logged-in page-calendar two-sidebars page-calendar-practices-2012-06 section-calendar admin-menu'>
<body class= 'not-front logged-in page-calendar two-sidebars page-calendar-practices section-calendar admin-menu'>
<body class= 'not-front logged-in page-calendar two-sidebars page-calendar-practices-2012-06-games section-calendar admin-menu'>
<body class= 'not-front logged-in page-calendar two-sidebars page-calendar-practices-all-games section-calendar admin-menu'>
I want to write a css selector which will select EITHER of the first two body tag cases and NOT the last two, and an another selector which will select the last two body tag cases alone. 我想编写一个css选择器，它将选择前两个正文标签用例中的EITHER，而不是后两个，而另一个选择器将仅选择最后两个正文标签用例。 Can I do something like this body[class*=page-calendar-practices][class*=games] for the second case? 对于第二种情况，我可以做这样的事情吗？[class * = page-calendar-practices] [class * = games]？ How could I write the first case? 我该如何写第一种情况？
3 个解决方案
解决方案1
4 2012-06-24 19:58:45
According to your comment's description, you're looking for the following selector: 根据评论的描述，您正在寻找以下选择器：
body:not([class*="-games"])
See the :not pseudo-class and attribute selectors . 参见:not伪类和属性选择器 。
解决方案2
3 已采纳 2012-06-24 20:20:23
There's only 1 CSS class that's unique to each of the four examples. 这四个示例中只有一个CSS类是唯一的。 Each of them has one of the 4 following classes: 它们每个都具有以下4个类之一：
page-calendar-practices-2012-06
page-calendar-practices
page-calendar-practices-2012-06-games
page-calendar-practices-all-games
Based on that, to select the first two: 基于此，选择前两个：
.page-calendar-practices-2012-06,
.page-calendar-practices {...}
And to select the last two: 并选择最后两个：
.page-calendar-practices-2012-06-games,
.page-calendar-practices-all-games {...}
Edit: 编辑：
Applying this more generally (similar to @Rob W's answer). 更普遍地应用它（类似于@Rob W的答案）。
/* First two, if -games doesn't appear anywhere */
body[class*="page-calendar-practices"]:not([class*="-games"]) {...}
/* Last two, if -games does appear somewhere */
body[class*="page-calendar-practices-"][class*="-games"] {...}
Unfortunately, using [class$="-games"] doesn't work. 不幸的是，使用[class$="-games"]不起作用。 The class attribute is treated like any other attribute with this type of selector. 使用此类型的选择器，将class属性与其他任何属性一样对待。
解决方案3
0 2012-06-24 20:13:21
you could always chain them instead of using selectors. 您可以始终将它们链接起来，而不是使用选择器。 note: i used all of your classes here, but these are very long statements and could/should be reduced, but you'll have to do that at your discretion. 注意：我在这里使用了所有的类，但是这些语句很长，可以/应该减少，但是您必须自行决定这样做。
.not-front.logged-in.page-calendar.two-sidebars.page-calendar-practices-2012-06.section-calendar.admin-menu,
.not-front.logged-in.page-calendar.two-sidebars.page-calendar-practices.section-calendar.admin-menu{}
.not-front.logged-in.page-calendar.two-sidebars.page-calendar-practices-2012-06-games.section-calendar.admin-menu,
.not-front logged-in.page-calendar.two-sidebars.page-calendar-practices-all-games.section-calendar.admin-menu{}
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.