深入理解CSS选择器优先级

外话

今天把《CSS REFACTORING》（中文名叫《CSS重构：样式表性能调优》）电子书粗略的浏览了一遍，这本书很薄，150页左右，首先是介绍了什么是重构并举了两个简单的重构例子，然后介绍了CSS的选择器优先级，再然后介绍了CSS的最佳实践，再然后就介绍如何重置浏览器的默认样式，最后比较虚的、纯理论的介绍了CSS重构的策略，然后就没有然后了。这书整体内容很简单，但是，其中对于 CSS选择器优先级计算作了比较深入的讲解。

什么是选择器优先级（Specificity）

直接复制了MDN对优先级的定义上的解释：

浏览器通过优先级来判断哪一些属性值与一个元素最为相关，从而在该元素上应用这些属性值。优先级是基于不同种类选择器组成的匹配规则。

这句话也是很抽象，暂且先不管它了。但是我们可以先看一个例子：

HTML:

<div id="content" class="content">
我是什么颜色
</div>

CSS：

#content {
 color: #f00;
}
.content {
 color: #0f0;
}

那最后文字是什么颜色呢？答案很简单：红色。这就涉及到了优先级问题，同一块内容，我们同时用了 ID选择器和类选择器,因为 ID选择器优先级大于类选择器 , 所以最终显示为红色。

优先级的计算规则

相信每位写过CSS的朋友都知道，CSS选择器的优先级关系是:

内联 > ID选择器 > 类选择器 > 标签选择器。

但是，浏览器具体的优先级算法是怎样的？可能还有些人不知道。《CSS REFACTORING》中提到了算法的过程。

A specificity is determined by plugging numbers into (a, b, c, d):

If the styles are applied via the style attribute, a=1; otherwise, a=0.
b is equal to the number of ID selectors present.
c is equal to the number of class selectors, attribute selectors, and pseudoclasses present.
d is equal to the number of type selectors and pseudoelements present.

翻译过来就是

优先级是由 A 、B、C、D 的值来决定的，其中它们的值计算规则如下：

如果存在内联样式，那么 A=1, 否则 A=0;
B 的值等于 ID选择器出现的次数;
C 的值等于类选择器和属性选择器和伪类出现的总次数;
D 的值等于标签选择器和伪元素出现的总次数。

这样子直接看好像也还是很明白，那先上个例子：

#nav-global > ul > li > a.nav-link

套用上面的算法，依次求出 A B C D 的值：

因为没有内联样式，所以 A=0;
ID选择器总共出现了1次， B=1;
类选择器出现了1次，属性选择器出现了0次，伪类选择器出现0次，所以 C=(1 + 0 + 0)=1；
标签选择器出现了3次，伪元素出现了0次，所以 D=(3 + 0)=3;

上面算出的A 、 B、C、D 可以简记作：(0, 1, 1, 3)。

为了熟悉掌握优先级算法，我们再来做一些练习：

li /* (0, 0, 0, 1) */
ul li /* (0, 0, 0, 2) */
ul ol+li /* (0, 0, 0, 3) */
ul ol+li /* (0, 0, 0, 3) */
h1 + *[REL=up] /* (0, 0, 1, 1) */
ul ol li.red /* (0, 0, 1, 3) */
li.red.level /* (0, 0, 2, 1) */
a1.a2.a3.a4.a5.a6.a7.a8.a9.a10.a11 /* (0, 0, 11,0) */
#x34y /* (0, 1, 0, 0) */
li:first-child h2 .title /* (0, 0, 2, 2) */
#nav .selected > a:hover /* (0, 1, 2, 1) */
html body #nav .selected > a:hover /* (0, 1, 2, 3) */

OK，现在已经弄清楚了优先级是怎么算的了。但是，还有一个问题，怎么比较两个优先级的高低呢？

比较规则是: 从左往右依次进行比较，较大者胜出，如果相等，则继续往右移动一位进行比较。如果4位全部相等，则后面的会覆盖前面的

再来看一下例子：

html:

<div class="nav-list" id="nav-list">
 <div class="item">nav1</div>
 <div class="item">nav2</div>
</div>

CSS：

#nav-list .item {
 color: #f00;
}
.nav-list .item {
 color: #0f0;
}

算出 #nav-list .item 的优先级是 (0, 1, 1, 0), .nav-list .item 的优先级是 (0, 0, 2, 0)。左边第一位都是0，再看看左边第二位，前者是1，后者是0，所以（0, 1, 1, 0）的大于 (0, 0, 2, 0) ，即 #nva-list .item 大于 .nav-list .item，所以字体会是红色。

