CSS选择器和三大特性

最新推荐文章于 2022-09-04 15:14:53 发布

跪下，大胆刁民

最新推荐文章于 2022-09-04 15:14:53 发布

阅读量799

点赞数

分类专栏： css 笔记

本文链接：https://blog.csdn.net/qq_45886944/article/details/118468302

版权

笔记同时被 2 个专栏收录

48 篇文章 0 订阅

订阅专栏

css

1 篇文章 0 订阅

订阅专栏

在这里插入图片描述

CSS的使用位置

行内样式

在html元素内部直接使用style属性进行编写。只对该标签起作用

<p style="color:red">段落样式</p>

内嵌样式

内嵌样式就是将CSS样式代码添加到head标签之间，并且用和** style**标记进行声明。这种写法虽然没有完全实现页面内容和样式控制代码完全分离，但可以用于设置一些比较简单且需要样式统一的页面，其格式如下所示。

<head>
<style types="text/css">
p
{
color: red;
font-size: 12px;
}
</style>
</head>


//完整代码
<! DOCTYPE html>
<html>
<head>
<title>内嵌样式</title>
<style type="text/css">
p{
color: orange;
text-align: center;
font-weight bolder;
font-size: 25px;
}
</style>
</head><body>
<p>此段落使用内嵌样式修饰</p>
<p>正文内容</p>

链接样式

链接样式是CSS中使用频率最高，也是最实用的方法，它可以很好地将“页面内容”和“样式风格代码”分离成两个文件或多个文件，实现了页面框架HTML代码和CSS代码的完成离。
使前期制作和后期维护都十分方便。同一个CSS文件，根据需要可以链接到网站中所有的HTML页面上，使得网站整体风格统一、并且后期维护的工作量也大大减少。

<link rel="stylesheet" type="text/css" href="1.css"/>
(1)rel表示链接到样式表，其值为 stylesheet
rel:指定引入文件与当前文件的关系，stylesheet表示引入文件是样式的脚本代码
(2)type表示样式表类型为CSS样式表
(3)href指定了CSs样式表文件的路径，此处表示当前路径下名称为1.css文件
这里使用的是相对路径。如果HTML文档与CSS样式表没有在同一路径下，则需要指定样式
表的绝对路径或引用位置。

导入样式

导入外部样式表是指在内嵌样式表的style标记中，使用@import导入一个外部的CSS文件

<style type= "text/css">
    @import url("demo.css");
</style>
特点：基本不使用，因为页面会先加载html，然后再去加载css这样就会造成页面样式的延迟

样式表的优先级

行内样式的优先级最高
内嵌样式和链接样式，导入样式，那个后加载，那个优先级高

在这里插入图片描述

CSS选择器

1、标签选择器：选择器的名字代表html页面上的标签

标签选择器，选择的是页面上所有这种类型的标签，所以经常描述“共性”，无法描述某一个元素的“个性”。

<style type="text/css">
p{
    font-size:14px;
}</style>
<body>
<p>css</p>
</body>

再比如说，我想让“学完了安卓，继续学前端哟”这句话中的“前端”两个变为红色字体，那么我可以用span标签把“前端”这两个字围起来，然后给span标签加一个标签选择器。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style type="text/css">
        span{
            color: red;
        }
    </style>
</head>
<body>
    <p>学完了安卓，继续学<span>前端</span>哟</p>
</body>
</html>

【总结】需要注意的是：

（1）所有的标签，都可以是选择器。比如ul、li、label、dt、dl、input、div等。

（2）无论这个标签藏的多深，一定能够被选择上。

（3）选择的所有，而不是一个。

2、ID选择器：规定用#来定义（名字自定义）

针对某一个特定的标签来使用，只能使用一次。css中的ID选择器以”#”来定义

<!doctype html>
<html>
<head>
<title>Document</title>
<style type="text/css">
#mytitle
{
    border:3px dashed green;
    color: #777bce;
}
</style>
</head>
<body>
<h2 id="mytitle">你好</h2>
    <h2>我不好</h2>
</body>
</html>

id选择器的选择符是“#”。i

