css 的基本選擇器,複合選擇器,後代選擇器
阿新 • • 發佈:2018-12-26
基本CSS選擇器有標記選擇器、類別選擇器、ID選擇器3種
1。標記選擇器
每一種HTML標記的名稱都可以作為相應的標記選擇器的名稱,如h1,p,等等
2。類別選擇器
類別選擇器的名稱可以由使用者自定義
格式如下:.class{color:green;font-size:20px;}
3。ID選擇器
與類別選擇器相試
格式如下:#id{color:green;font-size:20px;}
複合選擇器:就是兩個或者多個基本選擇器,通過不同方式連線而成的選擇器
有兩種情況:”交集“選擇器、“並集”選擇器
1“交集”選擇器:
由兩個選擇器直接連線構成,其結果是選中二者各自元素範圍的交集,
如:h3.class{color:red;font-size:23px;}
2“並集”選擇器:
2.1同時選中各個基本選擇器所選擇的範圍,任何形式的選擇器都可以,並集選擇器是多個選擇器通過逗號連線而成的,
格式如:h1,h2,h3{color:red;font-size:23px;}
2.2後代選擇器:
後代選擇器書寫方法:把外層的標記寫在前面,內層的標記寫在後面,之間用空格分隔,當標記發生巢狀時,內層的標記就成為外層標記的後代了
舉個列子
<html>
<head>
<
<style type="text/css">
p span{
color:red
}
span
{
color:blue;
}
</style>
</head>
<body>
<p>
巢狀<span>用CSS</span>
標記的方法
</p>
巢狀之外的<span>標記</span>不生效
</body>
</html>
後代選擇器產生的影響不僅限於元素的“直接後代”,而且會影響到它的“各級後代”
子選擇器:也就是隻有對直接後代有影響的選擇器,而對“孫子”以及對個層的後代不產生作用。
格式如下:p>span{color:blue;}