优先级的特殊情况

经过上面的优先级计算规则，我们可以知道内联样式的优先级是最高的，但是外部样式有没有什么办法覆盖内联样式呢？有的，那就要 !important 出马了。因为一般情况下，很少会使用内联样式，所以 !important 也很少会用到！如果不是为了要覆盖内联样式，建议尽量不要使用 !important 。、

那可能有人会想，那如果我内联样式用了 !important，是不是外部样式就没有办法了呢？比如下面的代码：

HTML:

<div class="app" style="color:#f00!important">666</div>

CSS:

.app {
 color: 0f0!important;
}

是的，你赢了，这时候内联样式已经强大到不管你外部样式怎么写都无法覆盖它了。这种情况在实际代码中是要杜绝的！记住，千万不要在内联样式中使用 !important

最后， !important 真的是的无法超越的王者吗？其实不是的，一些情况，我们可以超越 !important, 请看下面的例子：

html:

<div class="box" style="background: #f00; width: 300px!important;"><div>

css:

.box {
 max-width: 100px;
}

这时候 .box 的宽度只有 100px , 而不是 300px, 可见，max-width 可以超越 width!important!但是，这实际上不是优先级的问题，因为优先级是比较相同属性的，而 max-width 和 width 是两个不同的问题。之所以举这个例子，是要告诉大家，有时候不管怎么设置容器的 width 都不生效，检查一下是不是有人写了 max-width 坑了你哈。

OK，优先级先写到这里啦，朋友们有问题欢迎留言讨论~ 作者：渔歌。

家都知道display可以转换元素类型，但是大多人其实对于display的属性值，比较熟悉的只是block和inline以及inline-block和none，对于其他属性值，了解都比较一般，在平时开发过程中也不太用得到其他的属性值，但是每次用这个属性的时候，脑海里都会冒出来，其他的属性值，设置了会是怎么样、有什么样的特点，这个奇奇怪怪的想法，所以找了个时间，写下这篇文章，跟我有相同可爱想法的伙伴，如果感兴趣的，可以驻步瞄一眼哟；

一、css规定，元素类型有两大类，一类是块状元素，一类是行内元素，首先了解一下两种元素类型的特征：

块状元素特征：

块状元素可以正确解释盒模型的属性width,height,padding,margin,border
块状元素前后带有换行符，所以自占一行，在垂直方向一个接一个的放置；
块状元素一般作为容器、盒子使用；
块状元素默认情况下，宽度与父元素同宽，高度根据内容而定，没有内容，高度为0；

行内(内联)元素特征：

行内元素不能正确解释盒模型的属性，width、height执行无效，padding、border、margin解释时，左右解释没有问题，上下解释不正确；
行内元素在一行内从左往右依次排列；
行内元素默认情况下，宽度和高度都根据内容而定；

二、元素类型的转换

display属性：规定元素应该生成的框的类型（改变元素的类型，使用display属性）。

ps：以下就是每个属性的详解了，啦啦啦啦啦啦啦；

属性值详解：

1、none：此元素不会被显示；

（1） none此单词的意思是没有一个、毫无的意思；所以当display的属性值设置为none的时候，表示的是没有框类型，没有框类型的元素，是无法在浏览器中显示的，就实现隐藏元素的作用了；

示例如下：

html结构：

    <div></div>
    <p>我是p，测试div消失后，会不会占据浏览器空间</p>

css样式：

     <style>
        div{
            width:100px;
            height:100px;
            background:violet;
            /*设置div的属性值为none，观察div是否会隐藏不可见*/
            display: none;
        }
        p{
            background:yellowgreen
        }
    </style>

以上代码效果可以看出，div设置none之后，实现了完全消失并且不占据浏览器的空间效果；

（2）有很多标签，display的属性值默认是none，比如 head meta style link等等；

（3）项目应用中，做二级导航效果或者鼠标悬停效果动态时，会经常用到这个属性值，下次我们写一个好玩的二级效果再来展示这个属性值的作用；

2、block：此元素将显示为块级元素，此元素前后会带有换行符。

示例如下：

 html结构：
     <em>我原本是行内元素</em>
 css样式：
       <style>
            em{
                width:100px;
                height:100px;
                background:tomato;
               /*em本来是行内元素元素,现在使用display属性转换为块状元素 */
                display: block;
            }
        </style>

