python爬虫基础-CSS选择器（简单好学）

ohbaby别叫我程序猿

已于 2023-03-24 22:18:31 修改

阅读量2.7k

点赞数 1

分类专栏： # 爬虫文章标签： css 爬虫前端

于 2022-08-06 19:42:58 首次发布

本文链接：https://blog.csdn.net/pythonuser1/article/details/126199917

版权

爬虫专栏收录该内容

10 篇文章 1 订阅

订阅专栏

文章目录

CSS

什么是CSS

全称：Cascading Style Sheet 语言，属于标记语言
CSS3中的3表示版本号

CSS语法结构

选择器 {
  属性1:值1;
  属性2:值2;
  属性3:值3;
  属性4:值4;
}

在这里插入图片描述

CSS的四种引入方式

1.嵌入式------》<head>里，style标签内部直接书写,用 分号 分隔    <style>
        h1  {
            color: burlywood;
        }
    style>2.外链式------》<head>里，link标签引入外部css文件(最正规的方式 - 解耦合)      <link rel="stylesheet" type="text/css" href="mycss.css">3.行内式------》直接在标签里 添加样式属性，用分号分隔      <h1 style="color: green；font-size:small">老板好 要上课吗?h1>4、导入式（部分浏览器兼容，不常用）<head>
    <style>
        /*形式一：*/
        /*@import "css/mystyle.css";*/
        /*形式二：*/
        @import url("css/mystyle.css");    style>head>

CSS选择器

基本分类以及语法格式

/* 基本选择器 */ # id选择器

# 类选择器

# 元素/标签选择器

# 通用选择器 /* id选择器*/ 
        /* !*找到id是d1的标签 将文本颜色变成绿黄色*! */
        #d1 {  
           color: greenyellow;
        }        
        /* 类选择器 */
        /* !*找到class值里面包含c1的标签*! */
        .c1 {  
           color: red;
        }        /* 元素(标签)选择器 */
        /* !*找到所有的span标签*! */
        span { 
           color: red;
        }        /*通用选择器*/
        /* !*将html页面上所有的标签全部找到*!  */        
        *{  
           color: green;
        }" _ue_custom_node_="true">

组合选择器

后代选择器连接标识符：空格
儿子选择器连接标识符： >
毗邻选择器连接标识符： +
弟弟选择器连接标识符： ~

/* 在前端 我们将标签的嵌套用亲戚关系来表述层级 */div pdiv p        div p span
    span
    span/* div里面的p span都是div的后代
  p是div的儿子
  p里面的span是p的儿子 是div的孙子
  div是p的父亲
  ... *//*后代选择器*/div span {
   color: red;
}/*儿子选择器*/div>span {
   color: red;
}/*毗邻选择器*//* !*同级别紧挨着的后面的第一个(即 只能匹配 直接兄弟关系的标签。毗邻的标签之间 不能有其他标签)*! */div+span {  
   color: aqua;
}/*弟弟选择器*//*同级别下面所有的span*/div~span {  
    color: red;
}

群组选择器

交集选择器

#1、作用：给所有选择器选中的标签中，相交的那部分标签设置属性#2、格式：    选择器1选择器2 {
        属性：值;
    }#3、注意：1、选择器与选择器之间没有任何链接符号2、选择器可以使用标签名称、id、class3、交集选择器在企业开发中并不多见，了解即可
   因为：p.part1 完全可以用.part1取代

并集选择器（交叉选择器）

<style>
        /*逗号表示并列关系*/
        div,p,span {   
            color: yellow;
        }
        /* 多种选择器组合使用，表示并列关系使用逗号分隔 */
        #d1,.c1,span {
            color: orange;
        }
     
    style>
    
/* 连接标识符 紧挨着(没有任何连接符) *//* 交叉选择器本质上是对一个目标标签的多个名字的同时表示 */div.box#ele.tag { /*div是标签名，box和tag都是class属性值，ele是id属性值*/
    /* 样式块 */}

 标签名div、class名box及tag和id名ele都是对一个目标标签的修饰空格隔开
--><div class="box tag" id="ele">div>

序列选择器

#1、作用：css3中新推出的选择器中，最具代表性的的9个，又称为序列选择器，
过去的选择器中要选中某个必须加id或class，学习了这9个后，不用加id或class，想选中同级别的第几个就选第几个。（这里的同级别 指的可以是第一级，第二级……）#2、格式#2.1 同级别:first-child    p:first-child    同级别的第一个
:last-child    p:last-child    同级别的最后一个
:nth-child(n)                    同级别的第n个
:nth-last-child(n)            同级别的倒数第n个#2.2 同级别同类型:first-of-type                    同级别同类型的第一个
:last-of-type                    同级别同类型的最后一个
:nth-of-type(n)                    同级别同类型的第n个
:nth-last-of-type(n)            同级别同类型的倒数第n个#2.3 其他:only-of-type                    同类型的唯一一个
:only-child                         同级别的唯一一个


