CSS のいくつかのセレクターについて話しましょう

零到壹度
リリース: 2018-03-20 15:06:38
オリジナル
1974 人が閲覧しました

今日のこの記事は主に CSS のいくつかのセレクターについて説明しています。必要な方は参考にしていただければ幸いです。

1. ワイルドカード セレクター

ワイルドカード セレクターは、すべてのセレクターの中で最も広い範囲を持ち、ページ上のすべての要素と一致します

2。 タグセレクターは、現在のページ内で同じ名前のタグを選択するものです

/*设置当前页面中所有标签的颜色为红色*/* {color: red;
}
ログイン後にコピー

3. IDセレクター

IDセレクターには、ID名が続く「#」が付いています

/*设置所有p标签的文字颜色为红色*/p {color: red;
}
ログイン後にコピー

title


HTML タグ内の ID の属性値はページ内で一意である必要があることに注意してください (これは厳密な規則ではなく W3C 仕様です)。

ID セレクターの命名規則

    文字 (大文字と小文字は使用可能、厳密に区別)、アンダースコア、数字のみが許可されます。つまり、id="Head" と id="head" は競合しません
  • 文字で始めることのみ許可されます
  • 名前の長さに制限はありません。1 文字または複数文字にすることができますが、長すぎることはお勧めできません
  • タグ名は使用できません。厳格かつ迅速なルール)

4、类选择器

类选择器就是选取页面中所有标签的class属性值相同的一类标签,用.(点)表示

{:;
}
ログイン後にコピー

这是标题1

这是标题2

一个标签可以包含多个类选择器,在class标签中用空格隔开。

.head {color: blue;
}.subHead {font-size: 50px;
}
ログイン後にコピー

这是标题2

5、复合选择器

5.1、交集选择器

交集选择器又称标签指定式选择器,由两个选择器构成,其中第一个为标记选择器,第二个为class选择器或id选择器,两个选择器之间不能有空格,如

h3.special  /* 需要满足标签是h3同时拥有special类 */
ログイン後にコピー

p#one /* 需要满足标签是p同时id为one */
ログイン後にコピー

5.2、并集选择器

并集选择器是各个选择器通过逗号连接而成的,任何形式的选择器(包括标记选择器、class类选择器id选择器等),都可以作为并集选择器的一部分。如果某些选择器定义的样式完全相同,或部分相同,就可以利用并集选择器为它们定义相同的CSS样式

/*同时给标签h3与class为box的元素设置样式*/h3, .box {color: red;font-size: 14px;
}
ログイン後にコピー

 5.3、后代选择器

后代选择器用来选择元素或元素组的后代,其写法就是把外层标记写在前面,内层标记写在后面,中间用空格分隔。当标记发生嵌套时,内层标记就成为外层标记的后代(后代不仅仅包括儿子,还包括子子孙孙)。

以上がCSS のいくつかのセレクターについて話しましょうの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

関連ラベル:
ソース:php.cn
このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
最新の問題
人気のチュートリアル
詳細>
最新のダウンロード
詳細>
ウェブエフェクト
公式サイト
サイト素材
フロントエンドテンプレート