CSSセレクターの新しい使い方の詳細な説明-CSSチュートリアル-php.cn

CSSセレクターの新しい使い方の詳細な説明

小云云

リリース： 2018-02-05 10:18:42

オリジナル

1832 人が閲覧しました

今では、数年前に jQuery が JS 開発の標準であったのと同じように、プリプロセッサ (sass など) が CSS 開発の標準になっているようです。 JS の querySelector は jQuery のセレクターのアイデアを利用しており、CSS セレクターもプリプロセッサ変数の定義、セレクターのネスト、コードブロックの再利用などの一般的な機能を利用しています。この記事では、CSSセレクターの新しい使い方を詳しく紹介します。

変数

一般に、Web開発を行う場合、以下に示すように、sassを例として一連の変数定義仕様を用意します

// 颜色定义规范
$color-background : #222
$color-background-d : rgba(0, 0, 0, 0.3)
$color-highlight-background : #333
//字体定义规范
$font-size-small : 12px
$font-size-medium : 14px
$font-size-large : 18px

ログイン後にコピー

CSS変数の構文は次のとおりです

【宣言変数】

変数は -- で始まる必要があります。たとえば、 --example-variable: 20px は、 --example-varibale 変数に 20px を割り当てることを意味します

変数を宣言するステートメントを任意の要素内に配置できます。グローバル変数を設定したい場合は、次のように設定できます。 : root, body or html

:root{--bgColor:#000;}

ログイン後にコピー

変数宣言は通常のスタイル宣言文と同じように、インラインスタイルも使えます

<body style="--bgColor:#000">

ログイン後にコピー

【変数の使い方】

var()関数を使って変数を使用すると、どこでも使用できます。例: var(--example-variable) は、--example-variable に対応する値を返します

<body style="--bgColor:#000;">
    <p style="width: 100px;height: 100px;background-color: var(--bgColor)"></p>    
</body>

ログイン後にコピー

var() 関数にはオプションのパラメーターもあります。これは、変数が変更されたときにデフォルト値を設定するために使用されます。値を取得できません

<p style="width: 100px;height: 100px;background-color: var(--bgColor,pink)"></p>

ログイン後にコピー

【注意】CSS変数の詳しい使い方はこちらに移動します

@apply

@applyを紹介する前に、まずはミキシングマクロ@mixinを紹介しましょう。 sassでは、再利用可能なコードブロックを指します

例えば、共通テキストオーバーフロー非表示再利用

@mixin overflow-ellipsis{
    overflow:hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  };
p {
    @include  overflow-ellipsis;
}

ログイン後にコピー

そしてアプリケーションルールセット@applyも同様の機能を実装しています。 var() と比較すると、@apply はスタイルのコレクションを参照しますが、var() は単一のスタイル値を参照します

:root{
  --overflow-ellipsis:{
    overflow:hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  };
}
.title{
  width:200px;
  @apply --overflow-ellipsis;
}

ログイン後にコピー

カスタムセレクター

カスタムセレクターは @custom-selector 定義を介して提供され、その後に次のようになります。 --次に、カスタムセレクターの名前、その後に定義する必要のあるセレクターをカンマで区切って複数指定します

@custom-selector :--heading h1, h2, h3, h4, h5, h6;

ログイン後にコピー

このように、:-見出しが使用可能な選択肢になります。上記の 2 つのコードは同じ効果があります

セレクターのネスト

CSS ルールには繰り返しのコンテンツが多く含まれています

:--heading{
  margin: 0;
}
h1, h2, h3, h4, h5, h6｛
   margin: 0; 
｝

ログイン後にコピー

ネストされた構文を使用した後のコードは次のようになります

table.colortable td {
  text-align:center;
}
table.colortable td.c {
  text-transform:uppercase;
}
table.colortable td:first-child, table.colortable td:first-child+td {
  border:1px solid black;
}
table.colortable th {
  text-align:center;
  background:black;
  color:white;
}

ログイン後にコピー

ネストされたスタイルルールでは、親ルールと一致する要素を参照できなければなりません。結局のところ、それはネストポイント全体です。この目的を達成するために、この仕様では、ASCII 表記 &

として記述される新しいセレクター、ネストされたセレクターを定義します。ネストされたスタイルルールのセレクターで使用される場合、ネストされたセレクターは、親ルールと一致する選択を表します。他の文脈で使用された場合、何も意味しません。 (つまり、有効ではあるが、どの要素とも一致しない)

【注意】ネストされたセレクターの間違った書き方は以下の2つです

table.colortable {
  & td {
    text-align:center;
    &.c { text-transform:uppercase }
    &:first-child, &:first-child + td { border:1px solid black }
  }
  & th {
    text-align:center;
    background:black;
    color:white;
  }
}

ログイン後にコピー

【@nest】

上記を解決するには、ネストされたセレクター & は脆弱です。@nest セレクターは、新しいバージョンの Chrome で使用できることを除いて、より幅広い用途に使用できます。 CSS セレクターの使用は現在ブラウザーではサポートされていません。しかし、CSS ポストプロセッサ postcss の cssnext プラグインはすべての問題を解決できます

cssnext 公式 Web サイトにあるように、今日から明日の CSS 構文を使い始めましょう