# 同级别
#1、同级别的第一个
#1.1 示范一
p:first-child { 
    color: red;
}代表：同级别的第一个，并且第一个要求是一个p标签我是段落1我是段落2我是段落3我是段落4我是段落5我是段落6这样的话第一个p和div中的第一个p都变成红色，

#1.2 示范二
p:first-child {
    color: red;
}代表：同级别的第一个，并且第一个要求是一个p标签w我是标题我是段落1我是段落2我是段落3我是段落4我是段落5我是段落6这样的话只有div中的第一个p变红，因为在有在div内同一级别的第一个才是p

注意点：
    :fist-child就是第一个孩子，不区分类型

#2、同级别的最后一个
p:last-child {
    color: red;
}代表：同级别的最后一个，并且最后一个要求是一个p标签我是标题我是段落1我是段落2我是段落3我是段落4我是段落5我是段落6我是段落7这样的话只有6跟7都变红

#3、同级别的第n个
p:nth-child(3) {
    color: red;
}代表：同级别的第3个，并且第3个要求是一个p标签我是标题我是段落1我是段落2我是段落3我是段落4我是段落5我是段落6.1我是段落6.2我是标题我是段落7这样的话只有“我是段落2”变红

#4、同级别的倒数第n个
p:nth-last-child(3) {
    color: red;
}代表：同级别的倒数第3个，并且第3个要求是一个p标签我是标题我是段落1我是段落2我是段落3我是段落4我是段落5我是段落6.1我是段落6.2我是标题我是段落7这样的话只有“我是段落6.1”和“我是段落5”被选中


# 同级别同类型
我是标题我是段落1我是段落2我是段落3我是段落4我是段落5我是段落6.1我是段落6.2我是标题我是段落7#1、同级别同类型的第一个
p:first-of-type {
    color: red;
}“我是段落1”和“我是段落6.1”被选中

#2、同级别同类型的最后一个
p:last-of-type {
    color: red;
}“我是段落7”和“我是段落6.2”被选中

#3、同级别同类型的第n个
p:nth-of-type(2) {
    color: red;
}“我是段落2”和“我是段落6.2”被选中

#4、同级别同类型的倒数第n个
p:nth-last-of-type(2) {
    color: red;
}“我是段落5”和“我是段落6.1”被选中


# 其他
#1、同类型的唯一一个
p:only-of-type {
    color: red;
}我是标题我是段落6.1我是段落6.2我是标题我是段落7“我是段落7“被选中

#2、同级别的唯一一个
p:only-child {
    color: red;
}我是标题我是段落6.1我是段落7“我是段落6.1”被选中

属性选择器

/* 属性选择器 */1 含有某个属性
2 含有某个属性并且有某个值
3 含有某个属性并且有某个值的某个标签

# 属性选择器是以[]作为标志的 /* !*将所有含有属性名是username的标签背景色改为红色*! */[username] {
    background-color: red;
}/* !*找到所有属性名是username并且属性值是jason的标签*! */[username='jason'] {  
    background-color: orange;
}/* !*找到所有属性名是username并且属性值是jason的input标签*! */input[username='jason'] { 
    background-color: wheat;
}

#1、作用：根据指定的属性名称找到对应的标签，然后设置属性       该选择器，最常用于input标签 
#2、格式与具体用法：    [属性名]
    其他选择器[属性名]
    [属性名=值]
    [属性名^=值]
    [属性名$=值]
    [属性名*=值]


    例1：找到所有包含id属性的标签
        [id]
    
    例2：找到所有包含id属性的p标签
        p[id]
    
    例3：找到所有class属性值为part1的p标签
        p[class="part1"]
    
    例4：找到所有href属性值以https开头的a标签
        a[href^="https"]
        
    例5：找到所有src属性值以png结果的img标签
        img[src$="png"]
        
    例6：找到所有class属性值中包含part2的标签
        [class*="part"]

伪类选择器 – 标签：标签状态

<!DOCTYPE html><html lang="en"><head>
    <meta charset="UTF-8">
    <title>Titletitle>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <style>
        body {
            background-color: black;
        }
　　　　　# 超链接的操作
        a:link {  /*访问之前的状态*/
            color: red;
        }
        a:hover {  /*需要记住*/
            color: aqua;  /*鼠标悬浮态*/
        }
        a:active {
            color: black;  /*鼠标点击不松开的状态  激活态*/
        }
        a:visited {
            color: darkgray;  /*访问之后的状态*/
        }

