溫馨提示×

溫馨提示×

您好，登錄后才能下訂單哦！

密碼登錄×
登錄注冊×
其他方式登錄
點擊 登錄注冊 即表示同意《億速云用戶服務(wù)條款》

css選擇器的使用方法有哪些

發(fā)布時間：2021-01-26 12:32:19 來源：億速云 閱讀：142 作者：小新 欄目：web開發(fā)

小編給大家分享一下css選擇器的使用方法有哪些，相信大部分人都還不怎么了解，因此分享這篇文章給大家參考一下，希望大家閱讀完這篇文章后大有收獲，下面讓我們一起去了解一下吧！

1.選擇符(器)使用基本語法
選擇符｛    屬性1：屬性值1;
屬性2：屬性值2;
屬性3：屬性值3;
…..: …….;
}
2.標記選擇器(直接使用HTML標簽做選擇器)
second.html

<!doctype html>
<html>
<head>
    <meta charset="utf-8">
    <title>標記選擇器</title>
    <link href="second.css" type="text/css"   rel="stylesheet">
</head>
<body>
    <p> 標記選擇器(直接使用html標簽做選擇器)</p>
</body>
</html>

second.css

p{
    font-size:34px;   
    text-align:left;    
    text-transform:uppercase;    
    font-family:黑體,宋體;    
    text-indent:3em;    
    text-decoration:line-through;    
    font-weight:bolder;    
    letter-spacing:0.5em;    
    line-height:3px;    
    margin:34px;    
    padding:23px;
    }

3.類選擇器(為每一個標簽設(shè)置一個類名，CSS可通過類名為標簽設(shè)置樣式，不同標簽類名可以相同，相同可以共用同一個樣式)-CSS中用標簽名.類名或者.類名表示

second.html

<!doctype html>
<html>
<head>
    <meta charset="utf-8">
    <title>類選擇器</title>
    <link href="second.css" type="text/css"   rel="stylesheet">
</head>
<body>
    <p  class="text"> 類選擇器(為每一個標簽設(shè)置一個類名，CSS可通過類名為標簽設(shè)置樣式，不同標簽類名可以相同，
    相同可以共用同一個樣式)---CSS中用標簽名.類名或者.類名表示    </p>
</body>
</html>

second.css

.text{
    font-variant:small-caps;/*小型大寫字母*/
    font-family:宋體,黑體;    
    font-style:italic;    
    text-transform:lowercase;    
    font-size:35px;    
    text-indent:3em;    
    text-decoration:overline;    
    font-weight:bold;    
    letter-spacing: 1px;    
    line-height:3em;    
    font-variant:small-caps;    
    text-align:right;
    }

4.ID選擇器(為每一個HTML標簽設(shè)置一個唯一的ID，CSS可以通過id來為標簽設(shè)置樣式)
—-CSS中用#id值{ }來表示

second.html

<!doctype html>
<html>
<head>
    <meta charset="utf-8">
    <title>ID選擇器</title>
    <link href="second.css" type="text/css"   rel="stylesheet">
    </head>
    <body>
    <p  class="text" id="textp1"> ID選擇器(為每一個HTML標簽設(shè)置一個唯一的ID，CSS可以通過id來為標簽設(shè)置樣式)
    ----CSS中用#id值{ }來表示    </p>
    </body>
    </html>

second.css

.text{
    font-variant:small-caps;/*小型大寫字母*/
    font-family:宋體,黑體;    
    font-style:italic;    
    text-transform:lowercase;    
    font-size:35px;    
    text-indent:3em;    
    text-decoration:overline;
    }
#textp1{
    font-weight:bold;    
    letter-spacing: 1px;    
    line-height:3em;    
    font-variant:small-caps;    
    text-align:right;
    }

5.包含選擇器(后代選擇器：可跨代,跨標簽)：在一個標簽里包含另一個標簽
second.html

<!doctype html>
<html>
<head>
    <meta charset="utf-8">
    <title>包含選擇器</title>
    <link href="second.css" type="text/css"   rel="stylesheet">
    </head>
    <body>
    <p  class="text" id="textp1">  <a href="#" class="link">ID選擇器</a>
        (為每一個html標簽設(shè)置一個唯一的ID，CSS可以通過id來為標簽設(shè)置樣式)
     ----CSS中用#id值{ }來表示    </p>
     </body>
     </html>

second.css

p a{
    
    text-decoration:none;    
    font-size:25px;    
    background-color:pink;
    }
.text{
    font-size:21px;    
    font-style:normal;    
    text-transform:lowercase;    
    text-indent:3em;    
    font-weight:bold;    
    letter-spacing:0.7em;    
    line-height:27px;
    }

6.子選擇符（IE瀏覽器不支持）：中間不能包含其他標簽；CSS中用 標簽1 >標簽2（子標簽） 表示

second.html

