CSS的定義規(guī)則
圖中的選擇符边篮，也就是今天我們的主角選擇器傀广。熟悉CSS的一眼就能看出圖中是聲明了一個(gè)類選擇器龟虎。再來看一張圖：
圖上六種選擇器在加第一個(gè)圖的類選擇器一共7種咧擂。
1.類選擇器
類選擇器以點(diǎn)開頭噪馏。.box{}, .content{}....等等
-
在標(biāo)簽中通過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.標(biāo)簽選擇器
選擇符為標(biāo)簽名
-
指定哪個(gè)標(biāo)簽為選擇符則整個(gè)文檔中的所有該標(biāo)簽都會使用后面的css屬性。
p{color: #be1932;} h3{ color: yellow;}
HTML：
<section>
<h3>hello疑故，css!</h3>
<p>CSS的定義規(guī)則：<span>選擇器</span> {屬性1：屬性值杠览，屬性2：屬性值....}；由選擇期大括號纵势，大括號內(nèi)放css各種屬性和值踱阿。</p>
</section>
效果：
3.子選擇器
以某一個(gè)選擇符開始作為父級后面緊跟一個(gè)>（向右尖角號），尖角號后面緊跟的選擇符為子選擇器
子選擇器僅在父級下起作用钦铁，即如果他的直接父級元素不是尖角號前面的選擇器則不會生效软舌。
-
子選擇器可連續(xù)定義多個(gè)；.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
<!--這里這個(gè)three不會生效佛点，因?yàn)?three選擇器要生效必須放在父級使用two的情況下-->
</div>
</div>
</section>
效果：
4.子代選擇器
*子代選擇器跟子選擇器區(qū)別是子選擇器只針對當(dāng)前父級元素下的直接子元素有效，他的孫子輩，曾孫輩都無效超营，子代選擇器則相反鸳玩，它所有的后代都可以使用。共同點(diǎn)是不是在該元素內(nèi)的其他元素不能使用
以空格隔開
選擇符越靠前父級越高
-
所有子代都可以生效
.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.分組選擇器
分組其實(shí)就是不同的選擇器共用相同的屬性。
有各種選擇器組成米碰，中間由逗號(,)隔開窝革。
-
所有在一起的選擇器共用相同的屬性。
.divider{ font-size: 12px; } label{ font-size: 24px; } #setColor{ font-size: 48px; } .divider, label, #setColor{ color: #0000cc; }
字體大小不同吕座，共用一個(gè)字體顏色：
<section>
<div>
<span class="divider"> class-divider </span>
<span> <label>label</label></span>
<span id="setColor"> id </span>
</div>
</section>
6.ID選擇器
- 以#開頭進(jìn)行命名
- 通過給HTML設(shè)置同名id引用
這個(gè)就不舉例子了虐译，上面5中setColor就是一個(gè)ID選擇器以及引用方式都有。
7.通用選擇器
以*號標(biāo)識
-
HTML當(dāng)中所有元素都會生效,不需要引用吴趴，只要文檔加載了這個(gè)css
*{// 讓所有元素都沒有padding和margin值 margin: 0; padding: 0; }
8.補(bǔ)充一點(diǎn)：權(quán)值
- 標(biāo)簽選擇器權(quán)值1
- 類選擇器權(quán)值10
- ID選擇器權(quán)值100
- 權(quán)值越高優(yōu)先級越高漆诽，即優(yōu)先加載權(quán)值高的樣式。
- 同權(quán)值情況則使用就近原則史侣，使用當(dāng)前最近的一個(gè)選擇器的樣式拴泌。
9.ps:遺漏一種同胞選擇器
（標(biāo)簽1 + 標(biāo)簽2），兩個(gè)標(biāo)簽選擇器以 +(加號)相連接為緊鄰?fù)x擇器惊橱，特點(diǎn)是標(biāo)簽2必須緊跟標(biāo)簽1之后蚪腐。
-
（標(biāo)簽1 ~ 標(biāo)簽2），兩個(gè)標(biāo)簽選擇符以 ~（波浪號）相連接為一般同胞選擇器税朴，特點(diǎn)是標(biāo)簽2跟在標(biāo)簽1之后但不一定是緊鄰關(guān)系
h1 + span { color: #0000cc; font-size: 40px; } h2 ~ span { color: #be1932; font-size: 24px; }
緊鄰?fù)x擇器只有緊鄰的第一個(gè)元素有效回季，一般同胞選擇器則是同胞就有效果。
<section>
<h1>我是標(biāo)簽1</h1>
<span>我是標(biāo)簽2且緊鄰標(biāo)簽1</span>
<span> 我是標(biāo)簽3正林，雖然不是緊鄰標(biāo)簽1但是也是他的同胞啊</span>
</section>
<section>
<h2>我是標(biāo)簽1</h2>
<span>我是標(biāo)簽2且緊鄰標(biāo)簽1</span>
<span> 我是標(biāo)簽3泡一，雖然不是緊鄰標(biāo)簽1但是也是他的同胞啊</span>
</section>
第一個(gè)section是緊鄰?fù)詷?biāo)簽三就沒有獲取樣式觅廓，第二個(gè)section里是一般同胞選擇鼻忠，里面的2 3標(biāo)簽都可以獲取樣式。
效果：
ps:有什么問題或者錯(cuò)誤歡迎評論杈绸。