3、inline 默认。此元素会被显示为内联元素，元素前后没有换行符。

示例如下：

  html结构：   
    <div>我原本是块状元素</div>
    <span>用来测试的行内元素span</span>
    
   css样式： 
     <style>
        div{
            width:80px;
            height:80px;
            background:coral;
            /*div标签本来是块状元素，现在使用display属性转换为行内元素；*/
            display: inline;
        }
        span{
            background:cornflowerblue
        }
    </style>

4、inline-block 行内块元素（CSS2.1 新增的值）

说明：行内块元素既具备行内元素的特性也具备块状元素的特性，具备行内元素前后没有换行符可以在一行内并列显示的特性，具备块状元素可以正确解释盒模型属性的特性。

示例如下：

div块状元素，span行内元素，使用此属性值转换为行内块元素；

 html结构：   
      <div>我原本是块状元素</div>
      <span>我原本是行内元素</span>
    
   css样式： 
        div,span{
           /*div块状元素，span行内元素，使用此属性值转换为行内块元素；*/  
            display: inline-block;
        }
        div{
            width:100px;
            height:100px;
            background:tomato;
        }
        span{
            width:100px;
            height:100px;
            background:turquoise;
        }

5、list-item 此元素会作为列表显示。

(1) 此属性值表示将元素显示为列表项标签，li标签默认的display的属性值是list-item，display的属性值为list-item的标签也属于块状元素；

示例如下：

(2) li标签作为列表项标签，前面会有列表项标记，下面给div标签设置为list-item，div也会有列表项标记

 html结构：
        <ul>
            <div>div0</div>
            <li>li1</li>
            <li>li2</li>
            <li>li3</li>
        </ul>
    
 css样式：     

        ul{
            background:tomato
        }
        ul li{
            border:1px solid turquoise
        }
        div{
            /*给div标签设置为list-item*/
            display: list-item;
        }

6、run-in 此元素会根据上下文作为块级元素或内联元素显示。

(1) 目前很少有浏览器支持run-in这个属性值，并且在开发过程中用不到这个属性值，不予过多的研究；

7、table 此元素会作为块级表格来显示（类似 <table>），表格前后带有换行符。

（1）table标签默认的元素类型是table，显示为块级表格，可以设置大小并且单独占据一行；（2）当table标签的元素类型是table时，并且设置宽度和高度之后，后代td标签的宽度和高度，默认是由table根据内容的多少去分配的；

(3) table属于块状元素，但是对比别的块状元素，有自己的特点， table会单独占据一行，但是在没有设置width的情况下，不会与父元素同宽，而是根据内容而定；

html结构：
      <table>
            <tr>
                <td>1</td>
                <td>2</td>
                <td>3</td>
            </tr>
            <tr>
                <td>1</td>
                <td>2</td>
                <td>3</td>
            </tr>
            <tr>
                <td>1</td>
                <td>2</td>
                <td>3</td>
            </tr>
        </table>
        <span>我是行内元素span</span>
        
 css样式： 

        table{
            border:2px solid red;
        }
        table td{
            border:1px solid chocolate;
            background:darkcyan
        }
        span{
            background:cornflowerblue
        }

（3）其他标签设置display的属性值为table，也不会具有表格的特性；

html结构：
       <div>
            <tr>
                <td>1</td>
                <td>2</td>
                <td>3</td>
            </tr>
            <tr>
                <td>1</td>
                <td>2</td>
                <td>3</td>
            </tr>
            <tr>
                <td>1</td>
                <td>2</td>
                <td>3</td>
            </tr>
       </div>

 css样式：    
 
        div{
            height:300px;
            width:300px;
            border:2px solid red;
            /*将div设置为表格类型*/
            display: table;
        }
        div td{
            border:1px solid chocolate;
            background:darkcyan
        }
        span{
            background:cornflowerblue
        }

8、inline-table 此元素会作为内联表格来显示（类似 <table>），表格前后没有换行符。

（1）将table显示为行内表格，具有行内块元素的特征，可以和别的行内元素从左往右显示也可以设置宽度和高度；

html结构：

       <table>
            <tr>
                <td>1</td>
                <td>2</td>
                <td>3</td>
            </tr>
            <tr>
                <td>1</td>
                <td>2</td>
                <td>3</td>
            </tr>
            <tr>
                <td>1</td>
                <td>2</td>
                <td>3</td>
            </tr>
       </table>
       <span>我是行内元素span</span>