任何的HTML标签都可以有id属性。表示这个标签的名字。这个标签的名字，可以任取，但是：

（1）只能有字母、数字、下划线。
（2）必须以字母开头。
（3）不能和标签同名。比如id不能叫做body、img、a。
（4）大小写严格区分，也就是说aa,和AA是两个不同的ID
另外，特别强调的是：HTML页面，不能出现相同的id，哪怕他们不是一个类型。比如页面上有一个id为pp的p，一个id为pp的div，是非法的！

3、类选择器：规定用圆点.来定义

针对你想要的所有标签使用。优点：灵活。

<!doctype html>
<html>
<head>
<title>Document</title>
<style type="text/css">
.oneclass/*定义类选择器*/{
    color: #EA1E21;
}
</style>
</head>
</head>
<body>
<h2 class="oneclass">你好</h2>
    <h2>我不好</h2>
</body>
</html>

和id非常相似，任何的标签都可以携带id属性和class属性。但是id属性只能被某一特定标签引用一次

class属性的特点：

特性1：类选择器可以被多种标签使用。

特性2：同一个标签可以使用多个类选择器。用空格隔开。举例如下

<!doctype html>
<html>
<head>
<title>Document</title>
<style type="text/css">
.oneclass/*定义类选择器*/{
    color: #EA1E21;
}
    .twoclass{
         font-size: 50px;
    }
</style>
</head>
<body>
<p class="oneclass twoclass">你好</p>
    <p>我不好<p>
</body>
</html>

问题：到底用id还是用class？

答案：尽可能的用class，除非极特殊的情况可以用id。

原因：id是js用的。也就是说，js要通过id属性得到标签，所以css层面尽量不用id，要不然js就很别扭。另一层面，我们会认为一个有id的元素，有动态效果。

4、通配符*全局选择器

通用选择器，将匹配任何标签。不建议使用，IE有些版本不支持，大网站增加客户端负担。

效率不高，如果页面上的标签越多，效率越低，所以页面上不能出现这个选择器。

<style type="text/css">
*/*定义通用选择器*，希望所有标签的上边距和左边距都为0*/{
    margin-left:0px;
    margin-top:0px;
}
</style>

5，组合（交集）选择器

将多种选择器进行搭配，可以构成一个复合选择器。这只是一种组合形式，并不算一种真正的选择器。

<!doctype html>
<html>
<head>
<title>Document</title>
<style type="text/css">
    p{
        color: red;
    }
    .first{
        color: green;
    }
    p.first{
        color:blue;
    }
</style>
</head>
<body>
<p>这是普通的段落</p>
    <h1 class="first">这是一个标题</h1>
    <p class="first">此处使用了组合选择器</p>
</body>
</html>

6，并集选择器

作用：如果某些选择器定义的样式相同的样式，就可以利用并集选择器，可以让代码更清晰简洁

注意：并集选择器通常用于集体声明，逗号隔开，所有的选择器都会执行后面的样式

<!doctype html>
<html>
<head>
<title>Document</title>
<style type="text/css">
    p,#first,.sencond{
        color: greenyellow;
    }
</style>
</head>
<body>
<p>这是普通的段落</p>
    <h1 id="first">这是一个标题</h1>
    <p class="second">这是一个段落</p>
    <h2>这是个标题</h2>
</body>
</html>

7，继承（后代）选择器

子代拥有父代的标记，子代也可以定义自己的标记（父代没有的）

 <style type="text/css">
        h3 b i{
            color:red ; 
        }
    </style>
    /*这句话就是让<h3>标签里的<b>标签里的<i>标签的文字显红色，但是<h3>
      ,<b>标签不显红色，这是继承而不是并集选择器*/

<!doctype html>
<html>
<head>
<title>Document</title>
<style type="text/css">
        h3 b i{
            color:red ; 
        }
    </style>
</head>
<body>
    <h3>我就是<b>哪一只<i>披着羊皮的狼，</i>而你</b>就是我的猎物</h3>
</body>
</html>

只有被i标签所包围的文字变红色。

8，伪类选择器

对于a标签，其对应几种不同的状态：

