CSS基礎知識（上）

1.建立結構化、語義豐富HTML

語義化標記是優秀HTML文檔的基礎。
語義化標記意味着在正確的地方使用正確的元素，從而獲得有意義的文檔。
有意義的文檔能夠確保儘量多的人都可以使用。

1.1 ID和class屬性

爲元素添加ID和class屬性不必定能給文檔增長含義或結構。這兩個屬性只是一種讓其餘因素來操做與解析文檔的通用手段，CSS也能夠利用這一手段。咱們能夠設置這些屬性的值，即爲其起名字。
「名不正則言不順」，起什麼名字意味着它是什麼，或者應該怎麼使用它。

<ul class="product-list">
    <li><a href="/product/1">Product 1</a></li>
    <li><a href="/product/2">Product 2</a></li>
    <li><a href="/product/3">Product 3</a></li>
</ul>

這裏的product-list就意味着它是商品列表。
給元素添加類名時，即便類名明確用於樣式，也不要體現出其視覺效果。正確的作法是讓類名錶示組件的類型。
一個ID只能應用到頁面中的一個元素。

1.2 結構化元素

HTML5新增樂樂一批結構化元素：

• section
• header
• footer
• nav
• article
• aside
• main

關於如何正確使用這些新元素，建議看看這個網站：http://html5doctor.com

在沒有合適的語義元素的狀況下，div仍然是給內容分組的一個不錯的選擇。
有時候，咱們會純粹出於添加樣式的目的而在文檔中添加一個元素。
若是有更具語義的結構化元素，那麼務必使用它們，須要添加樣式時再給它們一個適當的類名。可是，若是你只須要一個無語義的元素做爲額外的樣式接入點，那就使用div。

僅需添加樣式的狀況中，也可使用span。與div不一樣，span是文本級元素。

2.CSS選擇符

有效且結構良好的文檔是添加樣式的基礎。

類型選擇符用於選擇特定類型的元素，好比段落元素。

p {
    color : black;
}

後代選擇符用於選擇某個或某組元素的後代。後代選擇符的寫法是在兩個選擇符之間添加空格。

blockquote p {
    padding-left : 2em;
}

ID選擇符

#intro {
    font-weight : bold;
}

<p id="intro">Happy Birthday, Andy</p>

類選擇符

.intro {
    font-weight : bold;
}

<p class="intro">Happy Birthday, Andy</p>

2.1 子選擇符與同輩選擇符

子選擇符只選擇一個元素的直接後代，也就是子元素。

#nav > li {
  background: url(img/folder.png) no-repeat left top;
  padding-left: 20px;
}

<ul id="nav">
    <li><a href="/home/">Home</a></li>
    <li><a href="/services/">Services</a>
        <ul>
            <li><a href="/services/design/">Design</a></li>
            <li><a href="/services/development/">Development</a></li>
            <li><a href="/services/consultancy/">Consultancy</a></li>
        </ul>
    </li>
    <li><a href="/contact/">Contact Us</a></li>
</ul>

使用相鄰同輩選擇符，就能夠選擇位於某個元素後面，並與該元素擁有共同父元素的元素。

h2 + p {
  font-size: 1em;
  font-weight: bold;
  color: #777;
}

<h2>Peru Celebrates Guinea Pig festival</h2>
<p>The guinea pig festival in Peru is a one day event to ...</p>
<p>Guinea pigs can be fried, roasted or served in a casserole. </p>

>和+在這裏被稱爲組合子（combinator）。
使用通常同輩組合子~能夠選擇h2元素後面的全部段落。

h2 ~ p {
  font-size: 1em;
  font-weight: bold;
  color: #777;
}

一般狀況下，瀏覽器會按照元素在頁面中出現的前後次序給它們應用樣式，瀏覽器不支持向前選擇同輩元素。

2.2 通用選擇符

通用選擇符能夠匹配任何元素。通用選擇符使用星號*表示。

* {
    padding:0;
    margin:0;
}

2.3 屬性選擇符

屬性選擇符基於元素是否有某個屬性或者屬性是否有某個值來選擇元素。

input[type="submit"] {
    cursor: pointer;
}

<input type="submit" />

有時候，咱們關心的是屬性值是否匹配某個模式，而非某個特定值。這時候，經過給屬性選擇符中的符號前面加上特殊字符，就能夠表達出想要匹配的值的形式了。

a[href^="http:"] /* 匹配以某些字符開頭的屬性值 */
img[src$=".jpg"] /* 匹配以某些字符結尾的屬性值 */
a[href*="/about/"] /* 匹配包含某些字符的屬性值 */
a[rel~=next] /* 匹配以空格分隔的字符串中的屬性值 */
a[lang|=en] /* 選擇開頭是指定值或指定值後連着一個短劃線的狀況 */

屬性選擇符參考：http://www.runoob.com/css/css-attribute-selectors.html

2.4 僞元素

僞元素是特殊的選擇符，它不是經過元素來表示的。
::first-letter → 選擇一段文本的第一個字符
::first-line → 選擇一段文本的第一行
::before → 對應着內容開頭的元素
::after → 對應着內容結尾的元素
僞元素參考：http://www.runoob.com/css/css-pseudo-elements.html

2.5 僞類選擇符

僞類選擇符以一個冒號開頭，用於選擇元素的特定狀態或關係。

a:link {
  color: blue;
}
a:visited {
  color: green;
}
a:hover, a:focus {
  color: red;
}
a:active {
  color: purple;
}

<a href="#">百度</a>

:target匹配的元素有一個ID屬性，並且該屬性的值出如今當前頁面URL末尾的井號（#）後邊。
:target僞類選擇符參考：http://www.runoob.com/try/try.php?filename=trycss3_target

/* 反選僞類 */
.comment:target:not(.comment-downvoted) {
  background-color: #fffec4;
}

表單僞類根據用戶與表單控件交互的方式，來反映表單控件的某種狀態。
其餘僞類：

• tr:nth-child(odd)
• tr:nth-child(even)

• tr:nth-child(3n+4)

• :nth-last-child(N)

• :first-child → 選擇第一個子元素

• :last-child

• :only-child

• :only-of-type → 選擇特定類型的惟一子元素

• :nth-of-type(N)

• :nth-last-of-type(N)

參考資料：

• 菜鳥教程
• w3school
• 《精通CSS》— [英] 安迪·巴德、[瑞典] 埃米爾·比約克隆德