CSS的定義規則

圖中的選擇符，也就是今天我們的主角選擇器。熟悉CSS的一眼就能看出圖中是聲明瞭一個類選擇器。再來看一張圖：

圖上六種選擇器在加第一個圖的類選擇器一共7種。

1.類選擇器

• 類選擇器以點開頭。.box{}, .content{}…等等
• 在標籤中通過class引用。

      .box{
          width:100px;
          height:100px;
          background: #3385ff;
      }
       .content{
        margin-left: 40px;
        width:20px;
        height
 
: 20px;
        border-radius: 50%;
        background: #666666;
      }

引用：

        <div class="box">
            <div class="content"></div>
        </div>

效果：

2.標籤選擇器

• 選擇符為標籤名
• 指定哪個標籤為選擇符則整個文件中的所有該標籤都會使用後面的css屬性。

   p{color: #be1932;}
   h3{ color: yellow;}

HTML：

    <section>
 

        <h3>hello，css!</h3>
        <p>CSS的定義規則：<span>選擇器</span> {屬性1：屬性值，屬性2：屬性值....}；由選擇期大括號，大括號內放css各種屬性和值。</p>
    </section>

效果：

3.子選擇器

• 以某一個選擇符開始作為父級後面緊跟一個>（向右尖角號），尖角號後面緊跟的選擇符為子選擇器
• 子選擇器僅在父級下起作用，即如果他的直接父級元素不是尖角號前面的選擇器則不會生效。
• 子選擇器可連續定義多個；.one > .two > .three {};意思是在.one下面的直接子元素使用類選擇器two的元素的直接子元素使用類選擇器three才會生效。

      .one{
            color: #666666;
        }
        .one > .two{
            color: #be1932;
        }
        .one > .two > .three{
            color: #F5AA5F;
        }

HTML:

        <section>
            <div class="one">
               <span class="two">two-hello </span>
               <span> one-Hi</span>
                <span class="two">
                    <span class="three"> three-hello</span>
                    <span> two-Hi</span>
                </span>
                <div class="three">
                    three
                    <!--這裡這個three不會生效，因為 three選擇器要生效必須放在父級使用two的情況下-->
                </div>
            </div>
        </section>

效果：

4.子代選擇器

*子代選擇器跟子選擇器區別是子選擇器只針對當前父級元素下的直接子元素有效，他的孫子輩，曾孫輩都無效，子代選擇器則相反，它所有的後代都可以使用。共同點是不是在該元素內的其他元素不能使用

• 以空格隔開
• 選擇符越靠前父級越高
• 所有子代都可以生效

        .myFontFather{
            color: #0000cc;
        }
        .myFontFather p{
            color: aqua;
        }

所有在 myFontFather下的p元素字型顏色都會生效，不在myFontFather下的都不會生效。

        <section>
            <div class="myFontFather">
                <div>
                    <p>子二代</p>
                    <div>
                        <p>子三代</p>
                    </div>
                </div>
                <p>子一代</p>
            </div>
            <p class="fontSon">我不是myFontFather的子代</p>
        </section>

效果：

5.分組選擇器

分組其實就是不同的選擇器共用相同的屬性。

• 有各種選擇器組成，中間由逗號(,)隔開。
• 所有在一起的選擇器共用相同的屬性。

        .divider{
            font-size: 12px;
        }
        label{
            font-size: 24px;
        }
        #setColor{
            font-size: 48px;
        }
        .divider, label, #setColor{
            color: #0000cc;
        }

字型大小不同，共用一個字型顏色：

        <section>
            <div>
                <span class="divider"> class-divider </span>
                <span> <label>label</label></span>
                <span id="setColor"> id </span>
            </div>
        </section>

效果：

6.ID選擇器

• 以#開頭進行命名
• 通過給HTML設定同名id引用
  這個就不舉例子了，上面5中setColor就是一個ID選擇器以及引用方式都有。

7.通用選擇器

• 以*號標識
• HTML當中所有元素都會生效,不需要引用，只要文件載入了這個css

        *{// 讓所有元素都沒有padding和margin值
            margin: 0;
            padding: 0;
        }

8.補充一點：權值

• 標籤選擇器權值1
• 類選擇器權值10
• ID選擇器權值100
• 權值越高優先順序越高，即優先載入權值高的樣式。
• 同權值情況則使用就近原則，使用當前最近的一個選擇器的樣式。

9.ps:遺漏一種同胞選擇器(18-11-05補充)

• （標籤1 + 標籤2），兩個標籤選擇器以 +(加號)相連線為緊鄰同胞選擇器，特點是標籤2必須緊跟標籤1之後。
• （標籤1 ~ 標籤2），兩個標籤選擇符以 ~（波浪號）相連線為一般同胞選擇器，特點是標籤2跟在標籤1之後但不一定是緊鄰關係

        h1 + span {
            color: #0000cc;
            font-size: 40px;
        }
        h2 ~ span {
            color: #be1932;
            font-size: 24px;
        }

緊鄰同胞選擇器只有緊鄰的第一個元素有效，一般同胞選擇器則是同胞就有效果。

        <section>
            <h1>我是標籤1</h1>
            <span>我是標籤2且緊鄰標籤1</span>
            <span> 我是標籤3，雖然不是緊鄰標籤1但是也是他的同胞啊</span>
        </section>
        <section>
            <h2>我是標籤1</h2>
            <span>我是標籤2且緊鄰標籤1</span>
            <span> 我是標籤3，雖然不是緊鄰標籤1但是也是他的同胞啊</span>
        </section>

第一個section是緊鄰同胞，所以標籤三就沒有獲取樣式，第二個section裡是一般同胞選擇，裡面的2 3標籤都可以獲取樣式。
效果：

ps:有什麼問題或者錯誤歡迎評論。