ホームページ > 記事 > ウェブフロントエンド > CSS セレクターに関する一般的な問題は何ですか?

CSS セレクターに関する一般的な問題は何ですか?

php中世界最好的语言オリジナル: 2018-03-08 15:51:312802ブラウズ

今回は、CSS セレクターに関するよくある問題と、CSS セレクターに関するよくある問題に対処するための注意事項について説明します。以下は実際のケースです。見てみましょう。

一般的なセレクターは何ですか?
1.タグセレクター
p{ }/タグ名の要素を選択 p/
2.クラスセレクター
.box{ }/クラス名の要素を選択 box/
3.IDセレクター
#header { }/ID 名 header を持つ要素を選択します/
1.4ワイルドカードセレクター
{ }/ページ上のすべての要素を選択します/
1.5 セレクタープレフィックス
div.bd{}/クラス名 bd とラベル div を選択します要素/
1.6属性セレクター
[無効]{}/ 属性が無効になっているすべての要素を選択します*/

セレクターの優先順位は何ですか?
!重要>インラインスタイル>IDセレクター>疑似クラス>属性セレクター>クラスセレクター>要素(型)セレクター>ユニバーサルセレクター(*)>ブラウザのカスタマイズ

クラスとidの使用シナリオ?
idはタグオブジェクトをベースに素早く取得します提供された一意の ID 番号に基づいて。 class は、特定のスタイルをクラス class に追加します。このスタイルのタグが必要な場合は、このクラスを追加できます。

CSS セレクターを使用するときに適切な名前空間を記述する必要があるのはなぜですか?
スタイル汚染を防ぐため。

次のセレクターは何を意味しますか?

#header{
}/选择id名为header的元素/
.header{
}/选择class名为header的元素/
.header .logo{
}/选择名为header元素内所有名为logo的元素/
.header.mobile{
}/选择class名为header且为mobile的元素/
.header p, .header h3{
}/选择class名为header内所有的p标签和h3标签/
#header .nav>li{
}/选择祖父元素id名为header内父元素class名为nav的标签下/
#header a:hover{
}/选择祖父元素id名为header内a标签被hover的元素/

あなたが知っている疑似クラスセレクターをリストしてください
:active はアクティブ化された要素にスタイルを追加します。
:focus は、キーボード入力フォーカスを持つ要素にスタイルを追加します。
:hover は、マウスが要素上にあるときに要素にスタイルを追加します。
:link 未訪問のリンクにスタイルを追加します。
:visited は、訪問済みリンクにスタイルを追加します。
:first-child は、要素の最初の子要素にスタイルを追加します。
:lang 指定された lang 属性を持つ要素にスタイルを追加します。

次のコードを実行して、出力スタイルの理由を分析します。

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>first-child  vs first-of-child</title>
<style>
/选中.item1,该元素是它父亲的第一个孩子/
.item1
:first-of-type
{
background: red;
}
/选中.item1,该元素是它父亲所有的 .item1孩子中的第一个/
.item1:first-child{
color: blue;
}
</style>
</head>
<body>
<div class="item1">item1</div>
<div class="ct">
<div class="item2">ct-item2</div>
<div class="item1">ct-item1</div>
<div class="item1">ct-itmm1</div>
<div class="item2">
<div class="item1">ct-item2-item1</div>
</div>
</div>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>first-child  vs first-of-child</title>
<style>
/选中.item1,该元素是它父亲的第一个孩子/
.item1:first-of-type{
background: red;
}
/选中.item1,该元素是它父亲所有的 .item1孩子中的第一个/
.item1:first-child{
color: blue;
}
</style>
</head>
<body>
<div class="item1">item1</div>
<div class="ct">
<p class="item2">ct-item2</p>
<div class="item1">ct-item1</div>
<div class="item1">ct-itmm1</div>
<div class="item2">
<div class="item1">ct-item2-item1</div>
</div>
</div>
</body>
</html>

:first-child と :first-of-type の機能と違いは何ですか?
:first-child は、親要素の最初の子要素と一致します。これは、構造。
:first-of-type は、親要素の下にある同じ型の最初の子要素と一致します。

物件に遭遇して互換性を知りたい場合は、どこで確認できますか?
caniuse.com で確認してください。

この記事の事例を読んだ後は、この方法を習得したと思います。さらに興味深い情報については、php 中国語 Web サイトの他の関連記事に注目してください。