溫馨提示×

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

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

CSS六大基本選擇器的簡(jiǎn)單介紹

發(fā)布時(shí)間：2021-08-07 20:35:53 來(lái)源：億速云 閱讀：159 作者：chen 欄目：編程語(yǔ)言

本篇內(nèi)容介紹了“CSS六大基本選擇器的簡(jiǎn)單介紹”的有關(guān)知識(shí)，在實(shí)際案例的操作過(guò)程中，不少人都會(huì)遇到這樣的困境，接下來(lái)就讓小編帶領(lǐng)大家學(xué)習(xí)一下如何處理這些情況吧！希望大家仔細(xì)閱讀，能夠?qū)W有所成！

CSS是一種格式化網(wǎng)頁(yè)的標(biāo)準(zhǔn)方式，用于設(shè)置網(wǎng)頁(yè)的樣式，并允許樣式信息與網(wǎng)頁(yè)內(nèi)容分離的一種技術(shù)。要使用CSS對(duì)HTML頁(yè)面中的元素實(shí)現(xiàn)一對(duì)一，一對(duì)多或者多對(duì)一的控制，這就需要用到CSS選擇器。本文將向大家介紹六大基本選擇器，即元素選擇器、類(lèi)選擇器、ID選擇器、通用選擇器、偽類(lèi)選擇器、偽元素選擇器。

1、元素選擇器

<!DOCTYPE html>

<html>

<head>

<meta charset="UTF-8">

<title>元素選擇器</title>

<style type="text/css">

p{color: goldenrod;}

h2{color: blueviolet;}

h3{color: rosybrown;}

</style>

</head>

<body>

<h2>this is the head title!</h2>

<h3>this is the second title!</h3>

<p>古詩(shī)詞鑒賞</p>

</body>

</html>

2、類(lèi)選擇器

<!DOCTYPE html>

<html>

<head>

<meta charset="UTF-8">

<title>類(lèi)選擇器</title>

<style type="text/css">

.txt01{

color: #8A2BE2;

}

.txt02{

color: tomato;

}

.txt03{

color: saddlebrown;

}

.txt04{

color: #BC8F8F;

}

</style>

</head>

<body>

<h2 class="txt01">歡迎來(lái)到類(lèi)選擇器</h2>

<h3 class="txt02">數(shù)據(jù)分析總結(jié)表</h3>

<table class="txt03" border="2">

<tr>

<td>01</td>

<td>02</td>

<td>03</td>

<td>04</td>

<td>05</td>

</tr>

<tr>

<td>12.9</td>

<td>12.4</td>

<td>13.9</td>

<td>12.3</td>

<td>11.9</td>

</tr>

</table>

<p class="txt04">分析結(jié)果</p>

</body>

</html>

3、ID選擇器

<!DOCTYPE html>

<html>

<head>

<meta charset="UTF-8">

<title>id選擇器</title>

<style type="text/css">

#txt01{

text-align: center;

color: rosybrown;

}

#txt02{

text-align: center;

font: 楷體;

color: goldenrod;

}

#txt03{

font: 楷體;

font-size: 22px;

align-content: center;

text-align: center;

color: chocolate;

margin: auto;

}

#txt04{

text-align: center;

color: saddlebrown;

}

</style>

</head>

<body>

<h2 id="txt01">歡迎來(lái)到CSS頁(yè)面</h2>

<p id="txt02">數(shù)據(jù)分析表</p>

<table id="txt03" border="2">

<tr>

<td>第一期</td>

<td>第二期</td>

<td>第三期</td>

<td>第四期</td>

<td>第五期</td>

</tr>

<tr>

<td>34.90</td>

<td>46.97</td>

<td>35.15</td>

<td>45.33</td>

<td>50.01</td>

</tr>

<tr>

<td>34.90</td>

<td>46.97</td>

<td>35.15</td>

<td>45.33</td>

<td>50.01</td>

</tr>

</table>

<p id="txt04">總結(jié)分析：</p>

</body>

</html>

4、通用選擇器

<!DOCTYPE html>

<html>

<head>

<meta charset="UTF-8">

<title>通用選擇器</title>

<style type="text/css">

*{

text-align: center;

font-size: 24px;

color: chocolate;

font: "楷體";

margin: auto;

}

</style>

</head>

<body>

<p> 歡迎來(lái)到通用選擇器頁(yè)面</p>

<table border="2">

<tr>

<td>01</td>

<td>02</td>

<td>03</td>

<td>04</td>

<td>05</td>

</tr>

<tr>

<td>12.9</td>

<td>12.4</td>

<td>13.9</td>

<td>12.3</td>

<td>11.9</td>

</tr>

</table>

</body>

</html>

5、偽類(lèi)選擇器

<style>

a{

font-size: 14px;

font-weight: bold;

color: darkgray;

}

a:hover{

color: red;

}

</style>

</head>

<body>

<a href="">首頁(yè)</a>

</body>

6、偽元素選擇器

<p>

<before> </before> < !--默認(rèn)加-->

p1

<after> </after> < !--默認(rèn)加-->

“CSS六大基本選擇器的簡(jiǎn)單介紹”的內(nèi)容就介紹到這里了，感謝大家的閱讀。如果想了解更多行業(yè)相關(guān)的知識(shí)可以關(guān)注億速云網(wǎng)站，小編將為大家輸出更多高質(zhì)量的實(shí)用文章！

向AI問(wèn)一下細(xì)節(jié)

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

css
AI
助
手