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》— [英] 安迪·巴德、[瑞典] 埃米尔·比约克隆德