selector_html/css_WEB-ITnose

他の人が書いたものを読むたびに、たくさんの種類があるので、それを一つずつ列挙することしかできません。遊んでいい？したがって、重要なのは、なぜこのように使用されるのか、どのようなメリットがあるのか​​を理解することです。

Web ページが上司から指示された 3 つのことのリストと同じくらい単純な場合、1 つの項目を完了したらバツ印を付けて、どれが完了し、どれが完了していないのかが一目でわかるようにします。 HTML Web ページには次の構造があります。ネストされたタグで構成されたテキスト フォームは多数あり、長いため、追加するスタイルを適用するにはセレクターが素早く見つける必要があるため、セレクターを理解することは理にかなっています。

1. タグセレクター

CSS では、通常タイトルとして使用される h1 など、一部のタグ自体がすでにいくつかのスタイルを持っています。そのフォントは通常よりも大きく、デフォルトでは太字であり、ブロックレベルのタグです。で囲まれた値にはマージン値があります。タグ セレクターは基本的に、タグのスタイルを再定義します。 h1 のままでも、タイトルとして使用すると検索エンジンに良いため、よく使用されますが、独自のスタイルは Web ページのレイアウトでは非常に不合理に見える場合があるため (何度もそうだと思いますが)、完全に書き直すことができます。スタイルを変更したり、フォント サイズを変更したり、余白を削除したりして、全体的なコントロール効果を実現します。スタイルが再定義されている限り、h1 は新しいスタイルの適用後にテキスト コンテンツを表示するために直接使用され、より調和がとれます。

    h1{font-size:1em;}

2. クラスセレクター

クラスであるため、複数の要素に影響を与え、負荷を軽減し、正確な制御を行うために、同じ型のいくつかの要素には同じクラス名を付けます。非常に良い選択です。重要なのは、1 つのクラスに複数のクラス名を追加できるため、時間を節約できるということです。ここの 3 つのセレクターが異なるスタイルを追加すると、それらはすべてこのテキストにロードされます。もちろん、CSS スタイルは近接性の原則に基づいており、後のものは前のものを上書きし、優先度の高いものは優先度の低いものを上書きします。そのため、mr が font-size も設定する場合、そのスタイルは font-size を上書きします。フィートセレクターで。

    .ft{font-size:24px;}        .mr{margin:10px;}    .fl{float:left;}    <p class="ft mr fl ">Hello World</p>

プロのフロントエンドは通常、同時に複数のクラスを使用し、1つのflはページの左側にフローティングすることを意味し、別のスタイルを記述し、必要に応じて追加するため、ツール、分割のようなものです複数のクラス名に分割できるため、よりスケーラブルになります。 - または _ をクラス名に含めることは許可されていることに注意してください。

3. ID セレクター

ID は人々に一意の識別感を与えるため、Web ページの特別な部分をマークすることが多く、コンテンツの特定の部分 (バナーやサイドバーなど) を表すことがよくあります。メインコンテンツ(main)など、大きなブロックを分割する場合は、当然、IDセレクターを使用すると、すべてのタグにIDが追加されます。 is that no one will go there. Bite you-_-#

    #news{        margin-left:10%;        font-family:"Times New Roman"     }     <div id="news">         ........     </div> 

ID について重要なことの 1 つは、次のような優先度が高いことです

    #link{ color:red; }    .link{ color:blue; }    <a id="link" class="link" href="#">To Somewhere</a>

それは赤ですか、それとも青ですか？デモから、ID セレクターの優先順位が高いため、ブラウザーが ID とクラス (またはその組み合わせ) に基づいて重み値を計算し、より大きいスタイルが使用されることがわかります (理論的には、これは次のとおりです)。この場合もそうですが、Chrome の場合は試してみても確かではないようです）、重み値の計算は、掘り下げて考えると少し面倒です。特に、複数の ID、クラス、ラベルが絡み合っている場合に発生します。もちろん、オンラインで重みを計算する方法を分析した記事もあります。なぜ私たちは恥ずかしいことをする必要があるのでしょうか? 少なくとも私は (フロントエンドから学んだ) 時々、js を使用するときにのみ、単純なページを作成します。要素を素早く取得するためにこれを行います。トラブルを避けるため、スタイルの追加には基本的に ID セレクターは使用しません。

4. Group Selector

プロフェッショナルなフロントエンドの CSS コードを見たことがある人なら、最初に次のようなものがあるはずです:

    body, h1, h2, h3, h4, h5, h6, hr, p, blockquote, dl, dt, dd, ul, ol, li{ margin: 0; padding: 0; }

最初は、なぜこんなにたくさんのタグがあるのか​​理解できませんでしたデザインミスかと思いましたが、全体から部分までスタイルを把握しているので、まずすべてのラベル要素に1つまたは2つの基本的なスタイルを与え、たとえばここでのmarginとpaddingはすべてのラベルを0に設定します。 。後でこれが完全に間違っているわけではないことに気付きましたが、より重要なのは、多くのブラウザが独自のスタイル (h1 ～ hn など) で一部のタグを処理する場合、左右にスペースがあるにもかかわらず、マージンを使用するブラウザもあれば、マージンを使用するブラウザもあるということです。パディングを不均一に使用すると、スタイルが混乱する可能性があります。より多くのブラウザでスタイルの表示を統一するために、特定のタグを使用する場合は、マージンとパディングを個別に追加します。ここにはたくさんのタグがあり、カンマで区切られたセレクターはグループ セレクターと呼ばれます。これは、それらがすべて括弧内のスタイルに設定されていることを意味します。グループ セレクターはタグに限定されず、クラスと ID も使用できます: .link、.news、#banner{...}。グループ セレクターは、同じスタイルで多数のタグ、クラス、ID を設定する場合に便利です。上記のマージンとパディングを0にして表示の一貫性を高めるデザインですが、CSSリセットという名称があり、私のような初心者はあまり使いませんがスタイルリセットです。

5.ユニバーサルセレクター

　　群选择器一次设置多个很爽，堆在一起用逗号分隔即可，还有更爽的，就是通用选择器，它就是一个 * ，代表所有选择器（通用嘛），比如下面

    h1, h2, p{font-weight:bold;}    * {font-weight:bold;}

　　第二个通用选择器等同于设置了第一个群选择器的内容，当然能比它代表更多的东西。

　　6. 派生选择器

　　这应该是专业前端最最常用的类型了，也称后代选择器。我们知道html标签是嵌套的，外面的是父元素，里面的是子元素，当然父子关系是相对的，这叫做html的族谱，当然它也有根节点，兄弟节点等，这根二叉树完全一样，所以也有相应的父标签、祖先标签、兄弟标签等等。比如像这样的

    <div id="nav">        <ul class="nav">             <li></li>             <li></li>        </ul>    </div>    

　　ul是div的子标签，li是ul的子标签，id选择器在类选择器nav的标签的父标签里边，所以定位到

    #nav .nav li{...}