link：超链接点击之前
visited：超链接点击之后
focus：是某个标签获得焦点（鼠标的光标）的时候（比如某个输入框获得焦点）
hover：鼠标放到某个标签上的时候
active：点击某个标签没有松鼠标时

CSS允许对于元素的不同状态，定义不同的样式信息。伪类选择器又分为两种：

静态伪类：只能用于超链接
动态伪类：针对所有标签都适用

（1）静态伪类：

用于以下两个状态（只能使用于超链接）：

link：超链接点击之前
visited：超链接点击之后

（2）动态伪类:

用于以下几种状态（适用于所有的标签）：

focus（一般情况只有input表单元素才能获取）：是某个标签获得焦点的时候（比如某个输入框获得焦点就是输入框有鼠标的光标）
hover（盘旋，鼠标停留在上面）：鼠标放到某个标签上的时候
active（长按状态）：点击某个标签没有松鼠标时

为确保生效，请按照LVHA(他们首字母)的顺序写简记：LOVE HATE

<!doctype html>
<html>
<head>
<title>Document</title>
<style type="text/css">
    a:link{color:red}/*未访问的链接当前浏览器没打开过*/
    a:visited{color:green}/*已访问的链接当前浏览器打开过*/
    a:hover{color:blue}/*鼠标移动到链接上*/
    a:active{color:orange}/*选定的链接（长按鼠标不放）*/

    </style>
</head>
<body>
    <a href="www.baidu.com">baidu</a>
    <a href="https://www.csdn.net/?spm=1001.2014.3001.5359">csdn</a>
</body>
</html>

长按鼠标

移动鼠标到链接上

（3）结构伪类选择器（i9+以上支持）

结构伪类选择器主要根据文档结构来选择器元素，常用于根据父级选择器里面的子元素

选择器	功能描述
E:last-child	选择父元素(标签)的倒数第一个子元素E，相当于E:nth-last-child(1)
E:nth-child(n)	选择父元素的第n个子元素，n从1开始计算（常在表格隔行变色见到（even）为偶数行变色（old）为奇数变色）
E:nth-last-child(n)	选择父元素的倒数第n个子元素，n从1开始计算
E:first-of-type	选择父元素下同种标签的第一个元素，相当于E:nth-of-type(1)
E:last-of-type	选择父元素下同种标签的倒数第一个元素，相当于E:nth-last-of-type(1)
E:nth-of-type(n)	与:nth-child(n)作用类似，用作选择使用同种标签的第n个元素
E:nth-last-of-type	与:nth-last-child作用类似，用作选择同种标签的倒数第一个元素
E:only-child	选择父元素下仅有的一个子元素，相当于E:first-child:last-child或E:nth-child(1):nth-last-child(1)
E:only-of-type	选择父元素下使用同种标签的唯一子元素，相当于E:first-of-type:last-of-type或E:nth-of-type(1):nth-last-of-type(1)
E:empty	选择空节点，即没有子元素的元素，而且该元素也不包含任何文本节点
E:root	选择文档的根元素，对于HTML文档，根元素永远HTML

（4）否定伪类选择器

元素名：before(元素的第1个子元素)
元素名：after(元素的最后1个子元素)
元素名：first-letter(元素的第1个字)
元素名：first-line(元素的第1个行)
input::-webkit-input-placeholder（修改输入框提示信息样式）

（5）伪元素选择器（i9+以上）

伪元素选择器可以帮助我们利用CSS创建新标签元素，而不需要HTML标签，从而简化HTML结构。

选择符	简介
::before	在元素内部的前面插入内容
::after	在元素内部的后面插入内容

注意：

before和after创建一个元素，但是属于行内元素
如果要设置大小, 需要转换显示模式
display: block/inline-block;
或者定位position: absolute/fixed;

新创建的这个元素在文档树中是找不到的，所以我们称为伪元素
语法：element:before()
before和after必须有content属性伪元素内容通过 content 控制,可以在content属性中写入文本内容，但是通常为空字符串。
before在父元素盒子里面的前面创建元素，after在父元素盒子里面的的后面插入元素
伪元素选择器和标签选择器一样，权重为1

