2.css selector_html/css_WEB-ITnose

最初のセクションの文法構造から、CSS 言語の中心的な考え方は、オブジェクトを見つけて、選択したオブジェクトに属性を割り当てるというものであることがわかります。その中で、CSS でのオブジェクトの選択はセレクターに依存します。セレクターをマスターしたら、どこを打つかを指定できるようになり、ショットは完璧になります。

CSSにはたくさんの種類のセレクターがありますので、以下に一つずつ紹介していきます:

1. 基本的なセレクター

ここでは、簡単に使用できるいくつかのセレクターを基本的なセレクターとして分類します。次の内容を含めます。しかし、これは通常、私たちが望む結果ではないため、一般的には使用されません。

1.2 Element Selector

* {    border: 1px solid red;             }

要素セレクターを使用して特定のタグを選択できますが、要素セレクターは HTML ドキュメント内の同じ名前を持つすべてのタグを選択することに注意してください。スタイル設定は、選択したすべてのオブジェクトに有効になります。

1.3 ID セレクター

p {    color: red;}

はじめに: ID セレクターは、上記の

タグに示すように、グローバル属性 ID の値に基づいてオブジェクトを選択します。 HTML 言語の標準によれば、ID 値はページ内で一意である必要があるため、理論上、選択された要素は一意です。ただし、同じ id 値が表示された場合は、同じ id 値を持つ要素が選択される可能性があります。 (この動作はブラウザによって異なるため、予期せぬエラーを避けるために、異なる要素に同じ ID 値を設定することは避けるべきです)

1.4 クラスセレクター

#abc {    font-size: 20px; }<br /><br />//<p id="abc">段落</p>

説明: クラス選択 セレクターは、要素内の class 属性。これは、同じ値を意味する同じ class 属性を持つ複数の要素が選択される、一般的に使用されるマルチオブジェクト セレクターです。

1.5 属性セレクター

.abc {    border: 1px solid red; }<br /><br />//<b class="abc">加粗</b><br />//<span class="abc">无</span>

ccoint by 属性セレクター: 属性セレクターは CSS2 バージョンの新しいセレクターですが、HTML5 が完全に普及した時代では、一般的な主流ブラウザの最新バージョンはこれをサポートする必要があります。これは、タグに指定された属性が含まれている場合、それらがすべて選択される、つまり複数のタグが選択されることを意味します。上の例に示すように、href 属性はすべての タグに対して宣言する必要があります。 。

属性セレクターについては、以下の拡張機能があります:

/*css2*/[href] {     color: orange;} <br /><br />//<a herf="..."></a><br />//<a herf="..."></a> 

説明: このセレクターは、対応する属性に加えて、その属性の値も要件を満たさなければならないことをさらに制限します。複数のオブジェクトが要件を満たす場合、複数のオブジェクトも選択されます。

りー

説明: これは CSS3 バージョンの新機能で、通常のマッチングの機能が追加されています。 たとえば、上の例は、属性の値は http である必要があります。

/*css2*/[type="password"] {     border: 1px solid red; } <br /><br />//<input type="password" />

序盤戦とは対照的に、こちらは終盤戦。

/*css3*/[href^="http"] {     color: orange;} 

gatecase- in in- は、属性値に指定された文字が含まれていれば、その文字が先頭か末尾にあるかに関係なく一致します。

/*css3*/[href$=".com"] {    color: orange; } 

説明: 属性に複数の値が含まれる場合、このメソッドを使用して選択できます。

/*css2*/<br />[href*="baidu"] {    color: orange; }

説明: プロパティに複数の値があり、複数の値が使用番号間隔である場合、この選択ツールを使用できます。

2. 複合セレクター

異なるセレクターを組み合わせて新しい特定の一致を形成することを複合セレクターと呼びます。

2.1 グループ化されたセレクター

/*css2*/<br />[class~="edf"] {    font-size: 50px; }<br /><br />//<div class="abc edf"></div>

説明: 複数のセレクターをカンマで区切って、スタイルのセットを同時に設定します。もちろん、要素セレクターをグループ化するだけでなく、ID セレクター、クラス セレクター、属性セレクターを組み合わせて使用​​することもできます。 2.2 子孫セレクター

/*css2*/<br />[lang|="en"] {     color: red;} <br /><br />//<span lang="en-us"></span>

