使用两个css属性选择器与* [英] using two css attribute selectors with *
问题描述
我有以下四种不同类型的body标记情况：
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'>
我想写一个css选择器，它将选择前两个body标签的EITHER，而不是最后两个，以及将单独选择最后两个主体标签情况的另一个选择器。我可以做这样的事情
body [class * = page-calendar-practices] [class * = games]
第二种情况？如何写第一种情况？
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. Can I do something like this body[class*=page-calendar-practices][class*=games] for the second case? How could I write the first case?
推荐答案
这四个例子中只有一个CSS类是唯一的。每个人都有以下4类之一：
There's only 1 CSS class that's unique to each of the four examples. Each of them has one of the 4 following classes:
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 {...}
选择最后两个：
.page-calendar-practices-2012-06-games,
.page-calendar-practices-all-games {...}
编辑
应用这个更一般的方式（类似于@Rob W的回答）。
Applying this more generally (similar to @Rob W's answer).
/* 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"] {...}
不幸的是，使用 [class $ = - ] 无法正常工作。类属性与使用此类型选择器的任何其他属性一样处理。
Unfortunately, using [class$="-games"] doesn't work. The class attribute is treated like any other attribute with this type of selector.
这篇关于使用两个css属性选择器与*的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
