使用两个带有*的CSS属性选择器
[英]using two css attribute selectors with *
问题描述
我有以下四种不同类型的身体标签情况：
<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选择器，它将选择前两个正文标签用例中的EITHER，而不是后两个，而另一个选择器将仅选择最后两个正文标签用例。 对于第二种情况，我可以做这样的事情吗？[class * = page-calendar-practices] [class * = games]？ 我该如何写第一种情况？
3 个解决方案
解决方案2
3 已采纳 2012-06-24 20:20:23
这四个示例中只有一个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"]不起作用。 使用此类型的选择器，将class属性与其他任何属性一样对待。
解决方案3
0 2012-06-24 20:13:21
您可以始终将它们链接起来，而不是使用选择器。 注意：我在这里使用了所有的类，但是这些语句很长，可以/应该减少，但是您必须自行决定这样做。
.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{}
使用 css 选择器提取属性值
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.