CSS3 セレクター (基本セレクター、属性セレクター、疑似クラスセレクター、セレクター戦略)_html/css

CSS3 セレクター (基本セレクター、属性セレクター、疑似クラスセレクター、セレクター戦略)_html/css_WEB-ITnose

WBOY

リリース： 2016-06-24 11:59:38

オリジナル

1340 人が閲覧しました

《CSS3 基本セレクター》

                      <p class="sycode">                          <p class="sycode">        一、通配符选择器（＊）       </p>                          <p class="sycode">        *{       </p>                          <p class="sycode">        marigin: 0;       </p>                          <p class="sycode">        padding: 0;       </p>                          <p class="sycode">        }       </p>                          <p class="sycode">       </p>                          <p class="sycode">        二、元素选择器(E)       </p>                          <p class="sycode">        li {background-color: grey;color: orange;}       </p>                          <p class="sycode">       </p>                          <p class="sycode">        三、类选择器（.className）       </p>                          <p class="sycode">       </p>                          <p class="sycode">        四、id选择器（#ID）       </p>                          <p class="sycode">        #first {background: lime;color: #000;}       </p>                          <p class="sycode">        #last {background: #000;color: lime;}       </p>                          <p class="sycode">       </p>                          <p class="sycode">        五、后代选择器（Ｅ Ｆ）       </p>                          <p class="sycode">        .demo li {color: blue;}       </p>                          <p class="sycode">       </p>                          <p class="sycode">        六、子元素选择器(E>F)       </p>                          <p class="sycode">        ul > li {background: green;color: yellow;}       </p>                          <p class="sycode">       </p>                          <p class="sycode">        七、相邻兄弟元素选择器(E + F)       </p>                          <p class="sycode">        li + li {background: green;color: yellow; border: 1px solid #ccc;}       </p>                          <p class="sycode">       </p>                          <p class="sycode">        八、通用兄弟选择器（Ｅ ? Ｆ）       </p>                          <p class="sycode">        .active ~ li {background: green;color: yellow; border: 1px solid #ccc;}       </p>                          <p class="sycode">       </p>                          <p class="sycode">        九、群组选择器（selector1,selector2,...,selectorN）       </p>                          <p class="sycode">        .first, .last {background: green;color: yellow; border: 1px solid #ccc;}       </p>                      </p>

ログイン後にコピー

《CSS3 属性セレクター》

CSS3 属性セレクターには主に次の種類があります:

E[attr ]: 属性名のみを使用しますが、属性名は使用しません属性値が決定されます。
E[attr="value"]: 属性名を指定し、属性の属性値を指定します。
E[attr~="value"]: 属性名を指定し、属性値。この属性値はスペースで区切られた単語リストです。単語リストには値の単語が含まれており、等号の前に「?」を記述する必要があります。属性名が指定され、属性値があり、属性値が value で始まります。
E[attr$="value"]: 属性名が指定され、属性値があり、属性値が終わります。値あり ;
E[attr*="value"]: 属性名が指定されており、属性値があり、属性値には値が含まれます。
E[attr|="value"]: 属性名。が指定され、属性値は value または「value-」で始まる値 (例: zh-cn);これは、最も一般的に使用される動的疑似クラス

                              <p class="sycode">                                  <p class="sycode">          .demo a[href][title] {background: yellow; color:green;}//存在href 和title 被选中         </p>                                  <p class="sycode">          .demo a[id="first"] {background: blue; color:yellow;font-weight:bold;}//id="first"被选中         </p>                              </p>

ログイン後にコピー

2. UI 要素のステータス疑似クラス

":enabled"、":disabled"、":checked" 疑似クラスこれらは UI 要素ステータス疑似クラスと呼ばれます。これらは主に HTML の Form 要素操作用であり、最も一般的なものは「type="text」です。これには有効と無効の 2 つの状態があります。前者は書き込み可能な状態であり、後者は書き込み可能な状態です。は無効な状態です。さらに、"type="radio" と "type="checkbox" "" には、「チェックあり」と「チェックなし」の 2 つの状態があります。たとえば、「無効」テキストボックスを他のテキストボックスと区別したい場合は、次のように適用できます。

IE6-8 は、「:checked」、「:enabled」をサポートしません。「: 無効」これら 3 つのセレクター

3、:n 番目のセレクター

:fist-child

は要素の最初の子要素を選択します

:last-child

は要素を選択します。 ;

:nth-child()

要素の 1 つ以上の特定の子要素を選択します。

:nth-last-child()

要素の 1 つ以上の特定の子要素を選択します。この要素の最後の子要素から

:nth-of-type() 指定された要素を選択します。

:nth-last-of-type() 最後の子要素から数えて指定された要素を選択します。 element;

:first-of-type 上位要素の下にある最初の類似したサブ要素を選択します。

:last-of-type 同じタイプの子要素を選択します。

:only-child 選択された要素はその親要素の唯一の要素です。

:only-of-type 選択された要素はその親要素と同じ型の唯一の要素です。

:empty選択された要素にはコンテンツがありません。

IE6-8 および FF3 ブラウザは、「:nth-child、:nth-last-child()、:nth-of-type」セレクターをサポートしません

4。負のセレクターは、jq の :not セレクターとまったく同じです。たとえば、フォーム内のすべての入力に境界線を追加したいが、追加したくない場合に、フォーム内の要素を使用してみましょう。変更を送信すると、次のことが可能になります。 :not を使用すると、

.demo a:link {color:gray;}/*链接没有被访问时前景色为灰色*/ .demo a:visited{color:yellow;}/*链接被访问过后前景色为黄色*/ .demo a:hover{color:green;}/*鼠标悬浮在链接上时前景色为绿色*/ .demo a:active{color:blue;}/*鼠标点中激活链接那一下前景色为蓝色*/ 
ログイン後にコピー

5. 疑似要素

以前に CSS の疑似要素を見てきました:first-line、:first-letter , :before, :after; その後、CSS3 では、以前の要素に基づいて「:」を追加して、擬似要素にいくつかの調整を加えました。これは、「::first-letter,::first-line,:」になります。 :before,::after "さらに、主に CSS3 で疑似クラスと疑似要素を区別するために使用される「::selection」、2 つの「::」と「:」も追加しました。これまでのところ、両方ともつまり、どの記述方法が使用されても、結果は同じですが、記述形式が異なります。

次に、それらの機能を簡単に理解しましょう

::first-line は要素の最初の行を選択します。たとえば、各段落のテキストの最初の行のスタイルを変更するには、これを使用できます。

::before和::after这两个主要用来给元素的前面或后面插入内容，这两个常用"content"配合使用， 见过最多的就是清除浮动

.clearfix:before, .clearfix:after { content: "."; display: block; height: 0; visibility: hidden; } .clearfix:after {clear: both;} .clearfix {zoom: 1;} 
ログイン後にコピー

《CSS选择器优化》

固有效率：

id选择器（#myid）

类选择器（.myclassname）

标签选择器（div,h1,p）

相邻选择器（h1+p）

子选择器（ul > li）

后代选择器（li a）

通配符选择器（*）

属性选择器（a[rel="external"]）

伪类选择器（a:hover,li:nth-child）