CSS 高度なセレクターの機能と利点の詳細な分析

CSS 高度なセレクターの特性と利点の詳細な分析

はじめに:
CSS は Web 開発に不可欠な部分です。CSS は次の目的で使用できます。スタイルとレイアウトを追加します。セレクターは CSS の非常に重要な部分であり、Web ページ内のどの要素が CSS ルールを適用するかを決定します。 CSS では、基本的なセレクター、階層セレクター、疑似クラス セレクターなどに精通しています。これらの一般的なセレクターに加えて、CSS にはいくつかの高度なセレクターも用意されています。この記事では、CSS の高度なセレクターの特性と利点を詳しく分析し、具体的なコード例を示します。

1. 属性セレクター
属性セレクターは、属性を通じて要素を選択できるセレクターです。属性値に基づいて必要な要素を選択できます。属性セレクターの形式は次のとおりです。

1. [attribute]: 指定された属性を持つ要素を選択します
2. [attribute=value]: 指定された属性値を持つ要素を選択します
3. [ [attribute~=value]: スペースで区切られた複数の値である指定された属性値を持つ要素を選択します
4. [attribute|=value]: 指定された属性値を持つ要素、または指定された要素で始まる要素を選択します属性値。「-」で区切られた複数の値です。
5. [attribute^=value]: 指定された属性値で始まる要素を選択します。
6. [attribute$= value]: 選択します。指定された属性値で終わる要素
7. [attribute*=value]: 指定された属性値を含む要素を選択

コード例:

/* 选择所有具有title属性的元素 */
[title] {
  color: blue;
}

/* 选择具有title属性且属性值为"example"的元素 */
[title="example"] {
  background-color: yellow;
}

/* 选择具有class属性且属性值包含"box"的元素 */
[class~="box"] {
  border: 1px solid black;
}

/* 选择具有id属性且属性值以"container"开头的元素 */
[id^="container"] {
  background-color: gray;
}

/* 选择具有href属性且属性值以".com"结尾的a元素 */
a[href$=".com"] {
  color: green;
}

/* 选择具有src属性且属性值包含"logo"的img元素 */
img[src*="logo"] {
  width: 100px;
  height: 100px;
}

2. 構造擬似-class selector
構造擬似クラスセレクターは、文書内での要素の位置関係に基づいて要素を選択するセレクターです。最初の子要素、最後の子要素、n 番目の子要素などを選択できます。構造擬似クラス セレクターの形式は次のとおりです。

1. :first-child: 要素の最初の子要素を選択します。
2. :last-child: 要素の最後の子要素を選択します。要素
3. :nth-child(n): 要素の n 番目の子要素を選択します。n には、特定の数値、キーワード (「even」、「odd」など)、または式 (「2n」など) を指定できます。 ", " 3n 1")
4. :first-of-type: この要素と同じ親要素を持つ同じタイプのすべての要素の中から最初の要素を選択します
5. :last-of -type: この要素と同じ親要素を持つ同じ型のすべての要素のうち最後の要素を選択します。
6. :nth-of-type(n): 同じ型のすべての要素のうち n 番目の要素を選択しますこの要素と同じ親要素を持つ要素
7. :nth-last-child(n): 要素の最後から n 番目の子要素を選択します
8. :nth-last-of- type(n): 同じ親要素の同じ型のすべての要素のうち、下から n 番目の要素を持つ要素を選択します。

コード例:

/* 选择第一个子元素，并设置颜色为红色 */
li:first-child {
  color: red;
}

/* 选择最后一个子元素，并设置背景颜色为黄色 */
li:last-child {
  background-color: yellow;
}

/* 选择偶数序号的子元素，并设置颜色为绿色 */
li:nth-child(even) {
  color: green;
}

/* 选择第三个子元素，并设置字体大小为20px */
li:nth-child(3) {
  font-size: 20px;
}

/* 选择第一个p元素，并设置边框为1px实线红色 */
p:first-of-type {
  border: 1px solid red;
}

/* 选择最后一个p元素，并设置边框为1px实线蓝色 */
p:last-of-type {
  border: 1px solid blue;
}

/* 选择li的倒数第二个子元素，并设置背景颜色为灰色 */
li:nth-last-child(2) {
  background-color: gray;
}

/* 选择同类型元素中倒数第一个元素，并设置颜色为橙色 */
span:nth-last-of-type(1) {
  color: orange;
}

3. -要素セレクター
疑似要素セレクターは、要素全体ではなく要素の特定の部分を選択するために使用されるセレクターです。要素の前、後ろ、または特定の位置にあるコンテンツを選択したり、特殊効果を生成したりできます。一般的な疑似要素セレクターの形式は次のとおりです。

1. ::before: 生成されたコンテンツを要素のコンテンツの前に挿入します。
2. ::after: 生成されたコンテンツを要素のコンテンツの後に挿入します。
3. ::first-letter: 要素コンテンツの最初の文字を選択します。
4. ::first-line: 要素コンテンツの最初の行を選択します。
5. ::selection:テキストが選択されたときに適用されるスタイル
6. ::placeholder: フォーム コントロールのプレースホルダー テキストを選択します

コード例:

/* 在p元素的前面插入内容 */
p::before {
  content: "前面插入的内容";
  color: red;
}

/* 在p元素的后面插入内容 */
p::after {
  content: "后面插入的内容";
  color: blue;
}

/* 选择p元素内容的第一个字母，并设置颜色为橙色 */
p::first-letter {
  color: orange;
}

/* 选择p元素内容的第一行，并设置背景颜色为黄色 */
p::first-line {
  background-color: yellow;
}

/* 设置选中文本的样式 */
::selection {
  background-color: pink;
  color: white;
}

/* 设置输入框的占位符文本的样式 */
input::placeholder {
  color: gray;
}

概要:
Through疑似クラス セレクター、属性セレクター、および疑似要素セレクターの構造により、Web ページ内の要素をより柔軟に選択して処理し、よりきめ細かいスタイル制御を実現できます。これらの高度なセレクターは、開発者により多くの選択肢と強力なスタイル表現機能を提供し、Web 開発における CSS の適用をより創造的かつ柔軟にします。実際の開発では、これらの高度なセレクターを合理的に使用することで、作業効率とコードの可読性を大幅に向上させることができます。

（ワード数: 1500）

以上がCSS 高度なセレクターの機能と利点の詳細な分析の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。