使用兩個帶有*的CSS屬性選擇器
[英]using two css attribute selectors with *
問題描述
我有以下四種不同類型的身體標簽情況：
<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選擇器，它將選擇前兩個正文標簽用例中的EITHER，而不是后兩個，而另一個選擇器將僅選擇最后兩個正文標簽用例。 對於第二種情況，我可以做這樣的事情嗎？[class * = page-calendar-practices] [class * = games]？ 我該如何寫第一種情況？
3 個解決方案
解決方案2
3 已采納 2012-06-24 20: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
0 2012-06-24 20:13:21
您可以始終將它們鏈接起來，而不是使用選擇器。 注意：我在這里使用了所有的類，但是這些語句很長，可以/應該減少，但是您必須自行決定這樣做。
.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 選擇器提取屬性值
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.