今天剛開通博客，先自我介紹一下，Mike，大學沒填志願就跑到某培訓機構學了兩年，2012年出道，工作歷程可謂坎坷，就不多說了，反正最終選擇從
事web前端的工作。
結合出道至今的工作以及學習，寫下今天這篇博文，與大家分享，並希望各位指點一二，感激不盡。
當年語文沒學好，文采不好，我就直奔主題了。（主要寫一下屬性以及偽類吧）
1、元素選擇器。
這個東西最簡單，也最常見，就是以元素為選擇器來添加樣式
例：
html {color:black;} //設置html元素顏色black
div {color:gray;} //設置div元素顏色gray
h1 {color:silver;} //設置h1元素顏色gray
就是說，你想讓某個元素使用某個樣式，就直接寫 元素{樣式} 即可。
2、選擇器分組
分組就是把某幾個元素寫一起設置相同的樣式即可
例：
div,p,strong{color:#FF0} //設置div,p,strong它們的顏色色值為 FF0
.part_one div a,.part_two a,.part_three p{color:#FFF} //設置.part_one div a 和 .part_two a 和 .part_three p 的文本顏色值為 FFF
3、類選擇器
即元素中帶有屬性class在設置樣式的時候可以使用 .classname{style} 這種方式來設置樣式
例：
<div class="mydiv">This is content.</div>
.mydiv{color:#F00;}
這樣就設置了class為mydiv的元素的文本顏色值為 F00
4、ID 選擇器
即元素中帶有屬性id在設置樣式的時候可以使用 #idname{style} 這種方式來設置樣式
例：
<div id="mydiv1">This is content.</div>
#mydiv1{color:#F00;}
這樣就設置了id為mydiv的元素的文本顏色值為 F00
(其實跟類選擇器沒有什麼大的區別，只是權重的區別，同一個元素id選擇器的樣式會覆蓋類選擇器的樣式，這裡就不做詳細講解了，)
5、後代選擇器
這個也是很常見的一個選擇器，只是可能名稱聽起來有點不太熟悉
舉個例子大家就明白了
例：
div ul{color:#FF0}
這就是一個簡單的後代選擇器，就是誰下面的誰，就是這樣了
6、子元素選擇器
這個選擇器，在最開始的時候，莫名其妙的就被我忽略了，知道後來，突然間看到了一個案例，才又想起來 - -、
還是用例子說話比較好
例：
div > h1{color:red;}
<div><h1>my h1</h1></div> //這個有效
<div><div><h1>li h1</h1></div></div> //這個有效
<div><ul><li><h1>li h1</h1></li></ul></div>
這個例子中只會選擇到第一行和第二行div中的h1而不會選擇到第三行裡面的h1，
因為這個子元素選擇器只會選擇它直屬的子元素而不會選擇它的孫子級別，或者孫子級別以下的元素，
而第三行裡面的h1就屬於li的直屬子元素，而非div的直屬子元素了，所以就不起效
7、相鄰兄弟選擇器
選擇緊接在另一個元素後的元素,且二者有相同的父元素
h1 + p {color:red;}
<h1>header</h1>
<p>text</p>
<p>text</p>
這裡會選擇到h1下面的第一個p，而選擇不到第二個p，因為第二個p並不是緊接在h1後面
li + li {font-weight:bold;}
<ul>
<li>li1</li>
<li>li2</li>
<li>li3</li>
</ul>
<ol>
<li>li1</li>
<li>li2</li>
<li>li3</li>
</ol>
這個樣式，只能應用到ul和ol裡面的第二、三個li元素，因為第一個li它的上面已經沒有緊接著的li了，所以就不會有效果
8、偽類
聽起來很高大上，但是如果說起來a:link,a:visited,a:hover,a:active 這些都是偽類的一種的話，是不是就比較親民了，其實這個a的叫偽錨類（這名
字就更高大上了。。）
:focus
這個比較實用，可以用在input text 裡面設置背景
input:focus{background-color:yellow;}
<input type="text" name="fname" />
<input type="text" name="lname" />
<input type="submit" value="Submit" />
這樣的話，按鈕點下去的時候也會背景變黃，這就有點不爽了，可以隨便擴展一下
如：
input[type="text"]:focus{background-color:yellow;}
這樣submit按鈕就點下去的時候不會變黃了
:first-child
必須聲明 DOCTYPE，這樣 :first-child 才能在 IE 中生效。
p:first-child {font-weight: bold;}
li:first-child {font-weight: bold;}
<p>test words1</p>
<ul>
<li>li1</li>
<li>li2</li>
<li>li3</li>
</ul>
<ul>
<p>test words ul p</p>
<li>li1</li>
<li>li2</li>
<li>li3</li>
</ul>
<p>test words2</p>
<p>test words3<p>test words4</p></p>
first-child偽類，剛開始理解的時候有點無奈，總是以為是誰下面的第一個元素，搞半天，才弄明白，原來是第一個這個元素
就想上面的html一樣
css會選擇到的是 第一個p 即：<p>test words1</p>，和第二個ul中的p <p>test words ul p</p>，剩余的p都不會被選擇
同樣會選擇到每個ul中的第一個li，因為他們擁有不同的父級
注：如果已規定 !DOCTYPE，那麼 Internet Explorer 8 （以及更高版本）支持 :focus 偽類。
:lang
說實話，這個，我還真搞不明白什麼時候用它比較好 - -、 希望哪個看到的大大同樣能為大家解答一下，tks~！
:lang 類為帶有值為 "no" 的 lang 屬性的 q 元素定義引號的類型
q:lang(no){quotes: "~" "~" }
<p>text <q lang="no">what？</q></p>
9、偽元素（這塊我使用到的比較少，查了一下用法，給大家上寫實例吧）
:first-letter 向文本的第一個字母添加特殊樣式（只能用於塊級元素）
p:first-letter{color:#ff0000;font-size:xx-large;}
這樣就設置了p中的首字母顏色 F00 字體大小為 xx-large
偽元素可以與 CSS 類配合使用：
p.article:first-letter{color: #FF0000;}
<p class="article">This is a paragraph in an article。</p>
上面的例子會使所有 class 為 article 的段落的首字母變為紅色。
下面的屬性可應用於 "first-letter" 偽元素：
font
color
background
margin
:first-line 向文本的首行添加特殊樣式
這個我自己感覺沒什麼用，挺少見有只給首行加不同樣式的
p:first-line{color:#0000ff;}
:before 在元素之前添加內容
這種我經常用在清楚浮動上面，效果挺不錯
div:after{clear:both;content:".";display:block;height:0;visibility:hidden;font-size:0;}下面是網上的案例：
h1:before{content:url(images/logo.gif)}
在h1之前添加一個圖片
:after 在元素之後添加內容
h1:after {content:url(images/logo.gif)}
在h1之後添加一個圖片
10、屬性選擇器
對於 IE8 及更早版本的浏覽器中的 [attribute=value]，必須聲明 <!DOCTYPE>。
下面列舉出來屬性選擇器的用法
[attribute] 用於選取帶有指定屬性的元素。
例：
[title]{color:F00;}
<h1 title="hello css">hello h1~!</h1>
<h2>hello h2~!</h2>
這樣就可以設置元素帶有title屬性的文本顏色為 F00 ,即h1的顏色將會被設置為 F00 ，但h2的將不被控制
*[title]{color:F00;} //設置帶有title屬性的元素文本顏色為 F00
a[title]{color:F00;} //設置帶有title屬性的a元素顏色為 F00
.mydiv ul li a[title]{color:F00;} //設置類名為mydiv下面的ul下面的li下面的帶有title屬性的a元素顏色為 F00
#mydiv ul li a[title]{color:F00;} //設置id名為mydiv下面的ul下面的li下面的帶有title屬性的a元素顏色為 F00
[attribute=value] 用於選取帶有指定屬性和值的元素。
這個功能在某些特定情況下是很實用的，比如高亮，就不用使用jq或者後台程序來判斷，只用css來就可以實現
例：
a[target="_blank"]{color:yellow;} //這樣就設置了所有target屬性值為_blank的a元素的顏色為yellow
h1[title="mytitle"]{color:yellow;} //這樣就設置了所有title屬性值為mytitle的h1元素的顏色為yellow
上面兩個例子看過之後，是否就會想出在某些特定情況下的高亮實現方法了呢？
[attribute~=value] 用於選取屬性值中包含指定詞匯的元素。
這種用法，第一次見到的時候還是在wordpress裡面，這裡就以一個簡單的例子來看一下
img[title~="first"]{border:3px solid yellow} //這樣就設置了下方圖片title 屬性中包含單詞first的圖片會帶有黃色邊框
<img src="a.jpg" title="this is first img" />
<img src="b.jpg" title="this is second img" />
[attribute|=value] 用於選取帶有以指定值開頭的屬性值的元素，該值必須是整個單詞。
[class|=my]{background:yellow;}
<h1 class="my-header">this is header</h1>
<p class="my-text">this is text</p>
<p class="my-content">this is content</p>
<p class="my">this is content</p>
<p class="my content">this is content</p>
<p class="mycontent">this is content</p>
<p class="my_content">this is content</p>
只有前四個才會應用樣式，後三個都不行。但是我不明白為什麼第五個就也不行，希望有能為為大家解答的大大出現
[attribute^=value] 匹配屬性值以指定值開頭的每個元素。
這個用法也是在wordpress裡面常見的，控制性很強大
div[class^="my"]{background:#FF0;}
<div class="my">this is first</div> //這個會有效果
<div class="my_first">this is first</div> //這個會有效果
<div class="my-first">this is first</div> //這個會有效果
<div class="second">this is second</div>
<div class="third_my">this is third</div>
[attribute$=value] 匹配屬性值以指定值結尾的每個元素。
這個功能就跟上面的差不多了，上一個是開頭，這個是結尾
div[class$="my"]{background:#ffff00;}
<div class="my_first">this is first</div>
<div class="second">this is second</div>
<div class="third_my">this is third</div> //這個會有效果
<div class="third-my">this is third</div> //這個會有效果
<div class="my">this is third</div> //這個會有效果
[attribute*=value] 匹配屬性值中包含指定值的每個元素。
上面兩個，一個開頭，一個結尾，這個就是包含了
div[class*="my"]{background:#ffff00;}
div[class$="my"]{background:#ffff00;}
<div class="my_first">this is first</div> //這個會有效果
<div class="second">this is second</div>
<div class="secmyond">this is second</div> //這個會有效果
<div class="sec-my-ond">this is second</div> //這個會有效果
<div class="third_my">this is third</div> //這個會有效果
<div class="third-my">this is third</div> //這個會有效果
<div class="my">this is third</div> //這個會有效果
這些東西，不知道在博客園裡面會有多少人能看到，我就當是記錄自己的一些東西吧。
這篇博文並不深入，而且我自己的見解並不多，還有很多要學習的，只是在我工作學習中看到、使用到的一些總結，如果有錯誤的地方，還希望大家能
為我指點出來，互相學習感激不盡。
最後，發現寫這個東西還挺累，真不知道那些幾百幾千篇博文的大大們，咋寫的，膜拜一下他們，哈哈！