（6）UI元素状态伪类选择器

** UI元素状态伪类选择器主要用于表单元素上，提高网页的人机交互、操作逻辑以及页面的整体美观**

E:hover 用于指定当鼠标指针移动到元素上面时元素所使用的样式；
E:action 用于指定元素被激活（鼠标在元素上按下还没有松开）时所使用的样式；
E:focus 用于指定元素获得光标焦点时所使用的样式，主要是在文本框空间获得焦点并进行文字输入时使用的样式；
E:enable 设置该元素处于可用状态的样式；
E:disabled 设置该元素处于不可用状态时的样式；
E:read-only 设置元素处于只读状态时的样式；
E:read-write 设置元素处于非只读状态时的样式；
E:checked 指定表单中的radio单选按钮或者checkbox复选框处于选取状态时的样式；
E:default 指定页面打开时默认处于选取状态的单选按钮或者复选框样式；（即使用户将默认状态设置为选取状态的单选按钮或者复选框改为禁用状态，使用该选择器设置的样式同样有效）
E:indeterminate 指定当页面打开时，如果一组单选按钮中任何一个选项都没有被设定为选取状态时，整组单选按钮的样式；如果用户选取了其中任何一个单选按钮，则该样式将被停止使用。

E::selection 设置元素被选中状态的样式。

区分nth-child(n)等结构化伪类

常见的结构化伪类如：nth-chlid、first-child、nth-of-type等，由于长的相似、功能相似，对于初学者容易混淆，看到的时候知其作用但需要用到的时候不知其具体怎么写，还得查看文档而减低效率。假如对其作总结，不难发现，关于结构化伪类可以分成这样两种形式：xxx-child和xxx-of-type。

1、形如xxx-child的伪类（5个）
:first-child

:last-child

:only-child

:nth-child(n)

:nth-last-child(n)

2、形如xxx-of-type的伪类（5个）
:first-of-type

:last-of-type

:only-of-type

:nth-of-type(n)

:nth-last-of-type(n)

xxx-child伪类说明
在5个xxx-child伪类中，最为关键的是nth-child，其他的几个在我看来只是他的变形。所以，只要理解nth-child，其他几个伪类也就清楚了。element:nth-child(n)其中n可以是数字、关键字（even偶数，odd奇数）和公式（n从0开始，但是第0个元素或者超出了元素的个数会被忽略。如 2n(偶数) 2n+1(奇数) n+5(从第五个开始)等等）。

nth-child的语法如下：

element:nth-child(n)
其中n可以是数字、标识符和公式。
语义：匹配任意element，该element必须是其父元素的第n个子元素；否则不匹配。

假如现在有这么一个需求：有4个<li>，把第二个<li>的背景色设置成#0ff。

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title></title>
    <style>
        li:nth-child(2) {/*我是一个p不会变成红色因为第二个元素不是<li>*/
    background-color:red;
}
    /*li:nth-child(3) 
    background-color:red;我是第二个list-item变红第三个元素是<li>
}*/
    </style>
</head>
<body>
    <ul>
    <li>我是第一个list-item</li>
    <p>我是一个p</p>
    <li>我是第二个list-item</li>
    <li>我是第三个list-item</li>
    <li>我是第四个list-item</li>
</ul>
</body>
</html>

了解nth-child后，其他几个伪类就可以这样理解：
**:first-child **等同于 :nth-child(1)

**:last-child **等同于 :nth-child(4) ：这里的4是根据上面的实例得来的，上面的例子中最后一个

是其父元素的第四个子元素。element:last-child 其实就是匹配任意element，该element还必须是其父元素的最后一个子元素。

**:only-child **element:only-child 匹配任意element，该element必须是其父元素唯一的子元素。

:nth-last-child 其实就是nth-child的颠倒。 li:nth-last-child(1) 等同于 li:nth-child(4)、li:nth-last-child(2) 等同于 li:nth-child(3)…

xxx-of-child伪类说明
xxx-of-type 和 xxx-child 其实很像，也有一个关键人物——nth-of-type。
nth-of-type的语法如下：

