コミュニティ 学ぶ ツールライブラリ レジャー
検索
日本語
ホームページ > ウェブフロントエンド > htmlチュートリアル > CSS隣接セレクター(7)_html/css_WEB-ITnose

CSS隣接セレクター(7)_html/css_WEB-ITnose

WBOY
リリース： 2016-06-24 11:46:17
オリジナル
946 人が閲覧しました

1. 隣接するセレクター

隣接するセレクターの前部と後部は、プラス記号 (+) で区切られています。

隣接するセレクターは、隣接することを指定します。左のセレクターに基づいて要素を検索し、右のセレクターに一致する隣接する要素の背後にある要素を検索します

2. 簡単な例 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title>相邻选择器</title><style type="text/css">/*选择中id为wrap最下的p标签使用相信选择器*/#sub_wrap + p{    font-size:22px;    color:red;    }</style></head><body><div id="wrap"><div id="sub_wrap"><h2 class="news">标题2</h2><p class="news">标题2下的段落</p><span class="news">标题2下的span</span></div><strong><p>相邻段落</p></strong></div></body></html>
ログイン後にコピー

関連ラベル：
CSS 相邻选择器(七)
ソース：php.cn
前の記事：DIV の滑らかな影を実現する画像のない純粋な CSS border_html/css_WEB-ITnose 次の記事：この表のコードのどこが間違っているのでしょうか。なぜ真ん中に表の行がないのでしょうか? _html/css_WEB-ITnose
このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
著者別の最新記事
最新の問題
vue vee-validate は日付ピッカーの選択の問題をキャプチャします datepicker フィールドの v-model バインディングが正しく機能しません。選択を行うと、画面上でライブ更新されますが、値は formValues リアクティブ オブジ...
から 2024-04-06 11:38:56
0
1
510
SUM を選択するときに隣接する列の順序を制御する SUM 経由で選択すると、返されるデータは 1 つのレコードにグループ化されますが、これは問題ありません。以下のクエリは合計を正しく返しますが、隣接する列の値は常に最も古いレコード...
から 2024-04-04 23:26:33
0
1
402
JS を使用して再生品質を制御する Javascript を使用してビデオの再生品質を制御する方法はありますか?より正確に言うと、JavaScriptを使用してビデオの品質を選択したいと考えています。 Chrome ...
から 2024-04-04 00:21:55
0
1
384
CSS セレクターを使用して、特定の属性またはタグを含む div 要素をターゲットにする方法は? 私はウェブサイトを生成する POS システムに取り組んでいます。コードのほとんどは独自仕様なので、あまり編集できません。いくつかの画像がカテゴリーとしてフローティングされたカテゴリ...
から 2024-04-03 22:25:59
0
1
277
CSSクラスセレクターのwidthプロパティを確認するにはどうすればよいですか?例は .label{} です。 以下は、.label の幅 270 を選択した CSS コードに関する私のコメントです。 ブラウザの開発者ツールを使用して .label 要素を検査すると、実際の幅は 270 ピク...
から 2024-04-01 17:45:11
0
1
338
関連トピック
詳細>
人気のおすすめ
人気のチュートリアル
詳細>
関連するチュートリアル
人気のおすすめ
最新のコース
最新のダウンロード
詳細>
ウェブエフェクト
公式サイト
サイト素材
フロントエンドテンプレート