css样式：

        table{
            border:2px solid red;
            /*将table设置为inline-table*/
            display: inline-block;
        }
        table td{
            background:darkcyan;
            
        }
      span{
             background:cornflowerblue
      }

（2）将table标签设置为inline-table之后，td标签的宽度就不能是table根据内容去分配了，需要单独给td设置width和height属性实现，不然td的大小就是内容的大小

HTML结构：

       <table>
            <tr>
                <td>1</td>
                <td>2</td>
                <td>3</td>
            </tr>
            <tr>
                <td>1</td>
                <td>2</td>
                <td>3</td>
            </tr>
            <tr>
                <td>1</td>
                <td>2</td>
                <td>3</td>
            </tr>
       </table>
       <span>我是行内元素span</span>

css样式：

 table{
            border:2px solid red;
            /*将table设置为inline-table*/
            display: inline-block;
            width:300px;
            height:300px;
        }
       table td{
            background:darkcyan;
            
        }
      span{
             background:cornflowerblue
      }

9、table-caption 此元素会作为一个表格标题显示（类似 <caption>）

（1）caption标签display的属性值是table-caption，能设置宽度高度盒模型属性等，属于块状元素；

html结构：

     <table>
        <caption>我是表格的标题标签</caption>
        <tr>
            <td>1</td>
            <td>2</td>
            <td>3</td>
        </tr>
      
        <tr>
            <td>1</td>
            <td>2</td>
            <td>3</td>
        </tr>
        <tr>
            <td>1</td>
            <td>2</td>
            <td>3</td>
        </tr> 
      </table>

css样式：

 table{
            border:2px solid red;
           width:300px;
           height:300px;
        }
        table td{
            background:darkcyan;
        }
        table caption{
           width:400px;
           height:50px;
           background:cyan;
           margin:10px 0;
           padding:10px;
           line-height:50px;
        }

（2）其他标签也可以设置此属性值，但是不具备表格标题的作用

10、table-header-group 此元素会作为一个或多个行的分组来显示（类似 <thead>）。

thead标签display的属性值是table-header-group；
thead标签的大小根据table自动分配，或者根据td而定，本身不能设置大小或者边距
其他标签可以设置此属性值，但是不具备表头标签的作用

html结构：

       <table>
            <thead>
                <tr>
                    <td>1</td>
                    <td>2</td>
                    <td>3</td>
                </tr>
            </thead>
            <tr>
                <td>1</td>
                <td>2</td>
                <td>3</td>
            </tr>
            <tr>
                <td>1</td>
                <td>2</td>
                <td>3</td>
            </tr>
       </table>

css样式：

 table{
            border:2px solid red;
        }
        table td{
            background:darkcyan;
            width:100px;
            height:100px;
        }
      table thead{
          /*以下属性设置无效*/
          height:60px;
          width:400px;
          margin:100px;
      }

11、table-row-group 此元素会作为一个或多个行的分组来显示（类似 <tbody>）。

tbody标签display的属性值是table-row -group；
tbody标签的大小根据table自动分配，或者根据td而定，本身不能设置大小或者边距
其他标签可以设置此属性值，但是不具表格主体标签的作用

       <table>
           <thead>
            <tr>
                <td>1</td>
                <td>2</td>
                <td>3</td>
            </tr>
           </thead>
          <tbody>
            <tr>
                <td>1</td>
                <td>2</td>
                <td>3</td>
            </tr>
            <tr>
                <td>1</td>
                <td>2</td>
                <td>3</td>
            </tr>
          </tbody>
       </table>

css样式：

        table{
            border:2px solid red;
            width:300px;
            height:300px; 
        }
        table td{
            background:darkcyan;
        }
      table tbody{
          /*以下属性设置无效*/
          height:60px;
          width:400px;
          margin:100px;
      }

12、table-footer-group 此元素会作为一个或多个行的分组来显示（类似 <tfoot>）。

（1）tfoot标签display的属性值是table-footer-group；

（2）tfoot标签的大小根据table自动分配，或者根据td而定，本身不能设置大小或者其他边距

（3）其他标签可以设置此属性值，但是不具表格表尾标签的作用

HTML结构：

    <table>
        <tr>
            <td>1</td>
            <td>2</td>
            <td>3</td>
        </tr>
        <tr>
            <td>1</td>
            <td>2</td>
            <td>3</td>
        </tr>
        <tfoot>
           <tr>
               <td>1</td>
               <td>2</td>
               <td>3</td>
            </tr>
        </tfoot>
      </table>

