首页 > 其他分享 >css基础 CSS 组合选择符、CSS 伪类、CSS 伪元素

css基础 CSS 组合选择符、CSS 伪类、CSS 伪元素

时间：2023-03-24 13:02:35浏览次数：43  
标签：伪类 元素 选择符 child 选择器 CSS first


阅读目录

  • CSS 组合选择符
  • 后代选择器
  • 子元素选择器
  • 相邻兄弟选择器
  • 后续兄弟选择器
  • CSS 伪类 (Pseudo-classes)
  • 伪类和CSS类
  • CSS :first-child 伪类
  • 匹配第一个 ` ` 元素
  • 匹配所有 `` 元素中的第一个 ` ` 元素
  • 匹配所有作为第一个子元素的 ` ` 元素
  • CSS – :lang 伪类
  • 所有CSS伪类/元素
  • CSS3 :checked 选择器匹配每个选中的输入元素
  • CSS3 :disabled 选择器匹配每个禁用的的元素
  • CSS3 :empty 选择器择每个没有任何子级的元素
  • CSS3 :enabled 选择器匹配每个启用的的元素
  • :first-of-type 选择器匹配元素其父级是特定类型的第一个子元素
  • :in-range 选择器用于标签的值在指定区间值时显示的样式
  • :invalid 选择器用于在表单元素中的值是非法时设置指定样式
  • :last-child 选择器用来匹配父元素中最后一个子元素
  • :last-of-type 选择器匹配元素其父级是特定类型的最后一个子元素
  • CSS 伪元素
  • :first-line 伪元素
  • :first-letter 伪元素
  • 伪元素和CSS类
  • 多个伪元素
  • CSS – :before 伪元素
  • CSS – :after 伪元素
  • 所有CSS伪类/元素

CSS 组合选择符

CSS 组合选择符可以让你直观的明白选择器与选择器之间的关系。

组合选择符说明了两个选择器直接的关系。

CSS组合选择符包括各种简单选择符的组合方式。

在 CSS3 中包含了四种组合方式:

后代选择器（以空格     分隔)
  子元素选择器（以大于 > 号分隔）
相邻兄弟选择器（以加号 + 分隔）
普通兄弟选择器（以波浪号 ～ 分隔）

后代选择器

后代选择器用于选取某元素的后代元素。

以下实例选取所有 <p> 元素插入到 <div> 元素中:

css基础 CSS 组合选择符、CSS 伪类、CSS 伪元素_css

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>文字竖直方向居中显示</title>
    <style>
        div p {
            background-color:yellow;
        }
    </style>
</head>
<body>

    <div>
        <p>段落 1。 在 div 中。</p>
        <p>段落 2。 在 div 中。</p>
    </div>
    
    <p>段落 3。不在 div 中。</p>
    <p>段落 4。不在 div 中。</p>

</body>
</html>

子元素选择器

与后代选择器相比，子元素选择器（Child selectors）只能选择作为某元素直接 / 一级子元素的元素。

以下实例选择了 <div> 元素中所有直接子元素 <p> ：

css基础 CSS 组合选择符、CSS 伪类、CSS 伪元素_html_02

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>文字竖直方向居中显示</title>
    <style>
        div>p {
            background-color:yellow;
        }
    </style>
</head>
<body>

    <h1>Welcome to My Homepage</h1>

    <div>
        <h2>My name is Donald</h2>
        <p>I live in Duckburg.</p>
    </div>
    
    <div>
        <span>
            <p>I will not be styled.</p>
        </span>
    </div>
    
    <p>My best friend is Mickey.</p>

</body>
</html>

相邻兄弟选择器

相邻兄弟选择器（Adjacent sibling selector）可选择紧接在另一元素后的元素，且二者有相同父元素。

如果需要选择紧接在另一个元素后的元素，而且二者有相同的父元素，可以使用相邻兄弟选择器（Adjacent sibling selector）。

以下实例选取了所有位于 <div> 元素后的第一个 <p> 元素:

