学习CSS:完整的指南
我们已经建立了一个完整的指南，以帮助您学习CSS，无论您只是开始与基础或您想探索更先进的CSS。
CSS选择器
您学习了基本id、blass和descendant ，然后就结束了?如果是这样，你就失去了极大的灵活性。虽然本文中提到的许多选择器都是CSS3规范的一部分，因此只能在现代浏览器中使用，但是您应该将它们提交到内存中。
顺便说一下，如果你的CSS有问题，想让专业人士检查并修复任何错误，你可以在Envato Studio上找到一些合格的自由职业者。
1. *
* {
margin: 0;
padding: 0;
}
对于初学者来说，在进入更高级的选择器之前，让我们先排除那些明显的选项。
星号将针对页面上的每个元素。许多开发人员将使用这个技巧来消除空白和填充。虽然这对于快速测试当然很好，但是我建议您不要在生产代码中使用它。它给浏览器增加了太多的负担，是不必要的。
*也可以与子选择器一起使用。
#container * {
border: 1px solid black;
}
这将针对#container div子元素的每一个单独的元素。
举个例子：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>CSS Selectors</title>
<style>
* { border: 1px dotted black; }
</style>
</head>
<body>
<div>
<p> My paragraph here. </p>
<ul>
<li> List Item 1</li>
<li> List Item 2</li>
</ul>
<ul>
<li> List Item 3</li>
<li> List Item 4</li>
</ul>
</div>
</body>
</html>
使用了
<style>
* { border: 1px dotted black; }
</style>
效果图：
无样式：
2. #X
对特定的id使用样式。
#container {
width: 960px;
margin: auto;
}
将散列符号前缀到选择器允许我们根据id进行目标。这是最常见的用法，但是在使用id选择器时要小心。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>CSS Selectors</title>
<style>
#container {
background: #e3e3e3;
}
</style>
</head>
<body>
<div id="container">
<p> My paragraph here. </p>
<ul>
<li> List Item 1</li>
<li> List Item 2</li>
</ul>
<ul>
<li> List Item 3</li>
<li> List Item 4</li>
</ul>
</div>
</body>
</html>
这里设置了背景颜色。
3. .X
根据class进行选择。
.error {
color: red;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>CSS Selectors</title>
<style>
.warning {
color: red;
}
</style>
</head>
<body>
<div id="container">
<p> My paragraph here. </p>
<ul>
<li> List Item 1</li>
<li> List Item 2</li>
</ul>
<ul>
<li class="warning">Something went Wrong </li>
<li> List Item 4</li>
</ul>
</div>
</body>
</html>
效果：
4.X Y
即如取
中的
5. X
按照类型来找
6. X:visited and X:link
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>CSS Selectors</title>
<style>
a:link { color: red; }
a:visted { color: purple; }
</style>
</head>
<body>
Lorem ipsum dolor sit amet, consectetur
<a href="#">adipisicing</a> elit, sed do eiusmod
<a href="http://net.tutsplus.com">tempor</a>
incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
</body>
</html>
其中href='#'
表示链接到自己的页面。
**锚记：** <a name="object-name">name</a><a href="#object-name">name</a>。
**还可以用来关闭窗口：**
<a href="#" onclick="window.close()">关闭</a> 。
7. X+Y
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>CSS Selectors</title>
<style>
ul + p {
color: red;
}
</style>
</head>
<body>
<div id="container">
<ul>
<li> List Item </li>
<li> List Item </li>
<li> List Item </li>
<li> List Item </li>
</ul>
<p> Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor. </p>
</div>
</body>
</html>
这称为相邻选择器。它将只选择紧跟在前一个元素前面的元素。在本例中，每个ul之后的第一段只有红色文本。
限定了p的范围：
8. X > Y
div#container > ul {
border: 1px solid black;
}
选择container中的第一个ul。
<div id="container">
<ul>
<li> List Item
<ul>
<li> Child </li>
</ul>
</li>
<li> List Item </li>
<li> List Item </li>
<li> List Item </li>
</ul>
</div>
#container > ul的选择器只针对uls，这些uls是id为container的div的直接子元素。例如，它不会针对第一个li的子元素ul。
由于这个原因，使用子组合符具有性能优势。事实上，在使用基于javascript的CSS选择器引擎时尤其推荐使用它。
9. X ~ Y
ul ~ p {
color: red;
}
这个兄弟组合子类似于X + Y，但是它没有那么严格。虽然相邻的选择器(ul + p)只选择紧接在前一个选择器前面的第一个元素，但是这个选择器更加一般化。参考上面的例子，它将选择任意p元素，只要它们ul之后。
10. X[title]
在上面的例子中，它被称为属性选择器，它只选择具有title属性的锚标记。不接受此特定样式的锚标记将不会接受此样式。但是，如果你需要更具体些呢?
11. X[href=“foo”]
找到某个链接。需要完整。
12. X[href*=“nettuts”]
链接中含有就行。
13. X[href^=“http”]
找到以http开头的。
14. X[href$=".jpg"]
找到以jpg结尾的。
a[href$=".jpg"] {
color: red;
}
15. X[data-*=“foo”]
a[data-filetype="image"] {
color: red;
}
回到数字8;我们如何补偿所有不同的图像类型:png, jpeg,jpg, gif?我们可以创建多个选择器，比如:
a[href$=".jpg"],
a[href$=".jpeg"],
a[href$=".png"],
a[href$=".gif"] {
color: red;
}
但是，这是一个痛苦的臀部，是低效的。另一个可能的解决方案是使用定制属性。如果我们将自己的data-filetype属性添加到每个链接到图像的锚，结果会怎样?
添加一个属性，会更快速。
<a href="path/to/image.jpg" data-filetype="image"> Image Link </a>
16. X[foo~=“bar”]
a[data-info~="external"] {
color: red;
}
a[data-info~="image"] {
border: 1px solid black;
}
这里有一个特别的，会给你的朋友留下深刻的印象。没有多少人知道这个把戏。tilda(~)符号允许我们针对具有分隔值列表的属性。
<p> Lorem ipsum <a href="http://net.tutsplus.com">Nettuts+</a> sit amet, consectetur "<a href="http://d2o0t5hpnwv4c1.cloudfront.net/839_git/preview.jpg" data-info="external image">Getting Good with Git</a>" elit, sed do eiusmod tempor. </p>
17. X:checked
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>CSS Selectors</title>
<style>
input[type=radio]:checked + label {
color: blue;
}
</style>
</head>
<body>
<form>
<input type="radio" name="rad" value="Radio Button">
<label for="rad"> Radio Button</label>
</form>
</body>
</html>
18. X:after
伪类之前和之后的效果很好。似乎每天，人们都在寻找新的和创造性的方法来有效地使用它们。它们只是围绕所选元素生成内容。
许多人第一次接触这些类是在遇到清除-fix攻击时。
# 类+状态
.clearfix:after {
content: "";
display: block;
clear: both;
visibility: hidden;
font-size: 0;
height: 0;
}
.clearfix {
*display: inline-block;
_height: 1%;
}
19. X:hover
div:hover {
background: #e3e3e3;
}
20. X:not(selector)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>CSS Selectors</title>
<style>
div:not(#container) {
color: blue;
}
*:not(p) {
color: green;
}
</style>
</head>
<body>
<div id="container">
<ul>
<li> List Item
<ul>
<li> Child </li>
</ul>
</li>
<li> List Item </li>
<li> List Item </li>
<li> List Item </li>
</ul>
<ul>
<li>
<a href="#"> Anchor Tag </a>
</li>
<li>
<a href="#"> Anchor Tag </a>
</li>
<li>
<a href="#"> Anchor Tag </a>
</li>
<li>
<a href="#"> Anchor Tag </a>
</li>
</ul>
<p> Lorem ipsum dolor sit amet, <a href="http://www.google.com" data-info="external" title="Some title">consectetur</a> adipisicing elit, sed do <a href="http://nettuts.com">Nettuts</a> tempor. </p>
<p> <a href="http://d2o0t5hpnwv4c1.cloudfront.net/817_rubyNewbies1/preivew.png" data-filetype="image">PNG Image</a> ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor. </p>
<p> Lorem ipsum dolor sit amet, consectetur <a href="#">adipisicing</a> elit, sed do eiusmod tempor. </p>
<p> Lorem ipsum <a href="http://net.tutsplus.com">Nettuts+</a> sit amet, consectetur "<a href="http://d2o0t5hpnwv4c1.cloudfront.net/839_git/preview.jpg" data-info="external image">Getting Good with Git</a>" elit, sed do eiusmod tempor. </p>
</div>
<div> Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. </div>
</body>
</html>
21. X::pseudoElement
第一行：
p::first-line {
font-weight: bold;
font-size: 1.2em;
}
一段的第一个字符：
p::first-letter {
float: left;
font-size: 2em;
font-weight: bold;
font-family: cursive;
padding-right: 2px;
}
22. X:nth-child(n)
li:nth-child(3) {
color: red;
}
li中的第n个孩子。
23. X:nth-last-child(n)
li:nth-last-child(2) {
color: red;
}
从后面数。
24. X:nth-of-type(n)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>CSS Selectors</title>
<style>
ul:nth-of-type(3) {
border: 1px solid black;
}
</style>
</head>
<body>
<div id="container">
<ul>
<li> List Item
<ul>
<li> Child </li>
<li> Child </li>
<li> Child </li>
</ul>
</li>
<li> List Item </li>
<li> List Item </li>
<li> List Item </li>
</ul>
<ul>
<li>
<a href="#"> Anchor Tag </a>
</li>
<li>
<a href="#"> Anchor Tag </a>
</li>
<li>
<a href="#"> Anchor Tag </a>
</li>
<li>
<a href="#"> Anchor Tag </a>
</li>
</ul>
<ul>
<li> List Items </li>
<li> List Items </li>
<li> List Items </li>
</ul>
</body>
</html>
25. X:nth-last-of-type(n)
同上倒数。