css样式：

        table{
            border:2px solid red;
            width:300px;
            height:300px;
        }
        table td{
            background:darkcyan;
        }
      /*以下属性设置无效*/
      table tfoot{
          height:60px;
          width:400px;
          margin:100px;
      }

13、table-row 此元素会作为一个表格行显示（类似 <tr>）。

（1） tr标签display的属性值是table-row

（2） tr标签设置height有效，width 边距设置无效，具体的大小根据table和td而定；

（3）其他标签可以设置此属性值，但是不具表格行标签的作用

HTML结构：

    <table>
        <tr>
            <td>1</td>
            <td>2</td>
            <td>3</td>
        </tr>
        <tr>
            <td>1</td>
            <td>2</td>
            <td>3</td>
        </tr>
        <tr>
            <td>1</td>
            <td>2</td>
            <td>3</td>
        </tr>
      </table>

css样式：

        table{
            border:2px solid red;
        }
        table td{
            background:darkcyan;
        }
       table tr{
         border:1px solid chartreuse;
         margin:20px;
         height:100px;
         width:300px;
         margin:10px;
       }

14、table-cell 此元素会作为一个表格单元格显示（类似 <td> 和 <th>）

（1）td , th标签display的属性值是table-cell

（2）设置宽度、高度、边框、内边距有效，外边距无效，单元格之间的间距，使用border-spacing实现

HTML结构：

     <table>
       <tr>
            <td>1</td>
            <td>2</td>
            <td>3</td>
        </tr>
        <tr>
            <td>1</td>
            <td>2</td>
            <td>3</td>
        </tr>
        <tr>
            <td>1</td>
            <td>2</td>
            <td>3</td>
        </tr>
     </table>

css样式：

    <style>
        table{
            border:2px solid red;
            border-spacing: 10px;
        }
        table td{
            background:darkcyan;
            width:100px;
            height:100px;
        }
    </style>

（3）其他标签可以设置此属性值，但是不具单元格标签的作用

html结构：

<table>
        <tr>
            <span>1</span>
            <span>2</span>
            <span>3</span>
        </tr>
        <tr>
            <td>1</td>
            <td>2</td>
            <td>3</td>
        </tr>
        <tr>
            <td>1</td>
            <td>2</td>
            <td>3</td>
        </tr>
   </table>

css样式：

        table{
            border:2px solid red;
            border-spacing: 10px;
        }
        table td{
            background:darkcyan;
            width:100px;
            height:100px;
        }
       span{
           display: table-cell;
           width:100px;
           height:100px;
           background:darkcyan;
       }

15、table-column-group 此元素会作为一个或多个列的分组来显示（类似 <colgroup>）。

（1）colgroup 标签 display的属性值是table-column-group

（2）此标签的特点是对列进行分组的，给分组的列设置样式；

HTML结构：

<table>
      <colgroup span="1"></colgroup>
      <colgroup span="2"></colgroup>
        <tr>
            <td>1</td>
            <td>2</td>
            <td>3</td>
        </tr>
      
        <tr>
            <td>1</td>
            <td>2</td>
            <td>3</td>
        </tr>
        <tr>
            <td>1</td>
            <td>2</td>
            <td>3</td>
        </tr>
   </table>

css样式：

    table{
            border:2px solid red;
            border-spacing: 10px;
        }
        table td{
            background:darkcyan;
        }
       table colgroup:nth-child(1){
            width:100px;
            height:100px;
            background:pink
        }
        table colgroup:nth-child(2){
            width:50px;
            height:50px;
            background:green
        }

16、table-column 此元素会作为一个单元格列显示（类似 <col>）

