Question

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

<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标签盒。我可以这样做吗？体[*类页=日历做法] [*类游戏=] 对于第二种情况？我怎么能写出第一个案例？

Answer 1

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

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

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

Answer 2

只有一个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属性被视为具有此类选择器的任何其他属性。

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

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

3 个答案: