序

“想回到过去，试着让故事继续，不再让你离我而去........”
写一段从前的代码，是不是就能将一段泛黄的记忆多挽回一秒钟？

如果复习一段稚嫩的代码就能时光倒流一秒钟
那么........
我希望我不曾写过代码。

CSS几种复杂的选择器

后代选择器

后代是。。。。。？
嵌套关系！

选择器的语法为：父选择器后代选择器 { }

<style>
    div p{
        color:red;
    }
</style>


<body>
    <p>老虎</p>
    <div>
        <p>兔子</p>
    </div>
</body>

那么最后变成红色的当然是兔子啦！

子代选择器

<style>
    div>p{
        color:red;
    }
</style>


<body>
    <div>
        <p>兔子</p>
        <div><p>老虎</p></div>
    </div>
</body>

那么最后变红的只有兔子啦！

并集选择器

并集选择器的语法：选择器1，选择器2{ }

<style>
    h2,
    p{
        color:red;
    }
</style>


<body>
    <p>兔子</p>
    <h2>老虎</h2>
</body>

这样的话，兔子和老虎就全都变成红色啦！

交集选择器

<style>
    p.aaa{
        color:red;
    }
</style>


<body>
    <p class="aaa">兔子</p>
    <p>老虎</p>
    <h2 class="aaa">老鼠</h2>
</body>

那么最后只有兔子会变红，即兔子是p和.aaa的交集

bover伪类选择器

语法：选择器:hover{ }

<style>
    a:hover{
        color:red;
    }
</style>


<body>
    <a href="#">兔子</a>
</body>

那么当鼠标悬停在兔子超链接上的时候，兔子就会变成红色啦！

回到过去

复习最基本的选择器啦~

1.元素选择器

最常见的css选择器当属元素选择器了，在HTML文档中该选择器通常是指某种HTML元素，例如：p,h2,span,a,div乃至html。

用法十分简单，例如：

html {background-color: black;}
p {font-size: 30px; backgroud-color: gray;}
h2 {background-color: red;}

以上css代码会对整个文档添加黑色背景；将所有p元素字体大小设置为30像素同时添加灰色背景；对文档中所有h2元素添加红色背景。

通过上面的例子也可以看出css的基本规则结构：由选择器和声明块组成。每个声明块中包含一个或多个声明。每个声明的格式为：属性名：属性值。

每条声明以分号”;”结尾。如果在一个声明中使用了不正确的属性值，或者不正确的属性，则该条声明会被忽略掉。此外，我们也可以同时对多个html元素进行声明：

h1, h2, h3, h4, h5, h6, p {font-family: 黑体;}

这样会将文档中所有的h1~h6以及p元素字体设置为”黑体”。

如果我们希望一锅粥地选取所有的元素，可以使用通配符”*”：

* { font-size: 20px;}

这样所有的元素都将被选中。

2、类选择器

单纯的元素选择器似乎还过于粗糙了，比如我们希望在文档中突出加粗显示某种重要的内容，例如稿件的截至日期。问题在于我们不能确定稿件的截至日期将会出现在哪种元素中，或者它可能出现在多种不同的元素中。这个时候，我们可以考虑使用类选择器。

要使用类选择器我们需要首先对文件元素添加一个class属性，比如截至日期可能会出现在以下元素中:

<p class="deadline">...</p>
<h2 class="deadline">...</h2>

这样我们就可以用以下方式使用类选择器了：

p.deadline { color: red;}
h2.deadline { color: red;}

点号”.”加上类名就组成了一个类选择器。以上2个选择器会选择所有包含”deadline”类的p元素和h2元素。而其余包含该属性的元素则不会被选中。

如果我们省略.deadline前面的元素名，那么所有包含该类的元素都将被选中：

.deadline { color: red;}

3.ID选择器 ID选择器和类选择器有些类似，但是差别又十分显著。

首先一个元素不能像类属性一样拥有多个类，一个元素只能拥有一个唯一的ID属性。其次一个ID值在一个HTML文档中只能出现一次，也就是一个ID只能唯一标识一个元素(不是一类元素，而是一个元素)。

类似类属性，在使用ID选择器前首先要在元素中添加ID属性，例如：

<p id="top-para">...</p>
<p id="foot-para">...</p>

使用ID选择器的方法为井号”#”后面跟id值。现在我们使用id选择器选择以上2个p元素如下：

#top-para {}
#foot-para {}

这样我们就可以对以上2个段落进行需要的操作了。正因为ID选择器的唯一性，也使其用法变得相对简单。
———————————————————————————————— ———————————————————————————————— ———————————————————————————————— ————————————————————————————————

如果复习一段稚嫩的代码就能时光倒流一秒钟
那么........
我愿意将我脑中的代码统统格式化。

时光倒流之法——复习那些年的稚嫩（CSS选择器）

序