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

來源:互聯網
上載者:User
基本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;}

相關文章

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.