0

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

<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标签案例。我可以为第二种情况做这样的事情吗？我怎么写第一个案例？

4

3 回答 3

4

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

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

请:not参阅伪类和属性选择器。

于 2012-06-24T19:58:45.173 回答
3

四个示例中的每一个都只有 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'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$="-games"]不起作用。类属性被视为具有此类选择器的任何其他属性。

于 2012-06-24T20:20:23.363 回答
0

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

.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{}
于 2012-06-24T20:13:21.973 回答