溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
本文將為大家詳細介紹“css中的選擇器有哪些”，內容步驟清晰詳細，細節處理妥當，而小編每天都會更新不同的知識點，希望這篇“css中的選擇器有哪些”能夠給你意想不到的收獲，請大家跟著小編的思路慢慢深入，具體內容如下，一起去收獲新知識吧。
1.選擇符(器)使用基本語法
選擇符｛屬性1：屬性值1;
屬性2：屬性值2;
屬性3：屬性值3;
…..:…….;
}
2.標記選擇器(直接使用HTML標簽做選擇器)
second.html
<!doctypehtml>
<html>
<head>
<metacharset="utf-8">
<title>標記選擇器</title>
<linkhref="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.類選擇器(為每一個標簽設置一個類名，CSS可通過類名為標簽設置樣式，不同標簽類名可以相同，相同可以共用同一個樣式)-CSS中用標簽名.類名或者.類名表示
second.html
<!doctypehtml>
<html>
<head>
<metacharset="utf-8">
<title>類選擇器</title>
<linkhref="second.css"type="text/css"rel="stylesheet">
</head>
<body>
<pclass="text">類選擇器(為每一個標簽設置一個類名，CSS可通過類名為標簽設置樣式，不同標簽類名可以相同，
相同可以共用同一個樣式)---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標簽設置一個唯一的ID，CSS可以通過id來為標簽設置樣式)
—-CSS中用#id值{}來表示
second.html
<!doctypehtml>
<html>
<head>
<metacharset="utf-8">
<title>ID選擇器</title>
<linkhref="second.css"type="text/css"rel="stylesheet">
</head>
<body>
<pclass="text"id="textp1">ID選擇器(為每一個HTML標簽設置一個唯一的ID，CSS可以通過id來為標簽設置樣式)
----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
<!doctypehtml>
<html>
<head>
<metacharset="utf-8">
<title>包含選擇器</title>
<linkhref="second.css"type="text/css"rel="stylesheet">
</head>
<body>
<pclass="text"id="textp1"><ahref="#"class="link">ID選擇器</a>
(為每一個html標簽設置一個唯一的ID，CSS可以通過id來為標簽設置樣式)
----CSS中用#id值{}來表示</p>
</body>
</html>
second.css
pa{
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
<!doctypehtml>
<html>
<head>
<metacharset="utf-8">
<title>子選擇器</title>
<linkhref="second.css"type="text/css"rel="stylesheet">
</head>
<body>
<pclass="text"id="textp1">
<ahref="#"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樣式作用在最后一個標簽)常用設置表格的列屬性–CSS用標簽1+….標簽n表示
second.html
<!doctypehtml>
<html>
<head>
<metacharset="utf-8">
<title>相鄰選擇器</title>
<linkhref="second.css"type="text/css"rel="stylesheet">
</head>
<body>
<pclass="text">
子選擇器:
（IE瀏覽器不支持）：中間不能包含其他標簽；CSS中標簽1>標簽2（子標簽）表示
</p>
<pclass="text1">
相鄰選擇器(CSS樣式作用在最后一個標簽)常用設置表格的列屬性--CSS用標簽1+....標簽n表示</p>
</body>
</html>
second.css
.text+.text1{
color:pink;
background-color:gray;
font-size:34px;
}
8.并集選擇器:多個標簽一起設置樣式，用逗號隔開
second.css
<!doctypehtml>
<html>
<head>
<metacharset="utf-8">
<title>并集選擇器</title>
<linkhref="second.css"type="text/css"rel="stylesheet">
</head>
<body>
<pclass="text">
子選擇器:
（IE瀏覽器不支持）：中間不能包含其他標簽；CSS中標簽1>標簽2（子標簽）表示
</p>
<pclass="text1">
并集選擇器:多個標簽一起設置樣式，用逗號隔開</p>
</body>
</html>
second.css
.text,.text1{
color:pink;
background-color:gray;
font-size:34px;}
9.偽類(元素某一種狀態，常用于描述超鏈接的狀態：link(未訪問狀態);visited(已經訪問過的狀態);hover(鼠標經過狀態);active(正在單擊狀態)CSS用標簽名：狀態表示
second.html
<!doctypehtml>
<html>
<head>
<metacharset="utf-8">
<title>偽類</title>
<linkhref="second.css"type="text/css"rel="stylesheet">
</head>
<body>
<ahref=""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.偽元素(某個對象中某個元素的狀態)CSS中用標簽名：偽類表示
常用的有(first-letter[作用于文字首字]，first-line[作用于文字首行])
second.html
<!doctypehtml>
<html>
<head>
<metacharset="utf-8">
<title>偽類</title>
<linkhref="second.css"type="text/css"rel="stylesheet">
</head>
<body>
<p>偽元素(某個對象中某個元素的狀態)CSS中用標簽名：
偽元素常用的有(first-letter[作用于文字首字]，first-line[作用于文字首行])
<br>偽元素(某個對象中某個元素的狀態)CSS中用標簽名：
偽元素常用的有(first-letter[作用于文字首字]，first-line[作用于文字首行])</p>
</body>
</html>
second.css
p:first-letter{
font-size:200%;
}
p:first-line{
color:red;
}
11樣式優先級：內聯選擇器>ID選擇器>類選擇器（偽類，屬性）>標記選擇器
可以用!important;加大優先級
1.行內樣式，最直接最簡單的一種，直接對HTML標簽使用style=""。2.內嵌樣式，就是將CSS代碼寫在之間，并且用
進行聲明。3.外部樣式，其中鏈接樣式是使用頻率最高，最實用的樣式，只需要在之間加上
感謝您能讀到這里，小編希望您對“css中的選擇器有哪些”這一關鍵問題有了從實踐層面最深刻的體會，具體使用情況還需要大家自己動手實踐使用過才能領會，如果想閱讀更多相關內容的文章，歡迎關注億速云行業資訊頻道！
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