<!doctype html>
<html>
<head>
    <meta charset="utf-8">
    <title>子選擇器</title>
    <link href="second.css" type="text/css"   rel="stylesheet">
    </head>
    <body>
    <p  class="text" id="textp1"> 
             <a href="#" class="link">子選擇器</a>
            （IE瀏覽器不支持）：中間不能包含其他標簽；CSS中 標簽1 >標簽2（子標簽） 表示 
    </p>
    </body>
    </html>

second.css

p>a{
    text-decoration:none;    
    font-family:黑體，宋體;
    }
p{    
font-size: 23px;
}

7.相鄰選擇器:(CSS樣式作用在最后一個標簽)常用設(shè)置表格的列屬性–CSS用標簽1+….標簽n表示

second.html

<!doctype html>
<html>
<head>
    <meta charset="utf-8">
    <title>相鄰選擇器</title>
    <link href="second.css" type="text/css"   rel="stylesheet">
    </head>
    <body>
    <p  class="text" > 
            子選擇器:
            （IE瀏覽器不支持）：中間不能包含其他標簽；CSS中 標簽1 >標簽2（子標簽） 表示 
    </p>

    <p class="text1">
        相鄰選擇器(CSS樣式作用在最后一個標簽)常用設(shè)置表格的列屬性--CSS用標簽1+....標簽n表示    </p>
        </body>
        </html>

second.css

.text+.text1{
    color:pink;    
    background-color:gray;    
    font-size:34px;
    }

8.并集選擇器:多個標簽一起設(shè)置樣式，用逗號隔開

second.css

<!doctype html>
<html>
<head>
    <meta charset="utf-8">
    <title>并集選擇器</title>
    <link href="second.css" type="text/css"   rel="stylesheet">
    </head>
    <body>
    <p  class="text" > 
            子選擇器:
            （IE瀏覽器不支持）：中間不能包含其他標簽；CSS中 標簽1 >標簽2（子標簽） 表示 
    </p>

    <p class="text1">
        并集選擇器:多個標簽一起設(shè)置樣式，用逗號隔開    </p>
        </body>
        </html>

second.css

.text,.text1{
    color:pink;
    background-color:gray;    
    font-size:34px;}

9.偽類(元素某一種狀態(tài)，常用于描述超鏈接的狀態(tài)：link(未訪問狀態(tài)); visited(已經(jīng)訪問過的狀態(tài));hover(鼠標經(jīng)過狀態(tài));active(正在單擊狀態(tài))CSS用標簽名：狀態(tài)表示

second.html

<!doctype html>
<html>
<head>
    <meta charset="utf-8">
    <title>偽類</title>
    <link href="second.css" type="text/css"   rel="stylesheet">
    </head>
    <body>
    <a href="" class="a1">偽類</a>
    </body>
    </html>

second.css

a:link {
    color:blue;    
    font-size:53px;    
    text-decoration: none;
    }
a:visited {
    color:red;    
    font-size:193px;
    }
a:hover  {
    color:green;    
    font-size:73px;
    }
a:active  {
    color:gray;    
    font-size:183px;
    }

10.偽元素(某個對象中某個元素的狀態(tài))CSS中用標簽名：偽類表示
常用的有(first-letter[作用于文字首字]，first-line[作用于文字首行])
second.html

<!doctype html>
<html>
<head>
    <meta charset="utf-8">
    <title>偽類</title>
    <link href="second.css" type="text/css"   rel="stylesheet">
    </head>
    <body>
    <p>偽元素(某個對象中某個元素的狀態(tài))CSS中用標簽名：
 偽元素常用的有(first-letter[作用于文字首字]，first-line[作用于文字首行])  
 <br>偽元素(某個對象中某個元素的狀態(tài))CSS中用標簽名：
 偽元素常用的有(first-letter[作用于文字首字]，first-line[作用于文字首行])    </p>
 </body>
 </html>

second.css

p:first-letter{
    font-size:200%;
    }
p:first-line{
    color:red;
    }

11樣式優(yōu)先級：內(nèi)聯(lián)選擇器>ID選擇器>類選擇器（偽類，屬性）>標記選擇器
可以用!important;加大優(yōu)先級

以上是“css選擇器的使用方法有哪些”這篇文章的所有內(nèi)容，感謝各位的閱讀！相信大家都有了一定的了解，希望分享的內(nèi)容對大家有所幫助，如果還想學(xué)習(xí)更多知識，歡迎關(guān)注億速云行業(yè)資訊頻道！

向AI問一下細節(jié)

免責(zé)聲明：本站發(fā)布的內(nèi)容（圖片、視頻和文字）以原創(chuàng)、轉(zhuǎn)載和分享為主，文章觀點不代表本網(wǎng)站立場，如果涉及侵權(quán)請聯(lián)系站長郵箱：is@yisu.com進行舉報，并提供相關(guān)證據(jù)，一經(jīng)查實，將立刻刪除涉嫌侵權(quán)內(nèi)容。

AI
助
手