p,b,i,span {     color: red; } 

　　　　说明：选择

元素内部所有元素。不在乎的层次深度，也就是父级元素内不管嵌套了几级，只要有都会被选中。当然，后代选择器也可以混合使用ID选择器、类选择器、属性选择器。

 

　　2.3 子代选择器

ul > li {    border: 1px solid red; }<br /><br />//<ul><br />//　　<li>a</li><br />//　　<li>b</li><br />//　　<div><br />//　　　　<li>c</li><br />//　　</div><br />//</ul>

　　　　说明:子代选择器和后代选择器类似，但是子代选择器只能选择父级元素的下一级元素，而后代选择器不限制层次的深度。

 

　　2.4 相邻兄弟选择器

p + b {    color: red; }<br /><br />//<p></p><br />//<b></b><br />//<b></b>

　　　　说明：相邻兄弟选择器匹配和第一个元素相邻的第二个元素，第三、第四之类的不会匹配。

 

　　2.5  普通兄弟选择器

p ~ b {    color: red; } 

//<p></p><br />//<b></b><br />//<b></b>

　　　　说明：普通兄弟选择器匹配和第一个元素后面的所有元素，不管有几个。
　　　　注意：无论是相邻兄弟选择器还是普通兄弟选择器都不会先前选择。

 

3.伪元素选择器

　　伪元素选择器是更具某些特征来选择的选择器，在css3中引入，其语法特征是包含两个冒号（::）具体如下：

　　3.1 ::first-line 块级首行

div::first-line {     color: red; } 

　　　　说明：块级，只要是针对

、

等带有块级属性的标签的选择器，将选中其首行的文本，进行特定的样式设置。若不在前指定特点的标签，则当前页面的所以块级元素将生效。

 

　　3.2 .::first-letter 块级首字母

div::first-letter {    color: red;}

　　　　说明：块级元素的首行字,若是中文文本，将选中第一个中文字符，其他同上。

 

　　3.3 ::before 文本前插入

a::before {     content: '点击'; } <br /><br />//<a href="...">我</a>　　//设置前<br />//<a href="...">点击我</a>　　//设置后

　　　　说明：这个倒不限制是否是块级元素，多配合content属性使用，在文本前插入内容。

 

　　3.4 ::after 文本后插入

a::after {     content: '很帅';<br />}

//<a href="...">我</a>　　//设置前<br />//<a href="...">我很帅</a>　　//设置后

　　　　说明：在文本后插入内容。（如上所示，能一秒成帅哥）

 

　　3.5 ::selection 文字选择时触发

span::selection {    color:red;      }

　　　　说明：所谓选择时触发，即是按住鼠标左键选择多个文字的时候。如上设置，表示选择后文字变成红色。

 

4.伪类选择器

　　伪类选择器和为元素选择器类似，也是按照某些特征进行选择。其语法特点是包含一个冒号（:），所以和伪元素选择器很容易混淆。伪类选择器分为四种类型：结构性伪类、UI 伪类、动态伪类和其他伪类选择器，具体如下：
　　4.1 结构性伪类选择器

　　结构性伪类选择器能够根据元素在文档中的位置选择元素。这类元素都有一个前缀（:）。

　　4.1.1 根元素选择器

:root {    border: 1px solid red;}

　　　　说明：匹配文档中的根元素，基本不怎么用，因为总是返回元素。

　　4.1.2子元素选择器

ul > li:first-child {    color: red;}

//<ul><br />//　　<li>a</li><br />//　　<li>a</li><br />//</ul>

　　　　说明：这里先用子代选择器选择里

