css中關於選取器的使用總結

最後更新：2017-10-27 來源：互聯網

上載者：User

創建阿里雲帳戶，並獲得超過 40 款產品的免費試用版；而企業帳戶則可以享有總值 $1200 的免費試用版。立即註冊！

標籤、萬用字元選取器

<!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <title>標籤選取器</title>    <style type="text/css">    <!--    body:標籤選取器    *：萬用字元選取器    .：類別選取器    ，：並集選取器        CSS屬性：     Text-align    Center,left,right    文字置中格式         Font-size    18px    設定文字大小         Font-family    微軟雅黑,宋體    設定字型         Font-weight    Normal預設，bold粗體，100px    設定字型加粗         Font-style    Normal預設，italic斜體    設定字型風格         Color    顏色    設定文字顏色           -->    body{        background:url("xia.jpg");           }    p{        font-size:50px;        color:green;        background-color:blue;        width:300px;        height:200px;    }    *{         font-size: 100px;         color: red;      }    </style></head><body>    <h1>111</h1>    <p>14期威武</p></body></html>

類別選取器

<!DOCTYPE html><html lang="en"><head>   <meta charset="UTF-8">   <title>Document</title>   <style type="text/css">      .G{         font-size: 200px;         color:red;      }      .o1{         font-size: 200px;         color: blue;      }      .o2{         font-size: 200px;         color: yellow;      }      .g1{         font-size: 200px;         color: green;      }      .l{         font-size: 200px;         color: pink;      }      .e{         font-size: 200px;         color: black;      }   </style></head><body>   <span class="G">G</span>   <span class="o1">o</span>   <span class="o2">o</span>   <span class="g1">g</span>   <span class="l">l</span>   <span class="e">e</span></body></html>

複合選取器：交集選取器

選取器+選取器（中間沒有空格）

<!DOCTYPE html>    <html lang="en">    <head>    <meta charset="UTF-8">    <title>Document</title>    <style type="text/css">    .box{    font-size:50px;    }    p.box{    color:red;    }    p#miss{    width: 400px;    height: 300px;    background-color:yellow;    }    </style>    </head>    <body>            <!--其實無非是瀏覽器尋找標籤順序，第一個找到p.box即可；第二個找到            .box類即可            --><p class="box">14期威武</p>    <p class="box">14期霸氣</p>    <p id="miss">14期萬歲</p>    </body>    </html>

後代選取器和子代選取器：實際上就是內含項目關聯性

後代選取器：可隔代遺傳 選取器+空格+選取器

子代選取器：只能尋找第一個後代 選取器+>+選取器

<!DOCTYPE html>    <html lang="en">    <head>    <meta charset="UTF-8">    <title>Document</title>    <style type="text/css">            .box span{            color:red;            }    </style>    </head>    <body>           <!--         下面p標籤會找到.box類，由於span是後代選取器選擇對象，即使隔代也可繼承，所以p標籤         下面的span標籤也可繼承         -->  <p class="box">    <p><span class="miss">14期威武</span>    <span>14期好人</span>    </p>    </p>    <p class="box"><span>14霸氣</span></p>    </body>    </html>

<!DOCTYPE html>    <html lang="en">    <head>    <meta charset="UTF-8">    <title>Document</title>    <style type="text/css">    p>span{    color:red;    font-size:40px;    }            p>span{           color:green;           font-size:60px;                }    </style>    </head>    <body>            <!--            此處，由於是子代選取器，所以span只能繼承p；span只能繼承p；            所以第一個為綠色；第二個為紅色        --><p>    <p><span>14期威武</span></p>    <span>14期霸氣</span>    </p>    </body>    </html

本文章原先以中文撰寫並發佈於 aliyun.com，亦設英文版本，僅作資訊用途。本網站不對文章的準確性，完整性或可靠性或其任何翻譯作出任何明示或暗示的陳述或保證。如對該文章有任何疑慮或投訴，請傳送電郵至 info-contact@alibabacloud.com 並提供相關疑慮或投訴的詳細說明。職員會於 5 個工作天內與您聯絡，一經驗證之後，即會刪除該侵權內容。

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

Get Started for Free

Sales Support

1 on 1 presale consultation

Chat Contact Sales
After-Sales Support

24/7 Technical Support 6 Free Tickets per Quarter Faster Response

Open a Ticket
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.

Learn More