基本CSS選擇器,複合選擇器,後代選擇器

技術小大人發表於2017-11-16
CSS

基本CSS選擇器有標記選擇器、類別選擇器、ID選擇器3種
1。標記選擇器
    每一種HTML標記的名稱都可以作為相應的標記選擇器的名稱，如h1,p,等等
2。類別選擇器
    類別選擇器的名稱可以由使用者自定義
   格式如下：.class{color:green;font-size:20px;}
3。ID選擇器
    與類別選擇器相試
   格式如下：#id{color:green;font-size:20px;}



複合選擇器：就是兩個或者多個基本選擇器，通過不同方式連線而成的選擇器
有兩種情況：”交集“選擇器、“並集”選擇器 
1。“交集”選擇器：由兩個選擇器直接連線構成，其結果是選中二者各自元素範圍的交集，其中第一必須是標記選擇器，第二個必須是類別選擇器或者ID選擇器，兩個選擇器之間不能有空格，必須連續書寫
如：h3.class{color:red;font-size:23px;}


2。“並集”選擇器：同時選中各個基本選擇器所選擇的範圍，任何形式的選擇器都可以，並集選擇器是多個選擇器通過逗號連線而成的，

格式如:h1,h2,h3{color:red;font-size:23px;}


後代選擇器：

後代選擇器書寫方法：把外層的標記寫在前面，內層的標記寫在後面，之間用空格分隔，當標記發生巢狀時，內層的標記就成為外層標記的後代了

舉個列子

<html>
<head>
<title>後代選擇器</title>
<style type=”text/css”>
p span{
   color:red
}
span
{
  color:blue;
}
</style>
</head>
<body>
<p>巢狀<span>用CSS</span>標記的方法</p>巢狀之外的<span>標記</span>不生效
</body>
</html>

效果是：“用CSS”的顯示紅色，其他用<span>包圍起來的是蘭色
後代選擇器產生的影響不僅限於元素的“直接後代”，而且會影響到它的“各級後代”
子選擇器：也就是隻有對直接後代有影響的選擇器，而對“孫子”以及對個層的後代不產生作用。

格式如下：p>span{color:blue;}


本文轉自    風雨蕭條 部落格，原文連結：   http://blog.51cto.com/1095221645/1792385     如需轉載請自行聯絡原作者



相關文章