溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
小編給大家分享一下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.類選擇器(為每一個標簽設置一個類名，CSS可通過類名為標簽設置樣式，不同標簽類名可以相同，相同可以共用同一個樣式)-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"> 類選擇器(為每一個標簽設置一個類名，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
<!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標簽設置一個唯一的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
<!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標簽設置一個唯一的ID，CSS可以通過id來為標簽設置樣式)
----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樣式作用在最后一個標簽)常用設置表格的列屬性–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樣式作用在最后一個標簽)常用設置表格的列屬性--CSS用標簽1+....標簽n表示 </p> </body> </html>
second.css
.text+.text1{
color:pink;
background-color:gray;
font-size:34px;
}8.并集選擇器:多個標簽一起設置樣式，用逗號隔開
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"> 并集選擇器:多個標簽一起設置樣式，用逗號隔開 </p> </body> </html>
second.css
.text,.text1{
color:pink;
background-color:gray;
font-size:34px;}9.偽類(元素某一種狀態，常用于描述超鏈接的狀態：link(未訪問狀態); visited(已經訪問過的狀態);hover(鼠標經過狀態);active(正在單擊狀態)CSS用標簽名：狀態表示
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.偽元素(某個對象中某個元素的狀態)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>偽元素(某個對象中某個元素的狀態)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;加大優先級
以上是“css選擇器的使用方法有哪些”這篇文章的所有內容，感謝各位的閱讀！相信大家都有了一定的了解，希望分享的內容對大家有所幫助，如果還想學習更多知識，歡迎關注億速云行業資訊頻道！
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
