使用两个带有 * 的 css 属性选择器答案

【问题标题】：using two css attribute selectors with *使用两个带有 * 的 css 属性选择器
【发布时间】：2012-06-26 04:51:09
【问题描述】：

我有以下四种不同类型的body标签情况：

<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标签案例而不是最后两个，另一个选择器将单独选择最后两个body标签案例。我可以做这样的事情吗 body[class*=page-calendar-practices][class*=games] 对于第二种情况？第一个case怎么写？

【问题讨论】：

不确定您所说的“情况”是什么意思。
此选择器将选择第一个和第二个示例，但不选择其他示例：.page-calendar-practices-2012-06, .page-calendar-practices。匹配条件是什么？
我将“情况”更改为“身体标签情况”。我正在尝试编写可用于为前两个提供特定样式和为后两个提供特定样式的 css 代码。
@user1015214 好吧，我的建议适用于这些示例。是不是有一个通用的用例，比如practice-XXXX-YY 之类的？
“身体标签情况”并没有更清楚。很明显，我们正在使用 body 标签。你需要解释他们是什么情况。正文标签具体包含哪些类？

标签： css css-selectors

【解决方案1】：

根据您的评论描述，您正在寻找以下选择器：

body:not([class*="-games"])

请参阅 the :not pseudo-class 和 attribute selectors。

【讨论】：

好吧，我忘了 :not 选择器。但是有没有办法在css中选择body:not([class*="-games"]):is([class*="page-calendar-practices"])？我知道没有 :is 选择器，但我希望能够让选择器仅选择类名中带有 -games 以及 page-calendar-practices 的那些。这将使选择器更加具体。
您可以指定多个属性条件，[key1="value1"][key2="value2"] 并计算出您需要的组合。
但是如果两个属性都是“类”，那会起作用吗？意思是，[class*=key][class*=key]？
是的，我测试了它，它工作正常。我修改了答案中的示例。仍然存在误报的可能性，但在实践中应该可以正常工作。

【解决方案2】：

四个示例中的每一个都只有 1 个 CSS 类。它们每个都有以下 4 个类之一：

page-calendar-practices-2012-06
page-calendar-practices
page-calendar-practices-2012-06-games
page-calendar-practices-all-games

在此基础上，选择前两个：

.page-calendar-practices-2012-06,
.page-calendar-practices {...}

并选择最后两个：

.page-calendar-practices-2012-06-games,
.page-calendar-practices-all-games {...}

编辑：

更普遍地应用这个（类似于@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"] {...}

很遗憾，使用[class$="-games"] 不起作用。类属性被视为具有此类选择器的任何其他属性。

【讨论】：

在this comment中，他说类名不一定等于...-2012-06。

【解决方案3】：

你总是可以链接它们而不是使用选择器。注意：我在这里使用了你所有的课程，但这些都是很长的陈述，可以/应该减少，但你必须自行决定这样做。

.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{}

【讨论】：