CSS中常用的選擇器

web.jpeg

1.標(biāo)簽選擇器

  <style>
        p{
            background-color: beige;
            color: red;
            /* 文字的修飾樣式 */
            text-decoration: underline;
            font-size: 30px;
        }
    </style>

<body>
    <p>這個一個段樓標(biāo)簽，一個選擇</p>
</body>
image.png

2.類選擇器

  • 給標(biāo)簽添加一個class屬性
  • 在樣式中 .+類名 來訪問
  • 同一個標(biāo)簽 可以有多個不同的類，類名之間用 空格隔開 
 <style>
        .demo{
         
         color: red;  
           
        }
        .big{
            font-size: 30px;
        }
        .fx1 {
           /* 文字的修飾樣式 */
           text-decoration: underline;
        }

    </style>

<body>
    <p class="demo big">這個一個段樓標(biāo)簽，一個選擇</p>
    <p class="fx1 " >這是一個測試</p>
    <p class="big fx1">哈哈 你好</p>
</body>
image.png

3.id選擇器

  • 在一個html頁面中不可以有相同的Id名
  • id名的取名規(guī)范
    • 只能以字母，數(shù)字，下劃線
    • 必須以字母開頭
    • 不能和標(biāo)簽同名
  <style type="text/css">
        #hezi{
            background: aqua;
            width: 100px;
            height: 100px;
            
        }


    </style>

<body>
        <div id="hezi"></div>
</body>
id選擇器.jpg

4. 后代選擇器

  • 后代選擇和在其他的選擇之間 用 空格 隔開
  • 比如 .houdai p 表示類選擇器houdai所有的p 

 .houdai p{


            background-color: bisque;
            font-size: 50px;
            color: red;
            

        }

 <div class="houdai">
        <ul>
            <li>
                <p>后臺選擇器的測試</p>
            </li>
        </ul>
    </div>
后代.png

5.交集選擇器

交集.png
  • 交集選擇器滿足2個條件（如上圖所示）
    • 必須是h3標(biāo)簽
    • 必須是 special標(biāo)簽
  • 交集選擇器沒有空格 
 h3.special {
            background-color: bisque;
            color: red;
        }


    <div>
        <h3 class="special">交集選擇器</h3>
        <h3 class="special">交集選擇器</h3>
        <h3>交集選擇器</h3>
        <h3>交集選擇器</h3>
        <h3>交集選擇器</h3>
    </div>

6.并集選擇器

  • 不相關(guān)的標(biāo)簽用逗號隔開 
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>CSS之選擇器</title>
    <!-- 樣式-->
    <style type="text/css">

        h3,li{
            color: red;
        }

    </style>
 
   
</head>
<body>

    <div>
        <h3>這是一個標(biāo)題</h3>
        <p>是一個段落</p>
        <ul>
            <li>這是個列表</li>
        </ul>
    </div>
</body>
</html>

7.通配符選擇器

  • 用 * 表示所有的元素

  • 缺點(diǎn)：效率不高

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>CSS之選擇器</title>
    <!-- 樣式-->
    <style type="text/css">

       *{
           color: red;
       }

    </style>
 
   
</head>
<body>

    <div>
        <h3>這是一個標(biāo)題</h3>
        <p>是一個段落</p>
        <ul>
            <li>這是個列表</li>
        </ul>
    </div>



</body>
</ht

8.偽類選擇器

8.1 鏈接偽類選擇器 主要針對于 a標(biāo)簽(其中 link 和 visited只有在a上才有效果)
  • a:link 設(shè)置元素沒有被訪問過的樣式
    • link:沒有被訪問過，如果已經(jīng)點(diǎn)擊一次那么這個偽類在樣式中將不會在顯示
  • a:visited設(shè)置元素被訪問過的樣式
    • visited 訪問過的，如果這個元素被點(diǎn)擊一次，那么將來這個偽類一直會顯示這個樣式，之針對color， background-color, border-color 有效
  • a:hover 設(shè)置鼠標(biāo)懸停時元素的樣式
    • hover 鼠標(biāo)懸停，如果鼠標(biāo)懸停在這個偽類的時候，對應(yīng)的元素會顯示這個樣式
  • a:active 設(shè)置鼠標(biāo)點(diǎn)擊時的樣式
    • active:激活，如果鼠標(biāo)點(diǎn)擊這個元素，元素會顯示這個偽類中設(shè)置樣式

注意：偽類顯示是有順序的，必須是按照上面的順序類 lv-ha
link - visited - hover - active

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>偽類</title>
    <style type="text/css">
        .pp{
            text-decoration: none;
            font-size: 30px;
        }

        a:link {
            color: red;

        }
        a:visited{
            color: purple;

        }

        a:hover {
            color: yellow;

        }
        a:active{
            color: green;

        }


    </style>

</head>
<body>

    <!--偽類-->

    <div>
        <a class="pp" href="#">這是不是偽類</a>
    </div>

</body>
</html>
Untitled.gif