(1）col 标签 display的属性值是table-column

(2）此标签的特点是对单元格列设置效果；

HTML结构：

<table>
       <col span="1">
       <col span="2">
        <tr>
            <td>1</td>
            <td>2</td>
            <td>3</td>
        </tr>
      
        <tr>
            <td>1</td>
            <td>2</td>
            <td>3</td>
        </tr>
        <tr>
            <td>1</td>
            <td>2</td>
            <td>3</td>
        </tr>
   </table>

css样式：

 <style>
        table{
            border:2px solid red;
            border-spacing: 10px;
        }
        table td{
            width:100px;
            height:100px;
        }
        table col:nth-child(1){
            background:pink
        }
        table col:nth-child(2){
            background:green
        }
    </style>

17、inherit 规定应该从父元素继承 display 属性的值。

说明：此属性值是所有css属性都有的值，能被继承的属性，自然可以继承，不能被继承的，设置了此属性值也不能实现继承；

18、compact CSS 中有值 compact，不过由于缺乏广泛支持，已经从 CSS2.1 中删除。

19、marker CSS 中有值 marker，不过由于缺乏广泛支持，已经从 CSS2.1 中删除。

总结：

通过以上的测试，可以总结出：

display的属性值为block，table的标签都为块状元素；

display的属性值为inline，inline-table，inline-block的标签为行内级元素；

表格中的标签对应的那些display的属性值，其他的标签也可以设置，但是都不具备表格标签的功能和特征，所以表格中的标签对应的display的属性值，不能泛用，相当于一种特殊的存在；

们可以尝试分析Ajax来抓取了相关数据，但是并不是所有的页面都是可以分析Ajax来就可以完成抓取的，比如淘宝。它的整个页面数据确实也是通过Ajax获取的，但是这些Ajax接口参数比较复杂，可能会包含加密密钥等参数，所以我们如果想自己构造Ajax参数是比较困难的，对于这种页面我们最方便快捷的抓取方法就是通过Selenium，本节我们就来用Selenium来模拟浏览器操作，抓取淘宝的商品信息，并将结果保存到MongoDB。

接口分析

首先我们来看下淘宝的接口，看看它的接口相比一般Ajax多了怎样的内容。

打开淘宝页面，搜索一个商品，比如iPad，此时打开开发者工具，截获Ajax请求，我们可以发现会获取商品列表的接口。

它的链接包含了几个GET参数，如果我们要想构造Ajax链接直接请求再好不过了，它的返回内容是Json格式。

但是这个Ajax接口包含了几个参数，其中_ksTS、rn参数不能直接发现其规律，如果我们要去探寻它的生成规律也不是做不到，但这样相对会比较繁琐，所以如果我们直接用Selenium来模拟浏览器的话就不需要再关注这些接口参数了，只要在浏览器里面可以看到的我们都可以爬取。这也是为什么我们选用Selenium爬取淘宝的原因。

页面分析

我们本节的目标是爬取商品信息，例如：

这样的一个结果就包含了一个商品的基本信息，包括商品图片、名称、价格、购买人数、店铺名称、店铺所在地，我们要做的就是将这些信息都抓取下来。

抓取入口就是淘宝的搜索页面，这个链接是可以直接构造参数访问的，例如如果搜索iPad，就可以直接访问https://s.taobao.com/search?q=iPad，呈现的就是第一页的搜索结果，如图所示：

如果想要分页的话，我们注意到在页面下方有一个分页导航，包括前5页的链接，也包括下一页的链接，同时还有一个输入任意页码跳转的链接，如图所示：

在这里商品搜索结果一般最大都为100页，我们要获取的每一页的内容，只需要将页码从1到100顺次遍历即可，页码数是确定的。所以在这里我们可以直接在页面跳转文本框中输入要跳转的页码，然后点击确定按钮跳转即可到达页码页码对应的页面。

在这里我们不直接点击下一页的原因是，一旦爬取过程中出现异常退出，比如到了50页退出了，我们如果点击下一页就无法快速切换到对应的后续页面，而且爬取过程中我们也需要记录当前的页码数，而且一旦点击下一页之后页面加载失败，我们还需要做异常检测检测当前页面是加载到了第几页，因此整个流程相对复杂，所以在这里我们直接选用跳页的方式来爬取页面。

当我们成功加载出某一页商品列表时，利用Selenium即可获取页面源代码，然后我们再用相应的解析库解析即可，在这里我们选用PyQuery进行解析。

代码实战

下面我们用代码来实现一下整个抓取过程。

获取商品列表

首先我们需要构造一个抓取的URL，https://s.taobao.com/search?q=iPad，URL非常简洁，参数q就是要搜索的关键字，我们只需要改变链接的参数q即可获取不同商品的列表，在这里我们将商品的关键字定义成一个变量，然后构造出这样的一个URL。

构造出URL之后我们就需要用Selenium进行抓取了，我们实现如下抓取列表页的方法：

from selenium import webdriverfrom selenium.common.exceptions import TimeoutException
from selenium.webdriver.common.by import By
from selenium.webdriver.support import expected_conditions as EC
from selenium.webdriver.support.wait import WebDriverWait
from urllib.parse import quote
browser=webdriver.Chrome()
wait=WebDriverWait(browser, 10)
KEYWORD='iPad'
def index_page(page):
 """
 抓取索引页
 :param page: 页码
 """
 print('正在爬取第', page, '页')
 try:
 url='https://s.taobao.com/search?q=' + quote(KEYWORD)
 browser.get(url)
 if page > 1:
 input=wait.until(
 EC.presence_of_element_located((By.CSS_SELECTOR, '#mainsrp-pager div.form > input')))
 submit=wait.until(
 EC.element_to_be_clickable((By.CSS_SELECTOR, '#mainsrp-pager div.form > span.btn.J_Submit')))
 input.clear()
 input.send_keys(page)
 submit.click()
 wait.until(
 EC.text_to_be_present_in_element((By.CSS_SELECTOR, '#mainsrp-pager li.item.active > span'), str(page)))
 wait.until(EC.presence_of_element_located((By.CSS_SELECTOR, '.m-itemlist .items .item')))
 get_products()
 except TimeoutException:
 index_page(page)

在这里我们首先构造了一个WebDriver对象，使用的浏览器是Chrome，然后指定一个关键词，如iPad，然后我们定义了一个get_index()方法，用于抓取商品列表页。

在该方法里我们首先访问了这个链接，然后判断了当前的页码，如果大于1，那就进行跳页操作，否则等待页面加载完成。

等待加载我们使用了WebDriverWait对象，它可以指定等待条件，同时指定一个最长等待时间，在这里指定为最长10秒。如果在这个时间内成功匹配了等待条件，也就是说页面元素成功加载出来了，那就立即返回相应结果并继续向下执行，否则到了最大等待时间还没有加载出来就直接抛出超时异常。

比如我们最终要等待商品信息加载出来，在这里就指定了presence_of_element_located这个条件，然后传入了 .m-itemlist .items .item 这个选择器，而这个选择器对应的页面内容就是每个商品的信息块，可以到网页里面查看一下。如果加载成功，就会执行后续的get_products()方法，提取商品信息。

关于翻页的操作，我们在这里是首先获取了页码输入框，赋值为input，然后获取了提交按钮，赋值为submit，分别是下图中的两个元素：

首先我们清空了输入框，调用clear()方法即可，随后调用send_keys()方法将页码填充到输入框中，然后点击确定按钮即可。

那么怎样知道有没有跳转到对应的页码呢？我们可以注意到成功跳转某一页后页码都会高亮显示：

我们只需要判断当前高亮的页码数是当前的页码数即可，所以在这里使用了另一个等待条件 text_to_be_present_in_element，它会等待某一文本出现在某一个节点里面即返回成功，在这里我们将高亮的页码节点对应的CSS选择器和当前要跳转的页码通过参数传递给这个等待条件，这样它就会检测当前高亮的页码节点里是不是我们传过来的页码数，如果是，那就证明页面成功跳转到了这一页，页面跳转成功。

那么这样，刚才我们所实现的get_index()方法就可以做到传入对应的页码，然后加载出对应页码的商品列表后，再去调用get_products()方法进行页面解析。

解析商品列表

接下来我们就可以实现get_products()方法来解析商品列表了，在这里我们直接获取页面源代码，然后用PyQuery进行解析，实现如下：

from pyquery import PyQuery as pqdef get_products():
 """
 提取商品数据
 """
 html=browser.page_source
 doc=pq(html)
 items=doc('#mainsrp-itemlist .items .item').items()
 for item in items:
 product={
 'image': item.find('.pic .img').attr('data-src'),
 'price': item.find('.price').text(),
 'deal': item.find('.deal-cnt').text(),
 'title': item.find('.title').text(),
 'shop': item.find('.shop').text(),
 'location': item.find('.location').text()
 }
 print(product)
 save_to_mongo(product)

首先我们调用了page_source属性获取了页码的源代码，然后构造了PyQuery解析对象，首先我们提取了商品列表，使用的CSS选择器是 #mainsrp-itemlist .items .item，它会匹配到整个页面的每个商品，因此它的匹配结果是多个，所以在这里我们又对它进行了一次遍历，用for循环将每个结果分别进行解析，在这里每个结果我们用for循环把它赋值为item变量，每个item变量都是一个PyQuery对象，然后我们再调用它的find()方法，传入CSS选择器，就可以获取单个商品的特定内容了。

比如在这里我们查看一下商品信息源码，如图所示：

在这里我们观察一下商品图片的源码，它是一个 img 节点，包含了id、class、data-src、alt、src等属性，在这里我们之所以可以看到这张图片是因为它的src属性被赋值为图片的URL，在这里我们就把它的src属性提取出来就可以获取商品的图片了，不过这里我们还注意到有一个data-src属性，它的内容也是图片的URL，观察后发现此URL是图片的完整大图，而src是压缩后的小图，所以这里我们抓取data-src属性来作为商品的图片。

所以我们需要先利用find()方法先找到图片的这个节点，然后再调用attr()方法获取商品的data-src属性即可，这样就成功提取了商品图片链接。然后我们用同样的方法提取商品的价格、成交量、名称、店铺、店铺所在地等信息，然后将所有提取结果赋值为一个字典，叫做product，随后调用save_to_mongo()将其保存到MongoDB即可。

保存到MongoDB

接下来我们再将商品信息保存到MongoDB，实现如下：

MONGO_URL='localhost'MONGO_DB='taobao'
MONGO_COLLECTION='products'
client=pymongo.MongoClient(MONGO_URL)
db=client[MONGO_DB]
def save_to_mongo(result):
 """
 保存至MongoDB
 :param result: 结果
 """
 try:
 if db[MONGO_COLLECTION].insert(result):
 print('存储到MongoDB成功')
 except Exception:
 print('存储到MongoDB失败')

我们首先创建了一个MongoDB的连接对象，然后指定了数据库，在方法里随后指定了Collection的名称，然后直接调用insert()方法即可将数据插入到MongoDB，此处的result变量就是在get_products()方法里传来的product，包含了单个商品的信息，这样我们就成功实现了数据的插入。

遍历每页

刚才我们所定义的get_index()方法需要接收一个参数page，page即代表页码数，所以在这里我们再实现页码遍历即可，代码如下：

MAX_PAGE=100def main():
 """
 遍历每一页
 """
 for i in range(1, MAX_PAGE + 1):
 index_page(i)

实现非常简单，只需要调用一个for循环即可，在这里定义最大的页码数100，range()方法的返回结果就是1到100的列表，顺次遍历调用index_page()方法即可。

这样我们的淘宝商品爬虫就完成了，最后调用main()方法即可运行。

运行

我们将代码运行起来，可以发现首先会弹出一个Chrome浏览器，然后顺次访问淘宝页面，然后控制台便会输出相应的提取结果，这些商品信息结果都是一个字典形式，然后被存储到了MongoDB里面。

对接PhantomJS

但是此次爬取有个不太友好的地方就是Chrome浏览器，爬取过程必须要开启一个Chrome浏览器确实不太方便，所以在这里我们还可以对接PhantomJS，只需要将WebDriver的声明修改一下即可，但是注意这里必须要安装好PhantomJS，如果没有安装可以参考第一章里的安装方法说明。

将WebDriver声明修改如下：

browser=webdriver.PhantomJS()

这样在抓取过程中就不会有浏览器弹出了。

另外我们还可以设置缓存和禁用图片加载的功能，进一步提高爬取效率，修改如下：

SERVICE_ARGS=['--load-images=false', '--disk-cache=true']browser=webdriver.PhantomJS(service_args=SERVICE_ARGS)

这样我们就可以禁用PhantomJS的图片加载同时开启缓存，可以发现页面爬取速度进一步提升。

源码

本节代码地址为：https://github.com/Python3WebSpider/TaobaoProduct

End.

来源：公众号“Python爱好者社区”

运行人员：中国统计网小编（微信号：itongjilove）

微博ID：中国统计网

中国统计网，是国内最早的大数据学习网站，公众号：中国统计网

http://www.itongji.cn

在线咨询

上一篇：javascript实现点击标题列可以对表单进行排序
下一篇：小白学摄影巧用手机镜头拍出更好看的银杏秋叶

您的项目需求

*请认真填写需求信息，我们会在24小时内与您取得联系。

整合营销服务商

深入理解CSS选择器优先级

一、css规定，元素类型有两大类，一类是块状元素，一类是行内元素，首先了解一下两种元素类型的特征：

块状元素特征：

行内(内联)元素特征：

二、元素类型的转换

总结：

接口分析

页面分析

代码实战

运行

对接PhantomJS

源码

您的项目需求