css基础 CSS 组合选择符、CSS 伪类、CSS 伪元素_选择器_03

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>显示</title>
    <style>
        div+p {
            background-color:yellow;
        }
    </style>
</head>
<body>

    <h1>文章标题</h1>

    <div>
        <h2>DIV 内部标题</h2>
        <p>DIV 内部段落。</p>
    </div>
    
    <p>DIV 之后的第一个 P 元素。</p>
    <p>DIV 之后的第二个 P 元素。</p>

</body>
</html>

后续兄弟选择器

后续兄弟选择器选取所有指定元素之后的相邻兄弟元素。

以下实例选取了所有 <div> 元素之后的所有相邻兄弟元素 <p> :

css基础 CSS 组合选择符、CSS 伪类、CSS 伪元素_css_04

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>显示</title>
    <style>
       div~p {
            background-color:yellow;
        }
    </style>
</head>
<body>

    <p>之前段落，不会添加背景颜色。</p>
    <div>
    <p>段落 1。 在 div 中。</p>
    <p>段落 2。 在 div 中。</p>
    </div>
    
    <p>段落 3。不在 div 中。</p>
    <p>段落 4。不在 div 中。</p>

</body>
</html>

CSS 伪类 (Pseudo-classes)

CSS 伪类是用来添加一些选择器的特殊效果。

由于状态的变化是非静态的，所以元素达到一个特定状态时，它可能得到一个伪类的样式；

当状态改变时，它又会失去这个样式。由此可以看出，它的功能和 class 有些类似，但它是基于文档之外的抽象，所以叫伪类。

伪类的语法：

selector:pseudo-class {property:value;}

CSS类也可以使用伪类：

selector.class:pseudo-class {property:value;}

anchor 伪类
在支持 CSS 的浏览器中，链接的不同状态都可以以不同的方式显示：