element:nth-of-type(n)
其中n可以是数字、关键字或公式。
语义：匹配父元素里第n个指定的element

li:nth-of-type(2) {
    background-color: #0ff;
}
/*这句话意为匹配ul标签里第二个li标签*/
<ul>
    <li>我是第一个list-item</li>
    <p>我是一个p</p>
    <li>我是第二个list-item</li>
    <li>我是第三个list-item</li>
    <li>我是第四个list-item</li>
</ul>

nth-of-type 和 nth-child 的区别在于 nth-of-type 关心的是 element 是不是其父元素的
第n个element子元素，而不是第n个子元素。

li:nth-of-type(2) {
background-color: #0ff;
}

此句话关心的是第二个的

是不是父元素

li:nth-child(2)
background-color:red;

}

此句话关心的是第二个子元素是不是父元素

,若是变色，不是不变,就是按顺序来，不考虑其他的

9，属性选择器（i9+才支持）

属性选择器可以根据元素特定属性的来选择元素。这样就可以不用借助于类或者id选择器。

语法：

选择符	简介
E[att]	选择择具有att属性的E元素（标签）
E[att=“val”]	选择具有att属性且属性值等于val的E元素（标签）
E[att^=“val”]	匹配具有att属性且值以val开头的E元素（标签）
E[att$=“val”]	匹配具有att属性且值以val结尾的E元素（标签）
E[att*=“val”]	匹配具有att属性且值中含有val的E元素（标签）

E[att]

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        div[class] {
            color: #00e4bb;
        }
    </style>
</head>

<body>
<div class="icon1">小图标1</div>
<div class="icon2">小图标2</div>
<div class="icon3">小图标3</div>
<div class="icon4">小图标4</div>
<div>我是打酱油的</div>
</body>
</html>

E[att=“val”]

/*修改上述代码的css*/
 div[class=icon1] {
            color: #00e4bb;
        }

E[att^=“val”]

/*修改上述代码的css*/
 div[class^="icon"] {
            color: #00e4bb;
        }

E[att$=“val”]

/*修改上述代码的css*/
   div[class$="3"] {
            color: #00e4bb;
        }

E[att*=“val”]

 /*修改上述代码的css*/
 div[class*="icon"] {
            color: #00e4bb;
        }

10.兄弟选择器（~）

（A，B为兄弟元素，拥有共同的父元素）A后面有很多B，所有B都生效

<!doctype html>
<html>
<head>
<title>Document</title>
<style type="text/css">
    h1 ~ p {color: red;}
    </style>
</head>
<body>
        <h1>This is a heading.</h1>
    <p>This is paragraph.</p>
    <p>This is paragraph.</p>
    <p>This is paragraph.</p>
    <p>This is paragraph.</p>
</body>
</html>

11，相邻兄弟选择器（+）

相邻兄弟选择器，（A，B为兄弟元素，拥有共同的父元素）A后面有很多B，但生效的范围，只是A后面紧接这的下一个B元素，后面的其他B元素，并不会应用样式。包括A元素本身，也不会应用该样式。

<!doctype html>
<html>
<head>
<title>Document</title>
<style type="text/css">
    h1 + p {color: red;}
    </style>
</head>
<body>
        <h1>This is a heading.</h1>
    <p>This is paragraph.</p>
    <p>This is paragraph.</p>
    <p>This is paragraph.</p>
    <p>This is paragraph.</p>
</body>
</html>

11，子元素（亲儿子）选择器

通俗的说就是子元素选择器（子选择器）只能选择作为某元素的最近一级子元素。简单理解就是选亲儿子元素.孙子以及后代都不行

<!doctype html>
<html>
<head>
<title>Document</title>
<style type="text/css">
    h1 > strong {color:red;}
    </style>
</head>
<body>
     <h1>This is <strong>very </strong> <em><strong>very </strong><strong>very </strong></em> important.</h1>
</body>
</html>

第一个very被除父元素h1之外的strong标签包裹所以显红色，

但是第二个very被除了父元素h1包裹还被em标签包裹，所以不显示红色

在这里插入图片描述

css三大特性

