文章/答案/技术大牛

发布

社区首页 >问答首页 >将两个css属性选择器与*一起使用

问将两个css属性选择器与*一起使用
EN

Stack Overflow用户

提问于 2012-06-25 03:55:48

回答 3查看 227关注 0票数 0

我有以下四种不同类型的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标签案例。对于第二种情况，我可以像这样做bodyclass*=page-calendar-practices吗？我怎么写第一个案例呢？

css

css-selectors

回答 3

Stack Overflow用户

回答已采纳

发布于 2012-06-25 04: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

Stack Overflow用户

发布于 2012-06-25 03:58:45

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

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

参见the :not pseudo-class和attribute selectors。

票数 4

Stack Overflow用户

发布于 2012-06-25 04:13:22

你可以随时链接它们，而不是使用选择器。注意:我在这里使用了您的所有类，但这些都是非常长的语句，可以/应该减少，但您必须自行决定是否这样做。

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

票数 0

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/11180757

复制

相似问题

问将两个css属性选择器与*一起使用
EN

回答 3

Stack Overflow用户

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问将两个css属性选择器与*一起使用EN

回答 3

Stack Overflow用户

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问将两个css属性选择器与*一起使用
EN