コミュニティ
学ぶ
ツールライブラリ
AIツール
レジャー
検索
日本語
目次
#例
出力
ホームページ ウェブフロントエンド CSSチュートリアル CSSを使用して子要素を選択する

CSSを使用して子要素を選択する

Aug 31, 2023 pm 07:53 PM

CSS 子コンビネータは、親要素のすべての子要素を選択するために使用されます。

CSS 子コンビネータの構文は次のとおりです。 -

1

2

3

Selector > Selector {

   attribute: /*value*/

}

ログイン後にコピー

CSS 子孫コンビネータは、親要素のすべての子孫要素を選択するために使用されます。

CSS 子孫コンビネータの構文は次のとおりです。

1

2

3

Selector Selector {

   attribute: /*value*/

}

ログイン後にコピー

例

次の例は、CSS の子要素と子孫セレクターを示しています。

オンライン デモ

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

<!DOCTYPE html>

<html>

<head>

<style>

article > * {

   text-align: center;

   border: 10px groove tomato;

}

::first-line {

   box-shadow: inset 0 0 7px cornflowerblue;

}

</style>

</head>

<body>

<article>

<h2>Donec rutrum a erat vitae interdum. </h2>

<p>Duis consequat aliquet leo, quis aliquam ex vehicula in. Vivamus placerat tincidunt hendrerit. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque semper ex eget nulla consectetur varius.</p>

<img src="https://images.unsplash.com/photo-1612840666989- a16302e84978?crop=entropy&cs=tinysrgb&fit=crop&fm=jpg&h=120&ixlib=rb1.2.1&q=80&w=120" />

</article>

</body>

</html>

ログイン後にコピー

出力

これにより、次の結果が生成されます -

使用 CSS 选择子元素

#例

ライブデモ

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

<!DOCTYPE html>

<html>

<head>

<style>

body > * {

   margin: 20px;

}

article p {

   font-size: 24px;

   box-shadow: -10px 1px 0 rgba(12,43,180, 0.6);

}

</style>

</head>

<body>

<article>

<p>Neque porro quisquam </p>

<p>est qui dolorem ipsum quia dolor sit amet,</p>

<div><p>consectetur, adipisci velit.....</p></div>

</article>

<div>

<p> consectetur, adipisci velit</p>

<article>

<p> consectetur, adipisci velit</p>

</article>

</div>

</body>

</html>

ログイン後にコピー

出力

これにより、次の結果が生成されます -

使用 CSS 选择子元素

以上がCSSを使用して子要素を選択するの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。

人気の記事

2つのポイント博物館：バングルワシュタランドロケーションガイド
4週間前 By 尊渡假赌尊渡假赌尊渡假赌
スプリットフィクションを打ち負かすのにどれくらい時間がかかりますか？
3週間前 By DDD
レポ：チームメイトを復活させる方法
3週間前 By 尊渡假赌尊渡假赌尊渡假赌
ハローキティアイランドアドベンチャー：巨大な種を手に入れる方法
3週間前 By 尊渡假赌尊渡假赌尊渡假赌
公式アカウントのキャッシュの更新の難しさ：バージョンの更新後のユーザーエクスペリエンスに影響を与える古いキャッシュを回避する方法は？
3週間前 By 王林
もっと見る

ホットツール Tags

コード&IT
オーディオ
仕事
マーケティング
AI検出器
チャットボット
デザイン&アート

人気の記事

2つのポイント博物館：バングルワシュタランドロケーションガイド
4週間前 By 尊渡假赌尊渡假赌尊渡假赌
スプリットフィクションを打ち負かすのにどれくらい時間がかかりますか？
3週間前 By DDD
レポ：チームメイトを復活させる方法
3週間前 By 尊渡假赌尊渡假赌尊渡假赌
ハローキティアイランドアドベンチャー：巨大な種を手に入れる方法
3週間前 By 尊渡假赌尊渡假赌尊渡假赌
公式アカウントのキャッシュの更新の難しさ：バージョンの更新後のユーザーエクスペリエンスに影響を与える古いキャッシュを回避する方法は？
3週間前 By 王林
もっと見る

ホットな記事タグ

メモ帳++7.3.1

メモ帳++7.3.1

使いやすく無料のコードエディター

SublimeText3 中国語版

SublimeText3 中国語版

中国語版、とても使いやすい

ゼンドスタジオ 13.0.1

ゼンドスタジオ 13.0.1

強力な PHP 統合開発環境

ドリームウィーバー CS6

ドリームウィーバー CS6

ビジュアル Web 開発ツール

SublimeText3 Mac版

SublimeText3 Mac版

神レベルのコード編集ソフト（SublimeText3）

もっと見る

ホットトピック

Gmailメールのログイン入り口はどこですか？
7112
9
Java チュートリアル
1534
14
Laravel チュートリアル
1254
25
PHP チュートリアル
1205
29
CakePHP チュートリアル
1152
46
もっと見る
Related knowledge
WordPressブロックと要素にボックスシャドウを追加します WordPressブロックと要素にボックスシャドウを追加します Mar 09, 2025 pm 12:53 PM

WordPressブロックと要素にボックスシャドウを追加します

Smart Forms Frameworkを使用してJavaScript連絡フォームを作成する Smart Forms Frameworkを使用してJavaScript連絡フォームを作成する Mar 07, 2025 am 11:33 AM

Smart Forms Frameworkを使用してJavaScript連絡フォームを作成する

満足している属性を持つインラインテキストエディターを作成します 満足している属性を持つインラインテキストエディターを作成します Mar 02, 2025 am 09:03 AM

満足している属性を持つインラインテキストエディターを作成します

最初のカスタムSvelteトランジションを作成します 最初のカスタムSvelteトランジションを作成します Mar 15, 2025 am 11:08 AM

最初のカスタムSvelteトランジションを作成します

5つの最高のPHPフォームビルダー（および3つの無料スクリプト）を比較する 5つの最高のPHPフォームビルダー（および3つの無料スクリプト）を比較する Mar 04, 2025 am 10:22 AM

5つの最高のPHPフォームビルダー（および3つの無料スクリプト）を比較する

node.jsとexpressのMulterを使用してファイルアップロードします node.jsとexpressのMulterを使用してファイルアップロードします Mar 02, 2025 am 09:15 AM

node.jsとexpressのMulterを使用してファイルアップロードします

Codecanyon 2025（無料）の最高のCSSアニメーションと効果 Codecanyon 2025（無料）の最高のCSSアニメーションと効果 Mar 01, 2025 am 09:32 AM

Codecanyon 2025（無料）の最高のCSSアニメーションと効果

GraphQLキャッシングの使用 GraphQLキャッシングの使用 Mar 19, 2025 am 09:36 AM

GraphQLキャッシングの使用

See all articles