コミュニティ 学ぶ ツールライブラリ レジャー
検索
日本語
ホームページ > ウェブフロントエンド > フロントエンドQ&A > xpath の配置と css の配置の違いは何ですか?

xpath の配置と css の配置の違いは何ですか?

青灯夜游
リリース： 2023-01-03 09:24:29
オリジナル
7383 人が閲覧しました

違い: 1. XPATH では直接の子要素は「/」を使用して定義されますが、CSS では「>」を使用して定義されます。要素が別の要素 (子要素または孫要素) 内にある場合、その要素は XPATH では「//」を使用し、CSS では空白のみを使用して定義されます。

xpath の配置と css の配置の違いは何ですか?

このチュートリアルの動作環境: Windows7 システム、css3 バージョン、Dell G3 コンピューター。

#xpath の一般的な配置方法

xpath の配置と css の配置の違いは何ですか?

xpath 配置と CSS 配置の比較

xpath の配置と CSS の配置は、実際のプロジェクトでよく使用されます。 XPath は、XML ドキュメント内のノードを検索するための構文です。つまり、パスを通じてこの要素を見つけることができます。 Xpath はより強力ですが、CSS セレクターはパフォーマンスが優れており、より高速に実行され、構文がより単純です。 2 つの方法を比較します。

直接の子要素

XPATH の直接の子要素は「/」を使用して定義されますが、CSS では「> ;」を使用して定義されます。定義されています。 

XPATH：//div/input
CSS: div>input
ログイン後にコピー

子孫要素

要素が別の要素 (子要素または孫要素) 内にある場合、XPATH、CSS では「//」を使用して定義されます。スペースのみが使用されます。 

XPATH：//div//input
CSS: div input
ログイン後にコピー

ID の位置決め

XPATH の要素 ID は次の内容を使用して定義されます: "[@id='kw']"、CSS ではそれが使用されます。 ：「#kw」。 

XPATH：//input[@id='kw']
CSS: input#kw
ログイン後にコピー
[推奨チュートリアル:

CSS ビデオ チュートリアル]

クラスの位置決め

クラス属性の場合、XPATH は id に似ています。 、CSS ではドットで表されます。 

XPATH：//input[@class="s_ipt"]
CSS: input.s_ipt
ログイン後にコピー
弟要素: Following-sibling step-sibling

これは、同じ親ノード内にあるページ上の次に隣接する要素であるフォーム要素に役立ちます。 

XPATH：//input[@class="s_ipt"]/following-sibling::a
CSS：input[class="s_ipt"]+a
ログイン後にコピー

兄弟要素:predicting-sibling 前の兄弟

同じ親ノードにあるページ内の前の隣接要素。 

XPATH：//a[@name='tj_baike']/preceding-sibling::a
CSS：无法实现
ログイン後にコピー

xpath の配置と css の配置の違いは何ですか?

親ノード要素

ページ内のノードの上位要素。 

XPATH: //input/parent
CSS: 无法实现
ログイン後にコピー

属性値

任意の属性値に基づいて要素を配置できます。 

XPATH: //input[@name='username']
CSS: input[name='username']
ログイン後にコピー

複数の属性値

複数の属性を通じて要素を見つけることもできます。 

XPATH: //input[@name='rsv_spt' and @value="1"]
CSS: input[name='login'][type='submit']
ログイン後にコピー

最初の子要素

XPATH: //div[@id='u1']/a[1]
CSS: div#u1 a:first-child
ログイン後にコピー

最後の子要素

XPATH: //div[@id='u1']/a[last()]
CSS: div#u1 a:last-child
ログイン後にコピー

2 番目の子要素

XPATH: //div[@id='u1']/a[2]
CSS: div#u1 a:nth-child(2)
ログイン後にコピー

あいまい一致

selenium中允许使用^=，$=或*=进行部分字符串匹配。
ログイン後にコピー
#^=プレフィックスの一致

XPATH: input[starts-with(@id,'user')]
CSS: input[id^='user']
ログイン後にコピー

$=サフィックスの一致

XPATH: input[ends-with(@id,'name')]
CSS: input[id$='name']
ログイン後にコピー
#*=一致には 

XPATH: input[contains(@id,'sernam')]
CSS: input[id*=sernam]
ログイン後にコピー
が含まれています。プログラミング関連の知識の詳細については、プログラミング ビデオ をご覧ください。 ！

以上がxpath の配置と css の配置の違いは何ですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

関連ラベル：
CSSの位置決め
ソース：php.cn
前の記事：HTML画像の透明度を設定する方法 次の記事：cssの機能とは何でしょうか？
このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
著者別の最新記事
最新の問題
固定配置された子によって親のパディングが無視される スティッキー要素がヘッダーの後ろに来るのを防ぐにはどうすればよいですか?現在のコードスニペットは親にpadding-topを使用しており、追加の子にmargin-topまたは透明な...
から 2024-04-06 11:42:51
0
1
338
Scrapy: カスタム列設定を使用して CSV に保存するためのガイド つまり、基本的にはWebからデータをスクレイピングしており、プロジェクトファイルをメインのスパイダーファイルにインポートしています。データを取得してコンテナーに保存し、CSV とし...
から 2024-04-04 14:01:17
0
1
301
divの配置が難しい ページ上の他の要素を基準にして div を配置したいと考えています。これは初期 CSS です: #puzzle{display:inline-block;vertical-alig...
から 2024-04-04 12:14:58
0
1
380
CSS セレクターを使用して、特定の属性またはタグを含む div 要素をターゲットにする方法は? 私はウェブサイトを生成する POS システムに取り組んでいます。コードのほとんどは独自仕様なので、あまり編集できません。いくつかの画像がカテゴリーとしてフローティングされたカテゴリ...
から 2024-04-03 22:25:59
0
1
277
カスタムの「css」および「js」ファイルをアプリケーション内のすべての管理者に効果的に適用するにはどうすればよいですか? 次のように、templates/admin/app1/ にカスタム CSS ファイルと js ファイル、admin.py およびオーバーライドされたbase.html があります。...
から 2024-04-03 20:54:06
0
1
400
関連トピック
詳細>
人気のおすすめ
人気のチュートリアル
詳細>
関連するチュートリアル
人気のおすすめ
最新のコース
最新のダウンロード
詳細>
ウェブエフェクト
公式サイト
サイト素材
フロントエンドテンプレート