CSS选择器

发表于 | 更新于: | 分类于 | | 阅读数
字数统计: 623 | 阅读时长 ≈ 2

概念

CSS(Cascading Style Sheets) 美化样式

CSS通常称为CSS样式表或层叠样式表（级联样式表），主要用于设置HTML页面中的文本内容（字体、大小、对齐方式等）、图片的外形（宽高、边框样式、边距等）以及版面的布局等外观显示样式。

CSS以HTML为基础，提供了丰富的功能，如字体、颜色、背景的控制及整体排版等，而且还可以针对不同的浏览器设置不同的样式。

使用

  1. 内部样式表

    1
    2
    3
    4
    5
    <head>
    <style type="text/CSS">
        选择器 {属性1:属性值1; 属性2:属性值2; 属性3:属性值3;}
    </style>
    </head>

  2. 行内式（内联样式）

    1
    <标签名 style="属性1:属性值1; 属性2:属性值2; 属性3:属性值3;"> 内容 </标签名>

  3. 外部样式表（外链式）

    1
    2
    3
    <head>
      <link href="CSS文件的路径"  rel="stylesheet" />
    </head>

    注意：

    href：定义所链接外部样式表文件的URL，可以是相对路径，也可以是绝对路径。
    type：定义所链接文档的类型，在这里需要指定为“text/CSS”，表示链接的外部文件为CSS样式表。
    rel：定义当前文档与被链接文档之间的关系，在这里需要指定为“stylesheet”，表示被链接的文档是一个样式表文件。

选择器

  1. 标签/元素选择器

    1
    2
    标签名{属性1:属性值1; 属性2:属性值2; 属性3:属性值3; }  
    元素名{属性1:属性值1; 属性2:属性值2; 属性3:属性值3; }

  2. 类选择器

    1
    .类名{属性1:属性值1; 属性2:属性值2; 属性3:属性值3; }

  3. 多类名选择器

    我们可以给标签指定多个类名，从而达到更多的选择目的

  4. id选择器

    1
    #id名{属性1:属性值1; 属性2:属性值2; 属性3:属性值3; }

  5. 通配符选择器

    1
    * { 属性1:属性值1; 属性2:属性值2; 属性3:属性值3; }

  6. 复杂选择器

    在爬虫的学习中，对复杂选择器不做要求，了解即可

    1. 交集选择器
    2. 并集选择器
    3. 后代选择器
    4. 子元素选择器
    5. 伪类选择器
    6. 结构(位置)伪类选择器（CSS3)
    7. 目标伪类选择器(CSS3)
    8. 伪元素选择器（CSS3)
    9. 属性选择器
不要打赏，只求关注呀QAQ