0

次の 4 種類の 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'>

最初の 2 つの body タグのケースのいずれかを選択し、最後の 2 つのケースを選択しない css セレクターと、最後の 2 つの body タグのケースのみを選択する別のセレクターを作成したいと考えています。2番目のケースで、この body[class*=page-calendar-practices][class*=games] のようなことはできますか? 最初のケースをどのように書くことができますか?

4

3 に答える 3

4

コメントの説明によると、次のセレクターを探しています。

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

疑似クラスおよび属性セレクターを参照して:notください。

于 2012-06-24T19:58:45.173 に答える
3

4つの例のそれぞれに固有のCSSクラスは1つだけです。それぞれに、次の4つのクラスのいずれかがあります。

page-calendar-practices-2012-06
page-calendar-practices
page-calendar-practices-2012-06-games
page-calendar-practices-all-games

これに基づいて、最初の2つを選択するには：

.page-calendar-practices-2012-06,
.page-calendar-practices {...}

そして最後の2つを選択するには：

.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属性は、このタイプのセレクターで他の属性と同じように扱われます。

于 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 に答える