CSS有三个非常重要的三个特性：层叠性、继承性、优先级。

1.1层叠（覆盖）性

前提：相同选择器给设置相同的样式，此时一个样式就会覆盖（层量）另一个冲突的样式。层量性主要解决样式冲突的问题
层叠性原则：
样式冲突，遵循的原则是就近原则，后定义的覆盖先定义的,只覆盖相同样式的。
样式不冲突，不会层叠

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title><!DOCTYPE html>
        <html lang="en">
        <head>
        <meta charset="UTF-8">
        <title>定位</title>
</head>
<style>
  div{
      color: red;
      font-size: 30px;
  }
  div{
      color: deeppink;
  }
</style>
<body>
<div>相同选择器给设置相同的样式，此时一个样式就会覆盖（层量）另一个冲突的样式。
层量性主要解决样式冲突的问题,遵循的原则是就近原则，后定义的覆盖先定义的
只覆盖相同样式的。样式不冲突，不会层叠
</div>
</body>
</html>

1.2继承性

现实中的继承：我们继承了父亲的姓
CSS中的继承：子标签会继承父标签的某些样式，如文本颜色和字号。简单的理解就是：子承父业。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title><!DOCTYPE html>
        <html lang="en">
        <head>
        <meta charset="UTF-8">
        <title>定位</title>
</head>
<style>
  div{
      color: red;
      font-size: 30px;
  }
</style>
<body>
<div><p>龙生龙，凤生凤，老鼠儿子会打洞</p></div>
</body>
</html>

1.3优先级

当同一个元素指定多个选择器，就会有优先级的产生。

选择器权重：

！important>行内样式style="">ID选择器>(类选择器=伪类选择器=属性选择器（【】里面的是属性选择器，前面的是元素（标签））)>（标签选择器=伪元素选择器）>(继承选择器或通配符选择器)

交集选择器的优先级所有优先级加起来运算然后比较

并集的话就是各算各的。

如：类选择器与标签选择器

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title><!DOCTYPE html>
        <html lang="en">
        <head>
        <meta charset="UTF-8">
        <title>定位</title>
</head>
<style>
  div{
      color: red;
  }
  .test{
      color: pink;
  }
</style>
<body>
<div class="test">你笑起来真好看</div>
</body>
</html>

如：ID选择器与类选择器与标签选择器

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title><!DOCTYPE html>
        <html lang="en">
        <head>
        <meta charset="UTF-8">
        <title>定位</title>
</head>
<style>
  div{
      color: red;
  }
  .test{
      color: pink;
  }
  #demo{
      color: burlywood;
  }
</style>
<body>
<div class="test" id="demo">你笑起来真好看</div>
</body>
</html>

如：行内样式style=""与ID选择器与类选择器与标签选择器

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title><!DOCTYPE html>
        <html lang="en">
        <head>
        <meta charset="UTF-8">
        <title>定位</title>
</head>
<style>
  div{
      color: red;
  }
  .test{
      color: pink;
  }
  #demo{
      color: burlywood;
  }
</style>
<body>
<div class="test" id="demo" style="color: aquamarine">你笑起来真好看</div>
</body>
</html>

如：！important让贫民标签选择器翻身

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title><!DOCTYPE html>
        <html lang="en">
        <head>
        <meta charset="UTF-8">
        <title>定位</title>
</head>
<style>
  div{
      color: red!important;
  }
  .test{
      color: pink;
  }
  #demo{
      color: burlywood;
  }
</style>
<body>
<div class="test" id="demo" style="color: aquamarine">你笑起来真好看</div>
</body>
</html>

跪下，大胆刁民

关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
CSS选择器和三大特性

CSS的使用位置行内样式在html元素内部直接使用style属性进行编写。只对该标签起作用<p style="color:red">段落样式</p>内嵌样式内嵌样式就是将CSS样式代码添加到head标签之间，并且用和** style**标记进行声明。这种写法虽然没有完全实现页面内容和样式控制代码完全分离，但可以用于设置一些比较简单且需要样式统一的页面，其格式如下所示。<head><style types="text/css">p{col.
复制链接

扫一扫

专栏目录