使用两个CSS属性选择器与*(using two css attribute selectors w

2019-10-31 20:26发布

我有以下四种不同类型的体标记的情况:

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

Answer 1:

这里只有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"]不起作用。 类属性可视为带有这种类型的选择的任何其他属性。



Answer 2:

根据您的评论的描述,你看以下选择:

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

见的:not伪类和属性选择 。



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


文章来源: using two css attribute selectors with *