元素里的子代
• 元素，此时可能选中了多个子代元素，再用:first-child表示选择这些子代中的第一个。

   

   

  ul > li:last-child {    color: red;} <br /><br />

  //<ul><br />//　　<li>a</li><br />//　　<li>a</li><br />//</ul>

  　　　　说明：相对的，也能选择子代中的最后一个。

   

  ul > li:only-child {    color: red;} <br /><br />

  //<ul><br />//　　<li>a</li><br />//</ul><br /><br />

  //<ul><br />//　　<li>a</li><br />//　　<li>a</li><br />//</ul>

  　　　　说明:选择只有一个子元素的那个子元素。如上面例子所示，第一个

  下只有一个
  • ，而第二个
    下则有两个
    • ，此时，第一个
      的子元素
      • 将被选中。

         

        ul > li:only-of-type {    color: red;}
        
        //<ul><br />//　　<li>a</li><br />//　　<li>a</li><br />//</ul>
        
        

        //<ul><br />//　　<li>a</li><br />//　　<p>a</p><br />//</ul>

        　　　　说明：这里的情况比较复杂，该选择器表面的是子代中只能有一个指定的类型是，才能被选择。如上面例子所示：第一个

        的子代只有
        • 元素，而第二个
          的子代除了
          • 之外，还有

            。此时，只有第一个

            的子代
            • 才能被选中。注意，选择的还是子代元素。

               

              　　4.1.3 nth-child(n)系列

              ul > li:nth-child(2) {     color: red; }<br /><br />//<ul><br />//　　<li>a</li><br />//　　<li>a</li><br />//　　<li>a</li><br />//　　<li>a</li><br />//</ul>

              　　　　说明：选择子代元素中的第n个元素。

               

              ul > li:nth-last-child(2) {    color: red;} <br /><br />

              //<ul><br />//　　<li>a</li><br />//　　<li>a</li><br />//　　<li>a</li><br />//　　<li>a</li><br />//</ul>

              　　　　说明：选择子代元素中的倒数第n个元素。

               

              div > p:nth-of-type(2) {    color: red;};<br /><br />//<div><br />//　　<span>1</span><br />//　　<p>2</p><br />//　　<span>3</span><br />//　　<p>4</p><br />//</div><br />

              　　　　说明：选择特定子元素的第n个。

               

              div > p:nth-last-of-type(2) {    color: red;}; <br />

              //<div><br />//　　<span>1</span><br />//　　<p>2</p><br />//　　<span>3</span><br />//　　<p>4</p><br />//</div>

              　　　　说明：选择特定子元素的倒数第n个。

               

              　　4.2 UI 伪类选择器

              　　UI 伪类选择器是根据元素的状态匹配元素。

              　　4.2.1 :enabled

              input:enabled {    border: 1px solid red;} <br /><br />//<input type="text" name=username />

              　　　　说明：选择启用状态的元素，多配合表单使用。

              　　4.2.2 :disabled

              input:disabled {    border: 1px solid red;} 

              //<input type="text" name=username />

              　　　　说明：选择禁用状态的元素。

              　　4.2.3 :checked

              input:checked {    display: none;} 

              　　　　说明：选择勾选的input元素。

               

              　　4.2.4:default

              input:default {    display: none;} 

              　　　　说明：从一组类似的元素中选择默认元素。比如 input 被勾选的即默认的。

              　　4.2.5 :valid 和:invalid

              /*验证合法时*/input:valid {    border: 1px solid blue;}/*验证不合法时*/input:invalid {    border: 1px solid green;}

              　　　　说明：输入验证合法与不合法显示时选择的元素。

              　　4.2.6 :required 和:optional

              /*当表单字段是必填项时*/input:required {    border: 1px solid blue;} /*当表单字段是非必填项时*/input:optional {    border: 1px solid green;}

              　　　　说明：根据是否具有 required 属性选择元素。

              　　4.3 动态伪类选择器

              　　4.3.1 link 和 visited

              a:link {    color: red;} a:visited {    color: orange;} 

              　　　　说明： :link 表示未访问过的超链接，:visited 表示已访问过的超链接。

              　　4.3.2 :hover

              a:hover {    color: blue;}

              　　　　说明： 表示鼠标悬停时。

              　　4.3.3 :active

              a:active {    color: green;}

              　　　　说明：表示鼠标按下激活超链接时。

               

              　　4.3.4 :focus

              input:focus {    border: 1px solid red;}

              　　　　说明：表示获得焦点时。

              　　4.4 其他伪类选择器

              　　4.4.1 :not

              a:not([href*="baidu"]) {    color: red;}

              　　　　说明：对条件进行反选

              　　4.4.2 :empty

              :empty {    display: none;}

              　　　　说明：匹配没有任何内容的元素

              　　4.4.3 :target

              :target {    color: red;}

              　　　　说明：定位到锚点时，选择此元素

              暂时总结到这里……