我有以下四种不同类型的体标记的情况:
<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标签的情况。 我可以做这样的事体[*类页=日历做法] [*类游戏=]对于第二种情况? 我怎么能写第一种情况?
这里只有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"]
不起作用。 类属性可视为带有这种类型的选择的任何其他属性。
根据您的评论的描述,你看以下选择:
body:not([class*="-games"])
见的:not
伪类和属性选择 。
你总是可以把它们连而不使用选择的。 注:我使用的所有您在这里班,但这些都是很长的声明,并可能/应该降低,但你必须做你的自由裁量权。
.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{}