8.2 結(jié)構(gòu)偽類選擇器(CSS3 有兼容性)

  • :first-child:（首個子對象）相對于父級參考 第一個子元素

  • :last-child:選取屬于父級元素的最后一個子元素

  • :nth-child(n):匹配屬于其父元素的第N個字元素

    • :nth-child(even)選擇偶數(shù)個 隔行變色
    • :nth-child(odd)選擇奇數(shù)個
    • 注意：N可以是公式 2n-1 2n+1 3n ...

  • :first-of-type 相對于父級做參考 特定類型(你指定的)的一個子元素

  • 匹配所有作為第一個子元素的 <p> 元素中的所有 <i> 元素
    在下面的例子中，選擇器匹配所有作為元素的第一個子元素的 <p> 元素中的所有 <i> 元素：

<html>
<head>
<style type="text/css">
p:first-child I {
  color:blue;
  } 
</style>
</head>

<body>
<p>some <i>text</i>. some <i>text</i>.</p>
<p>some <i>text</i>. some <i>text</i>.</p>
</body>
</html>

9.屬性選擇器

  • 選取某些帶特有屬性的標(biāo)簽
  • 標(biāo)簽名[屬性] 比如:a[title] 選取a標(biāo)簽里面帶有title屬性的
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>顏色格式</title>
    <style>
        a[title]{
            color: red;
        }

    </style>
</head>
<body>

    <a href="#" title="baidu">百度</a>
    <a href="#" title="xinlang">新浪</a>
    <a href="#">搜狐</a>
    <a href="#">掠食龍</a>
    <a href="#">土豆</a>

    
</body>
</html>
image.png
  • 標(biāo)簽名[屬性='value'] 選取帶有指定屬性和值的元素
 <style>
 
     /* 屬性等于某個值 */
     input[type=text]{
         color: aqua;
     }
   
    </style>
<input type="text" value="文本輸入框">
    <input type="text" value="測試框">
屬性選擇指定屬性的值 
 <style>
        /* 屬性選擇器  選中帶有title屬性的標(biāo)簽 */
     a[title]{
         color: red;
     }
     /* 屬性等于某個值 */
     input[type=text]{
         color: aqua;
     }
     /* 表示font開頭的 選擇器 */
     div[class^=font]{
        color: yellowgreen;
     }
     /* 以sub結(jié)尾的 選擇器 */
     div[class$=sub]{
        color: rebeccapurple;
     }
     /* 包含sub的選擇器 */
     div[class*=sub]{
        color: green;
     }

    </style>

<body>
    <!-- 屬性選擇器 -->
    <a href="#" title="這是百度">百度</a>
    <a href="#" title="這是新浪">新浪</a>
    <a href="#">網(wǎng)易</a>
    <a href="#">優(yōu)酷</a>
    <a href="#">土豆</a>
    <input type="text" value="文本輸入框">
    <input type="text" value="測試框">

    <div class="font12">font12</div>
    <div class="font23">font23</div>
    <div class="font34">font34</div>
    <div class="aafont">aafont</div>
    <div class="aasub">aasub</div>
    <div class="bsub">bsub</div>
    <div class="csub">csub</div>
</body>
image.png

10. 偽元素選擇器

  • E::first-letter 文本的第一個單詞或字
  • E::first-line 文本第一行
  • E::selection 可改變選中文本的樣式

 <style>
        p::first-letter{
            color: red;
        }

        p::first-line{
            font-size: 17px;
            font-weight: bold;
        }

        p::selection{

            background-color: pink;
        }
    
    </style>


 <p>這是一個測試這是一個測試這是一個測試這是一個測試這是一個測試這是一個測試這是一個測試這是一個測試這是一個測試這是一個測試這是一個測試這是一個測試這是一個測試這是一個測試這是一個測試這是一個測試這是一個測試</p>
image.png
  • E::before 和 E::after 在E元素內(nèi)部的開始位置和結(jié)束位置 創(chuàng)建一個元素，該元素為行內(nèi)元素，要結(jié)合content使用 （常用）
<style>
    
        div {

            height: 200px;
            width: 200px;
            background-color: gray;
        }

        div::before {
            content: "開始";
            color: red;
            

        }

        div::after {
            content:"結(jié)束";
            width: 100px;
            height: 100px;

            background-color: blue;

        }
    
    </style>


<div> 偽元素 </div>
image.png

兄弟選擇器

  • +加號選擇器 選擇相鄰的并且在自己后面的一個兄弟
    image.png

    image.png
image.png
  • ~選擇器器，是選擇自身后面 所有的選擇器
    image.png
最后編輯于 ：
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成，瀏覽時請結(jié)合常識與多方信息審慎甄別。
平臺聲明：文章內(nèi)容（如有圖片或視頻亦包括在內(nèi)）由作者上傳并發(fā)布，文章內(nèi)容僅代表作者本人觀點(diǎn)，簡書系信息發(fā)布平臺，僅提供信息存儲服務(wù)。

相關(guān)閱讀更多精彩內(nèi)容

友情鏈接更多精彩內(nèi)容