一CSS種常見(jiàn)的幾種選擇器
前言
屬性
通過(guò)屬性的復(fù)雜疊加才能做出漂亮的網(wǎng)頁(yè)選擇器
通過(guò)選擇器找到對(duì)應(yīng)的標(biāo)簽設(shè)置樣式
二, 下面我們學(xué)習(xí)幾個(gè)常見(jiàn)的選擇器
<!--常見(jiàn)的幾種CSS選擇器-->
<html>
<head>
<meta charset="UTF-8">
<title>常見(jiàn)的幾種CSS選擇器</title>
<!--CSS中的頁(yè)內(nèi)樣式-->
<style>
/*標(biāo)簽選擇器*/
div {
color: red;
font-size: 20px;
}
/*類選擇器 : . + 類名即可*/
.William {
color: greenyellow;
font-size: 50px;
}
/*id選擇器*/
#first {
color: red;
font-size: 30px;
}
/*并列選擇器*/
div,.Alex {
color: blueviolet;
background-color: darkolivegreen;
font-size: 30px;
}
/*復(fù)合選擇器*/
p.Jhon {
font-size: 30px;
}
/*后代選擇器*/
div p {
color: purple;
}
/*直接后代選擇器*/
div > p {
color: greenyellow;
background-color: brown;
}
/*相鄰兄弟選擇器*/
div + p {
color: magenta;
background-color: cyan;
}
/*屬性選擇器*/
div[name] {
color: red;
font-size: 50px;
}
/*注意:div[name][age]之間是不能有空格的*/
div[name][age] {
color: gold;
font-size: 20px;
}
p[name = "大臉貓"] {
color: white;
background-color: red;
}
</style>
</head>
<body>
<div>小剛哥哥叫Alex</div>
<p class="William">你也可以親切的叫他William</p>
<div id="first">學(xué)習(xí)編程是一個(gè)持續(xù)學(xué)習(xí)的過(guò)程</div>
<div class="Alex">iOS不是你想象的那么難,覺(jué)得難說(shuō)明你沒(méi)有下功夫</div>
<p class="Jhon">多出去走走,看看學(xué)學(xué)新知識(shí)</p>
<!--后代-->
<div>
<p>div的兒子</p>
<span>
<p>div的孫子</p>
</span>
</div>
<p>div外面的p</p>
<!--直接后代-->
<div>
<p>div的兒子</p>
<span>
<p>div的孫子</p>
</span>
</div>
<p>div外面的p</p>
<!--相鄰兄弟-->
<div>
<p>div的兒子</p>
<span>
<p>div的孫子</p>
</span>
</div>
<p>div相鄰的p</p>
<p>div相鄰的p的兄弟p</p>
<!--屬性選擇器-->
<div name = "Alex">真的是屬性選擇器</div>
<div name = "William" age = "22">這是真實(shí)年齡</div>
<p name = "大臉貓">大臉貓愛(ài)吃魚</p>
</body>
</html>
- 總結(jié) :
需要主要每種選擇的器的頁(yè)內(nèi)樣式是怎么書寫的,表示的是什么意思.需要注意的點(diǎn)是什么.