　　　　　# 段落的不同操作
        p {
            color: darkgray;
            font-size: 48px;
        }
        p:hover {
            color: white;
        }

        # 输入框的不同操作样式
        input:focus {  /*input框获取焦点(鼠标点了input框)*/
            background-color: red;
        }
    style>head><body><a href="https://www.jd.com/">小轩在不在?a><p>点我有你好看哦p><input type="text">body>html>

伪元素选择器

<!DOCTYPE html><html lang="en"><head>
    <meta charset="UTF-8">
    <title>Titletitle>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <style>
        /* 为首字符设置样式 如首个文字为大写 */
        p:first-letter {
            font-size: 48px;
            color: orange;
        }
         /*在文本开头 用css在前面或者后面 添加内容，用CSS添加的内容时无法选中复制的*/
        p:before { 
            content: '你说的对';
            color: blue;
        }
        p:after {
            content: '雨露均沾';
            color: orange;
        }
    style>head><body>
    <p>生命如此多娇p>body>html>

CSS三个特性

继承性

#1、定义：给某一个元素设置一些属性，该元素的后代也可以使用，这个我们就称之为继承性

#2、注意：
   1、只有以color、font-、text-、line-开头的属性才可以继承
   2、a标签的文字颜色和下划线是不能继承别人的
   3、h标签的文字大小是不能继承别人的，会变大，但是会在原来字体大小的基础上变大
       ps:打开浏览器审查元素可以看到一些inherited from。。。的属性
#3、应用场景：
   通常基于继承性统一设置网页的文字颜色，字体，文字大小等样式

层叠性

#1、定义：CSS全称：Cascading StyleSheet层叠样式表，层叠性指的就是CSS处理冲突的一种能力，

　　即如果有多个选择器选中了同一个标签那么会有覆盖效果

#2、注意：
1、层叠性只有在多个选择器选中了同一个标签，然后设置了相同的属性，
才会发生层叠性
ps：通过谷歌浏览器可以查看到，一些属性被划掉了

优先级

选择器优先级 – 不同选择器同时控制同一标签的同一属性

在这里插入图片描述

# 普通选择器的优先级
1.选择器相同 书写顺序不同
就近原则:谁离标签更近就听谁的（同级的执行顺序是从上而下，因此以最后执行的样式为准）
2.选择器不同 
行内 > id选择器  > 类选择器 > 标签选择器
               精确度越高，越有效

<!DOCTYPE html><html lang="en"><head>
    <meta charset="UTF-8">
    <title>Titletitle>
    <meta name="viewport" content="width=device-width, initial-scale=1">
     -->
    <style>
        #d1 {
            color: aqua;
        }
        .c1 {
           color: orange;
        }
        p {
           color: red;
        }
    style>
   <link rel="stylesheet" href="mycss1.css">head><body>
    <p id="d1" class="c1" style="color: blue">你好鸭子p>body>html>

<head>
    <style>
        * {
            width: 50px;
            height: 50px;
            background-color: red;
            color: pink;
        }
        div {
            width: 60px;
            height: 60px;
            background-color: orange;
        }
        .box {
            width: 70px;
            height: 70px;
        }
        #ele {
            width: 80px;
        }
    style>head><body>
    <div class="box" id="ele">文字内容div>body>1. 四种选择器都控制目标标签的宽度，最终目标标签宽度为80px，所以id选择器优先级最高
2. 三种选择器都控制目标标签的高度，最终目标标签宽度为70px，所以class选择器优先级其次
3. 二种选择器都控制目标标签的背景颜色，最终目标标签背景颜色为orange，所以标签选择器优先级再次
4. 只有一种选择器控制目标标签的字体颜色，目标标签字体颜色一定为pink
优先级：通配选择器 -->

优先级：通配选择器 < 标签选择器 < class选择器 < id选择器


# 复杂组合选择器的优先级
1. 复杂选择器的种类并不会影响优先级
    -- 后代：div #ele  |  兄弟：div~#ele  |  交叉：div#ele  优先级一样
2. 复杂选择器本质是通过同类型(简单选择器)的个数来确定优先级
    -- 三层标签选择器后代：body div i  大于  两层标签选择器后代：div i  |  body i
3. 简单选择器的优先级起关键性作用，也就是一个id选择器要大于无限个class选择器，一个class选择器要大于无限个标签选择器
    -- id选择器：#i 大于 n层class选择器：.box .i
    -- class选择器：.box 大于 n层标签选择器：body div