Scrapy分布式爬虫打造搜索引擎 （第4章），CSS
本章主要介绍介绍一下CSS的基本语法以及其定位器。
什么是CSS
CSS指层叠样式表，其主要作用是定义HTML的元素如何显示。
我们知道HTML主要关注内容，也就是说要展示给我们的是什么样的东西，可以把它比做TXT的文档。
但是还要在HTML里面把格式什么的都加上，当然是可以，但是稍显冗杂，而且不易于复用格式。所以我们可以把格式的设定单独剥离出来，存储在样式表中。
这样HTML主要关心内容，CSS主要关心格式，更为灵活。
我们可以举一个例子：
下图为一个没有任何格式的HTML页面。
image.png
如果我们加上了样式一：
对body、标题、表格、链接等进行了设置
body
{
font-size:75%;
font-family:verdana,arial,'sans serif';
background-color:#FFFFF0;
color:#000080;
margin:10px;
}
h1 {font-size:200%;}
h2 {font-size:140%;}
h3 {font-size:110%;}
th {background-color:#ADD8E6;}
ul {list-style:circle;}
ol {list-style:upper-roman;}
a:link {color:#000080;}
a:hover {color:red;}
效果为：
image.png
如果我们更换一种样式，则效果将会改变：
[图片上传失败...(image-a04073-1518859977532)]
所以使用CSS的意义在于更为灵活。我们完全可以通过更换CSS的方式，实现不同的显示效果。
CSS的基础结构
上面我们说了CSS其实就是一个单独的文件，里面指明了HTML的某种元素应该是什么样的格式。
如下图，h1代表的是HTML中的标题，我们可以称为Selector，也叫选择器。
后面大括号里面的称为声明，也就是对h1这种元素的格式的声明。
每条声明通过键值对的形式呈现，比如color:blue，color代表着属性，而blue则为属性要设置的值。
image.png
选择器
id选择器、class选择器、元素选择器
我们知道要表示HTML的中的某个元素的格式，首先需要选中它，也就是需要使用Selector选择器，主要有三种基本的方式：
-
id选择器
-
class选择器
-
元素选择器
id选择器可以为标有id的HTML元素指定样式。
比如：
#para1
{
text-align:center;
color:red;
}
class选择器用与描述一组元素的样式，在HTML中以class属性表示。
class选择器与id选择器的区别在于：class可以在多个元素里面使用。
比如
.center {text-align:center;}
下面代代码表示所有p元素中使用class = "center"的格式：
p.center {text-align:center;}
元素选择器又叫标签选择器，使用标签名作为selector名。
比如：
p{
font-style:italic;
}
使用一个表格来总结
| 表达式 | 说明 |
|---|---|
| p{text-indent:3em;} | HTML选择器 |
| .note{font-size:small;} | 类选择器 |
| #main{text-indent:3em;} | ID选择器 |
组合选择符
我们知道class的名称可能在HTML代码中有若干个，但是我们希望能够更精确的确认某个class，怎么办呢？
可以使用组合选择符，主要有
-
包含选择器
-
子选择器
-
兄弟选择器。
下面一一介绍：
- 包含选择器：语法格式为a b {……}
div p {color : yellow}；
对应的HTML为：
<div>
<p>yellow</p>
</div>
也就是a包含着b，即b是a的子元素。
-
子选择器：
同样也就是目标选择器在某个选择器的内部。那与上述的包含选择器有何区别？
子选择器可以嵌套更深，也就是可以是div的孙子及以上。语法格式为：A>B{……}
比如：
div>p{
color:red;
}
HTML代码：
<div>
<p>red text</p><!--文字是红色的-->
<table>
<tr>
<td>
<p>no red text;</p><!--文字是非红色的-->
</td>
</tr>
</table>
</div>
可以看出，p是div嵌套了很多层以后的标签。
-
后续兄弟选择器
所有
<div>元素之后的所有相邻兄弟元素<p>
div~p{
color:red;
}
```
HTML代码
```
<p>之前段落，不会添加背景颜色。</p>
<div>
<p>段落 1。 在 div 中。</p>
<p>段落 2。 在 div 中。</p>
</div>
<p>段落 3。不在 div 中。</p>
<p>段落 4。不在 div 中。</p>
```
image.png
-
相邻兄弟选择器
指的是紧接在另一个元素后的元素，而且两者有相同的父元素的情况。
这个时候可以使用相邻兄弟选择器。
语法为：A+B{……}
比如
div+p
{
background-color:yellow;
}
可以选择出div后面的那个p，而不是div里面的 p
<div>
<h2>My name is Donald</h2>
<p>I live in Duckburg.</p>
</div>
<p>My best friend is Mickey.</p>
image.png
-
分组
如果有很多相同的样式的元素，可以使用分组
h1{color:green;}
h2{color:green;}
p{color:green;}
可以使用逗号分隔：
h1,h2,p{
color:green;
}
总结如下：
| 表达式 | 说明 |
|---|---|
| div a | 子节点 |
| div#containner>ul | 选id为container的div的第一个子元素 |
| div~p | 选与div相邻的所有p元素 |
| div+ p | 选div后面的第一个p元素 |
属性 选择器
-
属性选择器
比如如下的代码是把包含标题（title）的所有元素变为蓝色：
[title]
{
color:blue;
}
- 属性和值选择器
下面的例子改变了标题title='runoob'元素的边框样式:
[title=runoob]
{
border:5px solid green;
}
总结如下：
| 表达式 | 说明 |
|---|---|
| a[title] | 有title属性的a元素 |
| a[href*="jobole"] | 选所有href属性包含jobbole的 |
| a[href^="http"] | 以http开头 |
| a[href$=".jpg"] | 以.jpg结尾 |
| input[type=radio]:checked | 选择radio的元素 |
| div:not(#container) | id非container的div属性 |