a:link {color:#FF0000;} /* 未访问的链接 */
a:visited {color:#00FF00;} /* 已访问的链接 */
  a:hover {color:#FF00FF;} /* 鼠标划过链接 */
 a:active {color:#0000FF;} /* 已选中的链接 */

注意：

(1) 在CSS定义中，a:hover 必须被置于 a:link 和 a:visited 之后，才是有效的。

(2 ) 在 CSS 定义中，a:active 必须被置于 a:hover 之后，才是有效的。

(3) 伪类的名称不区分大小写。

伪类和CSS类

伪类可以与 CSS 类配合使用：

a.red:visited {color:#FF0000;}
 
<a class="red" href="mybj123.com">CSS 语法</a>

如果在上面的例子的链接已被访问，它会显示为红色。

CSS :first-child 伪类

您可以使用 :first-child 伪类来选择父元素的第一个子元素。

注意：在IE8的之前版本必须声明 <!DOCTYPE> ，这样 :first-child 才能生效。

匹配第一个

元素

在下面的例子中，选择器匹配作为任何元素的第一个子元素的 <p> 元素：

css基础 CSS 组合选择符、CSS 伪类、CSS 伪元素_选择器_05

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>显示</title>
    <style>
       p:first-child {
            color:blue;
        }
    </style>
</head>
<body>

    <p>This is some text.</p>
    <p>This is some text.</p>

</body>
</html>

匹配所有

元素中的第一个 元素

在下面的例子中，选择相匹配的所有 <p> 元素的第一个 <i> 元素：

css基础 CSS 组合选择符、CSS 伪类、CSS 伪元素_CSS_06

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>显示</title>
    <style>
        p>i:first-child {
            color: blue;
        }
    </style>
</head>
<body>

<p>我是一个 <i>强壮</i> 的男人. 我是一个 <i>强壮</i> 的男人.</p>
<p>我是一个 <i>强壮</i> 的男人. 我是一个 <i>强壮</i> 的男人.</p>

</body>
</html>

匹配所有作为第一个子元素的

元素中的所有 元素

在下面的例子中，选择器匹配所有作为元素的第一个子元素的 <p> 元素中的所有 <i> 元素：

css基础 CSS 组合选择符、CSS 伪类、CSS 伪元素_html_07

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>显示</title>
    <style>
        p:first-child i {
            color:blue;
        }
    </style>
</head>
<body>

<p>我是一个 <i>强壮</i> 的男人. 我是一个 <i>强壮</i> 的男人.</p>
<p>我是一个 <i>强壮</i> 的男人. 我是一个 <i>强壮</i> 的男人.</p>

</body>
</html>

CSS – :lang 伪类

:lang 伪类使你有能力为不同的语言定义特殊的规则。

注意：IE8必须声明 <!DOCTYPE> 才能支持 :lang 伪类。

在下面的例子中，:lang 类为属性值为 no 的 q 元素定义引号的类型：

css基础 CSS 组合选择符、CSS 伪类、CSS 伪元素_css_08

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>显示</title>
    <style>
        q:lang(no) {
            quotes: "~""~";
        }
    </style>
</head>
<body>

<p>一些文字 <q lang="no">段落中的引用</q> 一些文字。</p>

</body>
</html>

所有CSS伪类/元素

选择器

示例

示例说明

:checked

input:checked

选择所有选中的表单元素

:disabled

input:disabled

选择所有禁用的表单元素

:empty

p:empty

选择所有没有子元素的p元素

:enabled

input:enabled

选择所有启用的表单元素

:first-of-type

p:first-of-type

选择的每个 p 元素是其父元素的第一个 p 元素

:in-range

input:in-range

选择元素指定范围内的值

:invalid

input:invalid

选择所有无效的元素

:last-child

p:last-child

选择所有p元素的最后一个子元素

:last-of-type

p:last-of-type

选择每个p元素是其母元素的最后一个p元素

:not(selector)

:not(p)

选择所有p以外的元素

:nth-child(n)

p:nth-child(2)

选择所有 p 元素的父元素的第二个子元素

:nth-last-child(n)

p:nth-last-child(2)

选择所有p元素倒数的第二个子元素

:nth-last-of-type(n)

p:nth-last-of-type(2)

选择所有p元素倒数的第二个为p的子元素

:nth-of-type(n)

p:nth-of-type(2)

选择所有p元素第二个为p的子元素

:only-of-type

p:only-of-type

选择所有仅有一个子元素为p的元素

:only-child

p:only-child

选择所有仅有一个子元素的p元素

:optional

input:optional

选择没有”required”的元素属性

:out-of-range

input:out-of-range

选择指定范围以外的值的元素属性

:read-only

input:read-only

选择只读属性的元素属性

:read-write

input:read-write

选择没有只读属性的元素属性

:required

input:required

选择有”required”属性指定的元素属性

:root

root

选择文档的根元素

:target

#news:target

选择当前活动#news元素(点击URL包含锚的名字)

:valid

input:valid

选择所有有效值的属性

:link

a:link

选择所有未访问链接

:visited

a:visited

选择所有访问过的链接

:active

a:active

选择正在活动链接

:hover

a:hover

把鼠标放在链接上的状态

:focus

input:focus

选择元素输入后具有焦点

:first-letter

p:first-letter

选择每个<p> 元素的第一个字母

:first-line

p:first-line

选择每个<p> 元素的第一行

:first-child

p:first-child

选择器匹配属于任意元素的第一个子元素的 <p> 元素

:before

p:before

在每个<p>元素之前插入内容

:after

p:after

在每个<p>元素之后插入内容

:lang(language)

p:lang(it)

为<p>元素的lang属性选择一个开始值

CSS3 :checked 选择器匹配每个选中的输入元素

:checked 选择器匹配每个选中的输入元素（仅适用于单选按钮或复选框）。

为所有选中的输入元素设置背景颜色：

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>显示</title>
    <style>
        input:checked {
            height: 50px;
            width: 50px;
        }
    </style>
</head>
<body>

<form action="">
    <input type="radio" checked="checked" value="male" name="gender" /> Male<br>
    <input type="radio" value="female" name="gender" /> Female<br>
    <input type="checkbox" checked="checked" value="Bike" /> I have a bike<br>
    <input type="checkbox" value="Car" /> I have a car 
</form>

</body>
</html>

css基础 CSS 组合选择符、CSS 伪类、CSS 伪元素_html_09

CSS3 :disabled 选择器匹配每个禁用的的元素

:disabled 选择器匹配每个禁用的的元素（主要用于表单元素）。

设置所有 type=”text” 的禁用的输入元素的背景颜色：

css基础 CSS 组合选择符、CSS 伪类、CSS 伪元素_html_10

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>显示</title>
    <style>
        input[type="text"]:enabled {
            background: #ffff00;
        }

        input[type="text"]:disabled {
            background: #dddddd;
        }
    </style>
</head>
<body>

<form action="">
    用户名: <input type="text" value="请输入用户名" /><br>
    密码: <input type="text" value="请输入密码" /><br>
    手机: <input type="text" disabled="disabled" value="请输入手机号" /><br>
</form>

</body>
</html>

CSS3 :empty 选择器择每个没有任何子级的元素

:empty 选择器选择每个没有任何子级的元素（包括文本节点）。

指定空的 p 元素的背景色：

css基础 CSS 组合选择符、CSS 伪类、CSS 伪元素_选择器_11

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>显示</title>
    <style>
        p:empty{
            width:100px;
            height:20px;
            background:#ff0000;
        }
    </style>
</head>
<body>

    <p></p>
    <p>一个段落</p>
    <p>另一个段落</p>

</body>
</html>

CSS3 :enabled 选择器匹配每个启用的的元素

:enabled 选择器匹配每个启用的的元素（主要用于表单元素）。

设置所有 type=”text” 的启用的输入元素的背景颜色：

css基础 CSS 组合选择符、CSS 伪类、CSS 伪元素_html_12

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>显示</title>
    <style>
        input[type="text"]:enabled {
            background:#ffff00;
        }
    </style>
</head>
<body>

<form action="">
    用户名: <input type="text" value="请输入用户名" /><br>
    密码: <input type="text" value="请输入密码" /><br>
    手机: <input type="text" disabled="disabled" value="请输入手机号" /><br>
</form>

</body>
</html>

:first-of-type 选择器匹配元素其父级是特定类型的第一个子元素

提示: 和 :nth-of-type(1) 是一个意思。

选择的 p 元素是其父元素的第一个 p 元素：

css基础 CSS 组合选择符、CSS 伪类、CSS 伪元素_CSS_13

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>显示</title>
    <style>
        p:first-of-type{
            background:#ff0000;
        }
    </style>
</head>
<body>

    <p>一个段落</p>
    <p>另一个段落</p>

</body>
</html>

:in-range 选择器用于标签的值在指定区间值时显示的样式

注意： :in-range 选择器只作用于能指定区间值的元素，例如 input 元素中的 min 和 max 属性。

css基础 CSS 组合选择符、CSS 伪类、CSS 伪元素_css_14

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>显示</title>
    <style>
        input:in-range
        {
            border:2px solid yellow;
        }
    </style>
</head>
<body>

<h3>:in-range 选择器实例演示。</h3>
<input type="number" min="5" max="10" value="7" />
<p>在input中输入一个值 (小于 5 或者 大于 10), 查看样式的变化。</p>

</body>
</html>

:invalid 选择器用于在表单元素中的值是非法时设置指定样式

注意： :invalid 选择器只作用于能指定区间值的元素，例如 input 元素中的 min 和 max 属性，及正确的 email 字段, 合法的数字字段等。

css基础 CSS 组合选择符、CSS 伪类、CSS 伪元素_CSS_15

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<title>菜鸟教程(runoob.com)</title> 
<style>
input:invalid
{
	border:2px solid red;
}
</style>
</head>
<body>

<h3> :invalid 选择器实例演示。</h3>

<input type="email" value="supportEmail" />

<p>请输入合法 e-mail 地址，查看样式变化。</p>

</body>
</html>

:last-child 选择器用来匹配父元素中最后一个子元素

:last-child 选择器用来匹配父元素中最后一个子元素。

提示: p:last-child 等同于 p:nth-last-child(1)。

指定父元素中最后一个 p 元素的背景色：

css基础 CSS 组合选择符、CSS 伪类、CSS 伪元素_html_16

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<title>菜鸟教程(runoob.com)</title> 
<style> 
p:last-child
{
	background:#ff0000;
}
</style>
</head>
<body>

<p>The first paragraph.</p>
<p>The second paragraph.</p>
<p>The third paragraph.</p>
<p>The fourth paragraph.</p>

</body>
</html>

:last-of-type 选择器匹配元素其父级是特定类型的最后一个子元素

提示: 和 :nth-last-of-type(1) 是一个意思

css基础 CSS 组合选择符、CSS 伪类、CSS 伪元素_CSS_17

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<title>菜鸟教程(runoob.com)</title> 
<style> 
p:last-of-type
{
	background:#ff0000;
}
</style>
</head>
<body>

<h1>This is a heading</h1>
<p>The first paragraph.</p>
<p>The second paragraph.</p>
<p>The third paragraph.</p>
<p>The fourth paragraph.</p>

</body>
</html>

CSS 伪元素

CSS伪元素是用来添加一些选择器的特殊效果。

伪元素的语法：

selector:pseudo-element {property:value;}

CSS类也可以使用伪元素：

selector.class:pseudo-element {property:value;}

:first-line 伪元素

:first-line 伪元素用于向文本的首行设置特殊样式。

在下面的例子中，浏览器会根据 :first-line 伪元素中的样式对 p 元素的第一行文本进行格式化：

p:first-line 
{
    color:#ff0000;
    font-variant:small-caps;
}

注意： :first-line 伪元素只能用于块级元素。

注意： 下面的属性可应用于 :first-line 伪元素：

font properties
     color properties
background properties
  word-spacing
letter-spacing
text-decoration
vertical-align
text-transform
line-height
clear

:first-letter 伪元素

:first-letter 伪元素用于向文本的首字母设置特殊样式：

p:first-letter 
{
    color:#ff0000;
    font-size:xx-large;
}

注意： :first-letter 伪元素只能用于块级元素。

注意： 下面的属性可应用于 :first-letter 伪元素：

font properties
color properties
background properties
margin properties
padding properties
border properties
text-decoration
vertical-align (only if “float” is “none”)
text-transform
line-height
float
clear

伪元素和CSS类

伪元素可以结合CSS类：

p.article:first-letter {color:#ff0000;}

<p class="article">文章段落</p>

上面的例子会使所有 class 为 article 的段落的首字母变为红色。

多个伪元素

可以结合多个伪元素来使用。

在下面的例子中，段落的第一个字母将显示为红色，其字体大小为 xx-large。第一行中的其余文本将为蓝色，并以小型大写字母显示。

段落中的其余文本将以默认字体大小和颜色来显示：

p:first-letter
{
    color:#ff0000;
    font-size:xx-large;
}
p:first-line 
{
    color:#0000ff;
    font-variant:small-caps;
}

CSS – :before 伪元素

:before 伪元素可以在元素的内容前面插入新内容。

下面的例子在每个 <h1> 元素前面插入wgchen ：

css基础 CSS 组合选择符、CSS 伪类、CSS 伪元素_html_18

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<title>菜鸟教程(runoob.com)</title> 
<style>
p:before
{
	content:"Read this -";
}
</style>
</head>

<body>
<p>My name is Donald</p>
<p>I live in Ducksburg</p>

<p><b>注意:</b>  :before 作用于 IE8,DOCTYPE 必须已经声明.</p>

</body>
</html>

CSS – :after 伪元素

:after 伪元素可以在元素的内容之后插入新内容。

下面的例子在每个 <h1> 元素后面插入 wgchen：

css基础 CSS 组合选择符、CSS 伪类、CSS 伪元素_css_19

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<title>菜鸟教程(runoob.com)</title> 
<style>
p:after
{ 
content:"- 注意我";
}
</style>
</head>

<body>
<p>我的名字是 Donald</p>
<p>我住在 Ducksburg</p>

<p><b>注意：</b> :after在IE8中运行，必须声明 !DOCTYPE </p>

</body>
</html>

所有CSS伪类/元素

选择器

示例

示例说明

:link

a:link

选择所有未访问链接

:visited

a:visited

选择所有访问过的链接

:active

a:active

选择正在活动链接

:hover

a:hover

把鼠标放在链接上的状态

:focus

input:focus

选择元素输入后具有焦点

:first-letter

p:first-letter

选择每个<p> 元素的第一个字母

:first-line

p:first-line

选择每个<p> 元素的第一行

:first-child

p:first-child

选择器匹配属于任意元素的第一个子元素的 <p> 元素

:before

p:before

在每个<p>元素之前插入内容

:after

p:after

在每个<p>元素之后插入内容

:lang(language)

p:lang(it)

为<p>元素的lang属性选择一个开始值


标签：伪类,元素,选择符,child,选择器,CSS,first
From： https://blog.51cto.com/u_13571520/6147112

相关文章

  • css基础 CSS 布局 – Overflow、Float 浮动、CSS 布局 – 水平 垂直居中对齐
    阅读目录CSS布局–Overflowoverflow:visibleoverflow:hiddenoverflow:scrolloverflow:autoverflow-x和overflow-y所有CSSOverflow属性CSSFloat浮动float属性......
  • CSS3实现的线条波浪动画效果
    阅读目录阐述HTML结构CSS样式预览阐述这是一款使用CSS3animation动画和png图片制作的css3线条波浪动画效果。该特效中，使用了3张波浪线条的png图片，以及少量的CSS......
  • CSS实现的大型导航下拉菜单
    阅读目录阐述HTML结构CSS预览阐述这是一款纯CSS实现的大型导航下拉菜单。该大型菜单使用HTML和纯CSS代码制作，没有任何js代码，不依赖任意第三方插件。适合用于栏目分......
  • 纯CSS和HTML打造树结构
    阅读目录源码HTML源码请到资源下载源码。HTML我们以某个公司的部门组织结构为例，其实就是一个无限级分类，我们首先定义好HTML结构，它有ulli组成，代码应该像这样：<!DOCTYPEhtml>......
  • CSS中的transform（2D转换）
    transform是元素转换属性，其属性值为转换函数，使用该属性可以让元素向指定方向移动、缩放大小、旋转等变化。有以下三种转换函数：旋转函数（rotate）移动函数（translate）缩放......
  • css绝对定位，没有设置left或top
    目标：做h5实现以下情形问题：不知为何成了这样：   分析：下列是代码： 已知id="div_2"的div的父类已经定位，故该div块的位置是相对于这个父类。修改之前的代码：进行......
  • vite scss相关
    viteisassScss与Sass异同vite项目安装sassnpmisass-D然后在项目中添加如下即可<stylescopelang="scss"></style>项目主题切换利用sass的混入特性，实现切换......
  • css绘制一个Pinia小菠萝
    效果如下：pinia小菠萝分为头部和身体，头部三片叶子，菠萝为身体头部先绘制头部的盒子，将三片叶子至于头部盒子中先绘制中间的叶子，利用border-radius实现叶子的效果，可以借......
  • 使用chrome ABC JS-CSS Injector插件，劫持网页js文件改写调试
    通过保存网站JS文件，然后阻止源本该访问的JS文件，通过ABCJS-CSSInjector讲需要访问的JS转到本地的JS，进行劫持，就可以进行修改调试1.需要插件：ABCJS-CSSInjector  ......
  • CSS详解
    CascadingStyleSheets层叠样式表HTML+CSS+JavaScript框架+表现+交互一、初始及入门1.CSS概念CSS在网页中的应用CSS的发展史CSS的优势2.CSS基本语法标签style3.......

赞助商

阅读排行

网站主页关于我们联系我们网站地图

本网站内容转载自其他媒体，侵权联系[admin##ips99.com]。

Copyright © 2020-2023 IPS99 版权所有 IPS99