CSS选择器详解

最新推荐文章于 2023-01-10 14:24:12 发布
最新推荐文章于 2023-01-10 14:24:12 发布
阅读量6w 收藏 318
点赞数 49
分类专栏： CSS笔记 文章标签： css选择器详解 css全部的选择器 css选择器
CSDN_Qayrup
本文链接：https://blog.csdn.net/weixin_44368963/article/details/108279455
版权

CSS所有选择器列表

CSS选择器用于选择你想要的元素的样式的模式。下面是css所有的选择器

选择器示例示例说明css版本
.class.intro选择所有class="intro"的元素1
#id#firstname选择所有id="firstname"的元素1
**选择所有元素2
elementp选择所有< p >元素1
element,elementdiv,p选择所有< div >元素和< p >元素1
element elementdiv p选择< div >元素内的所有< p >元素1
element>elementdiv>p选择所有父级是 < div > 元素的 < p > 元素2
element+elementdiv+p选择所有紧接着< div >元素之后的< p >元素2
[attribute][target]选择所有带有target属性元素2
[attribute=value][target=-blank]选择所有使用target="-blank"的元素2
[attribute~=value][title~=flower]选择标题属性包含单词"flower"的所有元素2
[attribute丨=language][lang丨=en]选择 lang 属性以 en 为开头的所有元素2
:linka:link选择所有未访问链接1
:visiteda:visited选择所有访问过的链接1
:activea:active选择活动链接1
:hovera:hover选择鼠标在链接上面时1
:focusinput:focus选择具有焦点的输入元素2
:first-letterp:first-letter选择每一个< p >元素的第一个字母1
:first-linep:first-line选择每一个< p >元素的第一行1
:first-childp:first-child指定只有当< p >元素是其父级的第一个子级的样式。2
:beforep:before在每个< p >元素之前插入内容2
:afterp:after在每个< p >元素之后插入内容2
:lang(language)p:lang(it)选择一个lang属性的起始值="it"的所有< p >元素2
element1~element2p~ul选择p元素之后的每一个ul元素3
[attribute^ = value]a[src^=“https”]选择每一个src属性的值以"https"开头的元素3
[attribute$=value]a[src$=".pdf"]选择每一个src属性的值以".pdf"结尾的元素3
[attribute*=value]a[src*=“runoob”]选择每一个src属性的值包含子字符串"runoob"的元素3
:first-of-typep:first-of-type选择每个p元素是其父级的第一个p元素3
:last-of-typep:last-of-type选择每个p元素是其父级的最后一个p元素3
:only-of-typep:only-of-type选择每个p元素是其父级的唯一p元素3
:only-childp:only-child选择每个p元素是其父级的唯一子元素3
:nth-child(n)p:nth-child(2)选择每个p元素是其父级的第二个子元素3
:nth-last-child(n)p:nth-last-child(2)选择每个p元素的是其父级的第二个子元素，从最后一个子项计数3
:nth-of-type(n)p:nth-of-type(2)选择每个p元素是其父级的第二个p元素3
:nth-last-of-type(n)p:nth-last-of-type(2)选择每个p元素的是其父级的第二个p元素，从最后一个子项计数3
:last-childp:last-child选择每个p元素是其父级的最后一个子级。3
:root:root选择文档的根元素3
:emptyp:empty选择每个没有任何子级的p元素（包括文本节点）3
:target#news:target选择当前活动的#news元素（包含该锚名称的点击的URL）3
:enabledinput:enabled选择每一个已启用的输入元素3
:disabledinput:disabled选择每一个禁用的输入元素3
:checkedinput:checked选择每个选中的输入元素3
:not(selector):not§选择每个并非p元素的元素3
::selection::selection匹配元素中被用户选中或处于高亮状态的部分3
:out-of-range:out-of-range匹配值在指定区间之外的input元素3
:in-range:in-range匹配值在指定区间之内的input元素3
:read-write:read-write用于匹配可读及可写的元素3
:read-only:read-only用于匹配设置 “readonly”（只读） 属性的元素3
:optional:optional用于匹配可选的输入元素3
:required:required用于匹配设置了 “required” 属性的元素3
:valid:valid用于匹配输入值为合法的元素3
:invalid:invalid用于匹配输入值为非法的元素3

咱们一个一个来

.class 选择器

示例代码 选择类为mystyle的元素将color设置为red。font设置为800

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>无标题文档</title>
<style>
	.mystyle{
		color:red;
		font:800;
	}
    </style>
  </head>
  <body>
    <span class="mystyle">无所不能的林大王asp</span>
  </body>
</html>

效果实现

在这里插入图片描述

#id 选择器

示例代码：
选择 id为myID 的元素将color设置为coral font设置为800

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>无标题文档</title>
<style>
	#myID{
		color:coral;
		font:800;
	}
    
    </style>
  </head>
  <body>
    <span id="myID">无所不能的林大王asp</span>
  </body>
</html>

效果
在这里插入图片描述

* 选择器

示例
*选择所有元素背景颜色设置为aqua

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>无标题文档</title>
<style>
	*{
		background-color: aqua;
	}
    
    </style>
  </head>
  <body>
    <span>无所不能的林大王asp</span>
  </body>
</html>

效果示例
在这里插入图片描述

element 选择器

示例 选择所有的span元素，将background-color设置为red;

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>无标题文档</title>
<style>
	span{
		background-color: red;
	}
    
    </style>
  </head>
  <body>
    <span>无所不能的林大王asp</span>
  </body>
</html>

效果
在这里插入图片描述

element,element 选择器

示例,选择所有的span元素和p元素,将background-color设置为 red;
(可以选择无限制的元素,用逗号分隔)

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>无标题文档</title>
<style>
	span , p{
		background-color: red;
	}
    
    </style>
  </head>
  <body>
    <span>无所不能的林大王asp</span>
	  <p>afhjalskfddksaldf</p>
  </body>
</html>

效果
在这里插入图片描述

element element 选择器

示例
选择body元素下的所有p元素,将background-color设置为 red;

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>无标题文档</title>
<style>
	body  p{
		background-color: red;
	}
    
    </style>
  </head>
  <body>
    <span>无所不能的林大王asp</span>
	  <p>afhjalskfddksaldf</p>
	  <p>fafhaskldfs</p>
  </body>
</html>

效果
在这里插入图片描述

element>element 选择器

示例:
选择所有父级是 < div > 元素的 < p > 元素 将background-color设置为 red;

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>无标题文档</title>
<style>
	div> p{
		background-color: red;
	}
    
    </style>
  </head>
  <body>
	  <div><p>我的父级是div</p></div>
    <span>无所不能的林大王asp</span>
	  <p>afhjalskfddksaldf</p>
	  <p>fafhaskldfs</p>
  </body>
</html>

效果
在这里插入图片描述

element+element

示例
选择所有紧接着< div >元素之后的< p >元素 将background-color设置为 red;

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>无标题文档</title>
<style>
	div+ p{
		background-color: red;
	}
    
    </style>
  </head>
  <body>
	  <div><p>我的父级是div</p></div>
	  <p>我跟在div后面</p>
    <span>无所不能的林大王asp</span>
	  <p>afhjalskfddksaldf</p>
	  <p>fafhaskldfs</p>
  </body>
</html>

效果
在这里插入图片描述

[attribute]选择器

示例
选择所有带有align属性元素并将background-color:设置为red;

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>无标题文档</title>
<style>
	[align]{
		background-color: red;
	}
    
    </style>
  </head>
  <body>
	  <div align="left"><p>我的父级是div</p></div>
	  <p>我跟在div后面</p>
    <span >无所不能的林大王asp</span>
	  <p>afhjalskfddksaldf</p>
	  <p>fafhaskldfs</p>
  </body>
</html>

效果
在这里插入图片描述

[attribute=value]选择器

示例
选择所有使用align="left"的元素

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>无标题文档</title>
<style>
	[align=left]{
		background-color: red;
	}
    
    </style>
  </head>
  <body>
	  <div align="left"><p>我的父级是div</p></div>
	  <p>我跟在div后面</p>
    <span >无所不能的林大王asp</span>
	  <p>afhjalskfddksaldf</p>
	  <p>fafhaskldfs</p>
  </body>
</html>

效果
在这里插入图片描述

[attribute~=value] 选择器

示例
选择标题属性包含单词"flower"的所有元素并将background-color设置为 red;
注意是包含单词flower 而不是字段所以flowers是不行的

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>无标题文档</title>
<style>
	[title~=flower]{
		background-color: red;
	}
    
    </style>
  </head>
  <body>
	  <div title="flower"><p>我的父级是div</p></div>
	  <p title="flowers index">我跟在div后面</p>
    <span title="flower indexs main">无所不能的林大王asp</span>
	  <p title="main flower">afhjalskfddksaldf</p>
	  <p>fafhaskldfs</p>
  </body>
</html>

在这里插入图片描述

[attribute|=language] 选择器

选择 lang 属性以 en 为开头的所有元素并将background-color设置为 red;
示例

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>无标题文档</title>
<style>
	[lang|=en]{
		background-color: red;
	}
    
    </style>
  </head>
  <body>
	<p lang="en">Hello!</p>
	<p lang="en-us">Hi!</p>
	<p lang="en-gb">无所不能的林大王!</p>
	<p lang="us">Hi!</p>
	<p lang="no">Hei!</p>
</body>
</html>

效果
在这里插入图片描述

:link , :visited , :active 选择器

:link 选择所有未访问链接并将background-color设置为 red;
:visited 选择所有访问过的链接 并将background-color设置为 green;
:active 选择活动链接 并将background-color设置为 yellow;

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>无标题文档</title>
<style>
	a:link{
		background-color: red;
	}
	a:visited{
		background-color: green;
	}
	a:active{
		background-color: yellow;
	}
	
    </style>
  </head>
  <body>
	<a href="https://www.baidu.com/">百度</a>
	<a href="https://www.huawei.com/">华为</a>
	<a href="https://www.sougo.com/">搜狗</a>
</body>
</html>

效果
华为已经访问过了
在这里插入图片描述

: hover 伪类

示例
选择鼠标在选中元素上面时将background-color设置为 coral;

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>无标题文档</title>
<style>
	
	#bd:hover{
		background-color: coral;
	}
    </style>
  </head>
  <body>
	<a href="https://www.baidu.com/" id="bd">百度</a>
	<a href="https://www.huawei.com/">华为</a>
	<a href="https://www.sougo.com/">搜狗</a>
</body>
</html>

效果
当我将鼠标移动到百度上面时,百度背景色变为品红
在这里插入图片描述

:focus

选择具有焦点的输入元素并将其height设置为100px width设置为300px

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>无标题文档</title>
<style>
	
	input:focus{
		
		height: 100px;
		width: 300px;
	};
    </style>
  </head>
  <body>
	<input type="text">
	  <input type="text">
</body>
</html>

效果
在这里插入图片描述

:first-letter

选择每一个

元素的第一个字母,并将其 font-size:设置为100px; color:设置为red;

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>无标题文档</title>
<style>
	
	p:first-letter{
		font-size: 100px;
		color: red;
	}
    </style>
  </head>
  <body>
	<p>sdakfjasldkf</p>
	<p>ergtraesrf</p>
	<p>afafasdf</p>
</body>
</html>

效果
在这里插入图片描述

:first-line

示例
选择每一个p元素的第一行并将其color设置为red

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>无标题文档</title>
<style>
	
	p:first-line{
		color: red;
	}
    </style>
  </head>
  <body>
	  <div style="height: 100px ;width:  400px">
	  <p>fffadsfndsaklnf lkdsn vcdsvedmflkamefkfmkfdsff coi ew hiefh wauefhlawfcnialvsn,k  ewfwafffadsfndsaklnf lkdsn vcdsvedmflkamefkfmkfdsff coi ew hiefh wauefhlawfcnialvsn,k  ewfwafffadsfndsaklnf lkdsn vcdsvedmflkamefkfmkfdsff coi ew hiefh wauefhlawfcnialvsn,k  ewfwa</p>
	  <p>fffadsfndsaklnf lkdsn vcdsvedmflkamefkfmkfdsff coi ew hiefh wauefhlawfcnialvsn,k  ewfwafffadsfndsaklnf lkdsn vcdsvedmflkamefkfmkfdsff coi ew hiefh wauefhlawfcnialvsn,k  ewfwafffadsfndsaklnf lkdsn vcdsvedmflkamefkfmkfdsff coi ew hiefh wauefhlawfcnialvsn,k  ewfwa</p>
	  <p>fffadsfndsaklnf lkdsn vcdsvedmflkamefkfmkfdsff coi ew hiefh wauefhlawfcnialvsn,k  ewfwafffadsfndsaklnf lkdsn vcdsvedmflkamefkfmkfdsff coi ew hiefh wauefhlawfcnialvsn,k  ewfwafffadsfndsaklnf lkdsn vcdsvedmflkamefkfmkfdsff coi ew hiefh wauefhlawfcnialvsn,k  ewfwafffadsfndsaklnf lkdsn vcdsvedmflkamefkfmkfdsff coi ew hiefh wauefhlawfcnialvsn,k  ewfwa</p></div>
</body>
</html>

效果

在这里插入图片描述

:first-child

示例
指定只有当< p >元素是其父级的第一个子级的样式。

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>无标题文档</title>
<style>
	
	p:first-child{
		color: red;
	}
    </style>
  </head>
  <body>
	  
	  <p>这个p元素是它父级的第一个子集</p>

<h1>Welcome to Beijing </h1>
<p>这个p元素是它父级的第三个子集</p>

<div>
<p>这个p元素是它父级的第一个子集</p>
<p>这个p元素是它父级的第二个子集</p>
</div>
</body>
</html>

:before 选择器向选定的元素前插入内容

示例;
在每个< p >元素之前插入内容并设置样式

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>无标题文档</title>
<style>
	
	p:before
{ 
	content:"我是before插入的文字-";
	background-color:yellow;
	color:red;
	font-weight:bold;
}
    </style>
  </head>
  <body>
	  

<p>德玛西亚</p>
<p>艾欧尼亚</p>
</body>	
</html>

效果图
在这里插入图片描述

:after 选择器向选定的元素之后插入内容

示例
在每个 < p >之后插入的内容和样式:

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>无标题文档</title>
<style>
	
	p:after
{ 
	content:"我是after插入的文字-";
	background-color:yellow;
	color:red;
	font-weight:bold;
}
    </style>
  </head>
  <body>
	  

<p>德玛西亚</p>
<p>艾欧尼亚</p>
</body>	
</html>

在这里插入图片描述

:lang 向带有指定 lang 属性开始的元素添加样式

示例
每个< p >元素lang属性值等于"it(Italian)" 的选择的样式：

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>无标题文档</title>
<style>
	
	p:lang(it)
{ 
	background-color:yellow;
	color:red;
	
}
    </style>
  </head>
  <body>
	  

<p>德玛西亚</p>
<p lang="it">艾欧尼亚</p>
</body>	
</html>

效果
在这里插入图片描述

element1~element2 选择器匹配出现在 element1 后面的 element2

示例
设置同一父元素下的 p 元素之后的每一个 ul 元素的背景颜色：

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>无标题文档</title>
<style>
	
	p~ul
{ 
	content:"我是after插入的文字-";
	background-color:yellow;
	color:red;
	
}
    </style>
  </head>
  <body>
	  

<div>艾欧尼亚</div>
<ul>
  <li>德玛</li>
  <li>卢卡斯</li>
  <li>不知好歹</li>
</ul>

<p>诺克萨斯</p>
<ul>
  <li>小学生之手</li>
  <li>伊芙琳</li>
  <li>托儿所</li>
</ul>

<h2>暗影岛</h2>
<ul>
  <li>卡瑟琳</li>
  <li>楚雨荨</li>
  <li>菲奥娜</li>
</ul>
</body>	
</html>

效果
在这里插入图片描述

[attribute^=value] 选择器匹配元素属性值带指定的值开始的元素

示例
设置class属性值以"all"单词开头的所有元素的背景颜色：

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>无标题文档</title>
<style>
	
	[class^="all"]
{ 
	
	background-color:yellow;
	color:red;
	
}
    </style>
  </head>
  <body>
	  

<div>艾欧尼亚</div>
<ul>
  <li class="all">德玛</li>
  <li>卢卡斯</li>
  <li>不知好歹</li>
</ul>

<p>诺克萨斯</p>
<ul>
  <li>小学生之手</li>
  <li class="all">伊芙琳</li>
  <li>托儿所</li>
</ul>

<h2 class="all">暗影岛</h2>
<ul>
  <li>卡瑟琳</li>
  <li>楚雨荨</li>
  <li>菲奥娜</li>
</ul>
</body>	
</html>

效果
在这里插入图片描述

[attribute$=value] 选择器匹配元素属性值带指定的值结尾的元素

示例
设置class属性值以"test"结尾的所有div元素的背景颜色：

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>无标题文档</title>
<style>
	
	[class$="all"]
{ 
	
	background-color:yellow;
	color:red;
	
}
    </style>
  </head>
  <body>
	  

<div>艾欧尼亚</div>
<ul>
  <li class="safaall">德玛</li>
  <li>卢卡斯</li>
  <li>不知好歹</li>
</ul>

<p>诺克萨斯</p>
<ul>
  <li>小学生之手</li>
  <li class="all">伊芙琳</li>
  <li>托儿所</li>
</ul>

<h2 class="sfa all">暗影岛</h2>
<ul>
  <li>卡瑟琳</li>
  <li>楚雨荨</li>
  <li>菲奥娜</li>
</ul>
</body>	
</html>

效果
在这里插入图片描述

[attribute*=value] 选择器匹配元素属性值包含指定值的元素

示例
匹配class属性里包含字符a的所有元素

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>无标题文档</title>
<style>
	
	[class*="a"]
{ 
	
	background-color:yellow;
	color:red;
	
}
    </style>
  </head>
  <body>
	  

<div>艾欧尼亚</div>
<ul>
  <li class="safaall">德玛</li>
  <li class="fdeasf">卢卡斯</li>
  <li>不知好歹</li>
</ul>

<p class="fadsf">诺克萨斯</p>
<ul>
  <li>小学生之手</li>
  <li class="all">伊芙琳</li>
  <li>托儿所</li>
</ul>

<h2 class="sfa all">暗影岛</h2>
<ul>
  <li>卡瑟琳</li>
  <li>楚雨荨</li>
  <li>菲奥娜</li>
</ul>
</body>	
</html>

效果
在这里插入图片描述

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

示例
选择的 li元素是其父元素的第一个 元素：

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>无标题文档</title>
<style>
	
	li:first-of-type
{ 
	
	background-color:yellow;
	color:red;
	
}
    </style>
  </head>
  <body>
	  

<div>艾欧尼亚</div>
<ul>
  <li class="safaall">德玛</li>
  <li class="fdeasf">卢卡斯</li>
  <li>不知好歹</li>
</ul>

<p class="fadsf">诺克萨斯</p>
<ul>
  <li>小学生之手</li>
  <li class="all">伊芙琳</li>
  <li>托儿所</li>
</ul>

<h2 class="sfa all">暗影岛</h2>
<ul>
  <li>卡瑟琳</li>
  <li>楚雨荨</li>
  <li>菲奥娜</li>
</ul>
</body>	
</html>

在这里插入图片描述

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

示例
选择的 li元素是其父元素的最后一个元素：

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>无标题文档</title>
<style>
	
	li:last-of-type
{ 
	
	background-color:yellow;
	color:red;
	
}
    </style>
  </head>
  <body>
	  

<div>艾欧尼亚</div>
<ul>
  <li class="safaall">德玛</li>
  <li class="fdeasf">卢卡斯</li>
  <li>不知好歹</li>
</ul>

<p class="fadsf">诺克萨斯</p>
<ul>
  <li>小学生之手</li>
  <li class="all">伊芙琳</li>
  <li>托儿所</li>
</ul>

<h2 class="sfa all">暗影岛</h2>
<ul>
  <li>卡瑟琳</li>
  <li>楚雨荨</li>
  <li>菲奥娜</li>
</ul>
</body>	
</html>

效果

在这里插入图片描述

:only-of-type 代表了任意一个元素，这个元素没有其他相同类型的兄弟元素

示例
指定属于父元素的特定类型的唯一子元素的每个 span 元素：：给它们添加样式

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>无标题文档</title>
<style>
	
	span:only-of-type
{ 
	
	background-color:yellow;
	color:red;
	
}
    </style>
  </head>
  <body>
	  

<div>艾欧尼亚</div>
<ul>
  <li class="safaall">德玛</li>
  
  <li class="fdeasf">卢卡斯</li>
  <li>不知好歹</li>
</ul>
<span>唯一的span元素</span>	
<p class="fadsf">诺克萨斯</p>
<ul>
<span>ul下的唯一的span</span>
  <li>小学生之手</li>
  <li class="all">伊芙琳</li>
  <li>托儿所</li>
</ul>

<h2 class="sfa all">暗影岛</h2>
<ul>
  <li>卡瑟琳</li>
  <li>楚雨荨</li>
  <li>菲奥娜</li>
</ul>
</body>	
</html>

效果

在这里插入图片描述

:only-child 选择器匹配属于父元素中唯一子元素的元素

示例
匹配属于父元素中唯一子元素的 li元素:

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>无标题文档</title>
<style>
	
	li:only-child
{ 
	
	background-color:yellow;
	color:red;
	
}
    </style>
  </head>
  <body>
	  

<div>艾欧尼亚</div>
<ul>
  <li class="safaall">德玛</li>
  
  <li class="fdeasf">卢卡斯</li>
  <li>不知好歹</li>
</ul>
<span>唯一的span元素</span>	
<p class="fadsf">诺克萨斯</p>
<ul>
<span>ul下的唯一的span</span>
  <li>小学生之手</li>
  <li class="all">伊芙琳</li>
  <li>托儿所</li>
</ul>

<h2 class="sfa all">暗影岛</h2>
<ul>
  <li>ul下的唯一子元素</li>
  
</ul>
</body>	
</html>

效果
在这里插入图片描述

:nth-child(n) 选择器匹配父元素中的第 n 个子元素，元素类型没有限制

n 可以是一个数字，一个关键字，或者一个公式。

  1. 示例
    奇数和偶数是可以作为关键字使用用于相匹配的子元素，其索引是奇数或偶数（该索引的第一个子节点是1）。 在这里，我们为奇数和偶数p元素指定两个不同的背景颜色：
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>无标题文档</title>
<style>
	
	p:nth-child(odd)
{
	background:#ff0000;
}
p:nth-child(even)
{
	background:#0000ff;
}
    </style>
  </head>
  <body>
	  <h1>1.艾欧尼亚</h1>
<p>2.诺克萨斯</p>
<p>3.恕瑞玛,尼玛的黄鸡回来了</p>
<p>4.哈撒给</p>
</body>	
</html>

效果
在这里插入图片描述
2. 示例
使用公式（an+ b）.描述：a代表一个循环的大小，N是一个计数器（从0开始），以及b是偏移量。 在这里，我们对所有索引是3的倍数的p元素指定了背景颜色：

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>无标题文档</title>
<style>
	
	p:nth-child(3n+0)
{
	background:#ff0000;
}
    </style>
  </head>
  <body>
	  <h1>1.艾欧尼亚</h1>
<p>2.诺克萨斯</p>
<p>3.恕瑞玛,尼玛的黄鸡回来了</p>
<p>4.哈撒给</p>
<p>5.哈撒</p>
<p>哦里呀嘎痛</p>
<p>死亡如风,常伴吾身</p>
<p>如果你想要杀我,希望你把你们的朋友也叫上</p>
<p>一点寒芒先到,而后枪出如龙</p>
<p>破碎的剑刃,破碎的意志</p>
</body>	
</html>

效果
在这里插入图片描述

:nth-last-child(n) 选择器匹配属于其元素的第 N 个子元素的每个元素，不论元素的类型，从最后一个子元素开始计数

n可以是一个数字，一个关键字，或者一个公式。

  1. 示例
    奇数和偶数是可以作为关键字使用用于相匹配的子元素，其索引是奇数或偶数。

在这里，我们为奇数和偶数的倒数p元素指定两个不同的背景颜色：

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>无标题文档</title>
<style>
	
	p:nth-last-child(odd)
{
	background:#ff0000;
}
p:nth-last-child(even)
{
	background:#0000ff;
}
    </style>
  </head>
  <body>
	  <h1>1.艾欧尼亚</h1>
<p>2.诺克萨斯</p>
<p>3.恕瑞玛,尼玛的黄鸡回来了</p>
<p>4.哈撒给</p>
<p>5.哈撒</p>
<p>哦里呀嘎痛</p>
<p>死亡如风,常伴吾身</p>
<p>如果你想要杀我,希望你把你们的朋友也叫上</p>
<p>一点寒芒先到,而后枪出如龙</p>
<p>破碎的剑刃,破碎的意志</p>
</body>	
</html>

效果

在这里插入图片描述

  1. 示例
    使用公式（an+ b）.描述：a代表一个循环的大小，N是一个计数器（从0开始），以及b是偏移量。

在这里，我们对所有索引是3的倍数的倒数顺序的p元素指定了背景颜色：

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>无标题文档</title>
<style>
	
	p:nth-last-child(3n+0)
{
	background:#ff0000;
}
    </style>
  </head>
  <body>
	  <h1>1.艾欧尼亚</h1>
<p>2.诺克萨斯</p>
<p>3.恕瑞玛,尼玛的黄鸡回来了</p>
<p>4.哈撒给</p>
<p>5.哈撒</p>
<p>哦里呀嘎痛</p>
<p>死亡如风,常伴吾身</p>
<p>如果你想要杀我,希望你把你们的朋友也叫上</p>
<p>一点寒芒先到,而后枪出如龙</p>
<p>破碎的剑刃,破碎的意志</p>
</body>	
</html>

在这里插入图片描述

:nth-of-type(n)选择器匹配同类型中的第n个同级兄弟元素

n可以是一个数字，一个关键字，或者一个公式。

  1. 示例
    奇数和偶数是可以作为关键字使用用于相匹配的子元素，其索引是奇数或偶数（该索引的第一个子节点是1）。

在这里，我们为奇数和偶数p元素指定两个不同的背景颜色：

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>无标题文档</title>
<style>
	
	p:nth-of-type(odd)
{
	background:#ff0000;
}
p:nth-of-type(even)
{
	background:#0000ff;
}
    </style>
  </head>
  <body>
	  <h1>1.艾欧尼亚</h1>
<p>2.诺克萨斯</p>
<p>3.恕瑞玛,尼玛的黄鸡回来了</p>
<p>4.哈撒给</p>
<p>5.哈撒</p>
<p>哦里呀嘎痛</p>
<p>死亡如风,常伴吾身</p>
<p>如果你想要杀我,希望你把你们的朋友也叫上</p>
<p>一点寒芒先到,而后枪出如龙</p>
<p>破碎的剑刃,破碎的意志</p>
</body>	
</html>

效果
在这里插入图片描述
2. 示例
使用公式（an+ b）.描述：a代表一个循环的大小，N是一个计数器（从0开始），以及b是偏移量。

在这里，我们对所有索引是3的倍数的p元素指定了背景颜色：

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>无标题文档</title>
<style>
	
	p:nth-of-type(3n+0)
{
	background:#ff0000;
}
    </style>
  </head>
  <body>
	  <h1>1.艾欧尼亚</h1>
<p>2.诺克萨斯</p>
<p>3.恕瑞玛,尼玛的黄鸡回来了</p>
<p>4.哈撒给</p>
<p>5.哈撒</p>
<p>哦里呀嘎痛</p>
<p>死亡如风,常伴吾身</p>
<p>如果你想要杀我,希望你把你们的朋友也叫上</p>
<p>一点寒芒先到,而后枪出如龙</p>
<p>破碎的剑刃,破碎的意志</p>
</body>	
</html>

效果
在这里插入图片描述

:nth-last-of-type(n)选择器匹配同类型中的倒数第n个同级兄弟元素

nth-last-of-type(n)使用方法同上,不过这是从最后一个元素开始计数

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

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

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>无标题文档</title>
<style>
	
	p:last-child
{
	background:yellow;
}
    </style>
  </head>
  <body>
	  <h1>1.艾欧尼亚</h1>
<p>2.诺克萨斯</p>
<p>3.恕瑞玛,尼玛的黄鸡回来了</p>
<p>4.哈撒给</p>
<p>5.哈撒</p>
<p>哦里呀嘎痛</p>
<p>死亡如风,常伴吾身</p>
<p>如果你想要杀我,希望你把你们的朋友也叫上</p>
<p>一点寒芒先到,而后枪出如龙</p>
<p>破碎的剑刃,破碎的意志</p>
</body>	
</html>

效果

在这里插入图片描述

:root选择器用匹配文档的根元素

示例
设置HTML文档的背景色

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<title>无标题文档</title> 
<style> 
:root
{
	background:#ff0000;
}
</style>
</head>
<body>
<div>
<h1>无所不能的林大王</h1>
	</div>
</body>
</html>

效果

在这里插入图片描述

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

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

<!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>

效果图
在这里插入图片描述

:target选择器可用于当前活动的target元素的样式

＃ 锚的名称是在一个文件中链接到某个元素的URL。元素被链接到目标元素

示例

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>无标题文档</title>
<style>
:target
{
	border: 2px solid #D4D4D4;
	background-color: #e5eecc;
}
</style>
</head>
<body>

<h1>This is a heading</h1>

<p><a href="#news1">hello world</a></p>
<p><a href="#news2">No</a></p>

<p>点击a标签他会改变下面的样式</p>

<p id="news1"><b>是的,</b></p>
<p id="news2"><b>哈哈哈</b></p>

</body>	
</html>

效果
在这里插入图片描述

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

主要用于表单元素。
示例
设置所有type="text"的启用的输入元素的背景颜色：

<!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>

效果
在这里插入图片描述

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

主要用于表单元素
示例
设置所有type="text"的禁用的输入元素的背景颜色：

<!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>

效果

在这里插入图片描述

: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>

效果
在这里插入图片描述

:not(selector) 选择器匹配每个元素是不是指定的元素/选择器

示例
为每个并非

元素的元素设置背景颜色：

<!DOCTYPE html>
<html>
<head> 
<meta charset="utf-8"> 
<title>无标题文档</title>
<style>
p {
    color: #000000;
}

:not(p) {
    color: #ff0000;
}
</style>
</head>
<body>

<h1>这是一个标题</h1>

<p>这是一个段落.</p>
<p>这是另一个段落.</p>

<div>这是div元素的一些文本。</div>



</body>
</html>

效果
在这里插入图片描述

::selection选择器匹配元素中被用户选中或处于高亮状态的部分

::selection只可以应用于少数的CSS属性：color, background, cursor,和outline
示例
将选定的文本添加红色：


<html>
<head>
<style type="text/css">
::selection
{
color:#ff0000;
}
::-moz-selection
{
color:#ff0000;
}
</style>
</head>
<body>

<h1>尝试选择本页的一些文本</h1>

<p>这是一些文本.</p>

<div>这是div元素中的一些文本.</div>

<a href="//www.baidu.cc/" target="_blank">链接百度!</a>

</body>
</html>

效果
在这里插入图片描述

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

out-of-range 选择器只作用于能指定区间之外值的元素，例如 input 元素中的 min 和 max 属性

示例
输入的值在指定区间外时，设置指定样式:

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<title>无标题文档</title> 
<style>
input:out-of-range
{
	border:2px solid red;
}
</style>
</head>
<body>

<h3> :out-of-range 选择器实例演示。</h3>

<input type="number" min="5" max="10" value="17" />

<p>在input中输入一个值 (小于 5 或者 大于 10), 查看样式的变化。</p>

</body>
</html>

效果
在这里插入图片描述

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

== :in-range 选择器只作用于能指定区间值的元素，例如 input 元素中的 min 和 max 属性==
示例
输入的值在指定区间内时，设置指定样式:

<!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>

效果
在这里插入图片描述

:read-write 选择器用于匹配可读及可写的元素

目前, 在大多浏览器中, :read-write 选择器只使用于设置了input 和 textarea 元素
示例
如果 input 元素不是只读，即没有 “readonly” 属性，设置输入框样式为黄色:

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<title>无标题文档</title> 
<style>
input:read-write
{
	background-color: yellow;
	color:red;
}
</style>
</head>
<body>

<h3> :read-write 选择器实例演示。</h3>

<p>普通的input元素:<br><input value="hello"></p>

<p>只读的input元素:<br><input readonly value="hello"></p>

<p> :read-write 选择器选取没有设置 "readonly" 属性的元素。</p>

</body>
</html>

效果
在这里插入图片描述

:read-only 选择器用于选取设置了 “readonly” 属性的元素

表单元素可以设置 “readonly” 属性来定义元素只读
如果 input 元素设置了 “readonly” 属性，设置输入框样式为黄色:
示例

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<title>无标题文档</title> 
<style>
input:read-only
{
	background-color: yellow;
}
</style>
</head>
<body>

<h3> :read-only 选择器实例演示。</h3>


<p>普通的input元素:<br><input value="hello"></p>

<p>只读的input元素:<br><input readonly value="hello"></p>

<p> :read-write 选择器选取没有设置 "readonly" 属性的元素。</p>
<p> :readonly 择器选取设置 "readonly" 属性的元素。</p>

</body>
</html>

效果

在这里插入图片描述

:optional 选择器在表单元素是可选项时设置指定样式。

表单元素中如果没有特别设置 required 属性即为 optional 属性

== :optional 选择器只适用于表单元素: input, select 和 textarea==

示例
如果 input 元素没有设置 “required” 属性，设置其为黄色:

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<title>无标题文档</title> 
<style>
input:optional
{
background-color: yellow;
}
</style>
</head>
<body>

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

<p>可选的 input 元素:<br><input></p>

<p>必填的 input 元素:<br><input required></p>

<p> :optional 选择器用于表单中未设置"required" 属性的元素。</p>

</body>
</html>

效果

在这里插入图片描述

:required 选择器在表单元素是必填项时设置指定样式。

表单元素可以使用 required 属性来设置必填项

示例
如果 input 元素设置了 “required” 属性，设置其为黄色:

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<title>无标题文档</title> 
<style>
input:required
{
	background-color: yellow;
}
</style>
</head>
<body>

<h3>信息</h3>

<p>姓名<br><input></p>

<p>住址<br><input required></p>

<p> :required选择器选择表单元素有“需要”属性.</p>

</body>
</html>

效果

在这里插入图片描述

:valid 选择器在表单元素的值需要根据指定条件验证时设置指定样式。

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

示例

如果 input 元素中输入的值为合法的，设置其为黄色:

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<title>无标题文档</title> 
<style>
input:valid
{
	background-color: yellow;
}
</style>
</head>
<body>

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

<input type="email" value="jiumeilove@dingtalk.com" />

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

</body>
</html>

效果
在这里插入图片描述

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

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

示例
如果 input 元素中的值是非法的，设置样式为红色：

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<title>无标题文档</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>

效果
在这里插入图片描述
以上就是css所有的选择器了,如果以后w3c增加了,我再改

Qayrup
关注
  • 49
    点赞
  • 踩
  • 318
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 3
    评论
专栏目录
css中before和last-child一起使用或者after和first-child一起使用
qq_40128591的博客
07-23 5733
今天遇到一个需求！！！！往我下面看……(想啥呢？看图！！！) 没错！！就是你看到的这三个有点黑黑的点……（不要在意细节！) 我是用ul无序列表写的。在li里面设置before和after弄成中线的线条(无缝连接呀)；好吧回归正题。 我的想法是：第一个点的上面和最后一个点下面没有连接线。所以我刚开始想到的是： disc-item::before:first-child{condent:" ";display:none;} 然而这是没啥用的-。。。！哈哈！！！！ 好吧，知道你急了，死鬼别.
CSS基础2——选择器
whh4122的专栏
10-09 971
选择器用于指定样式规则可作用于HTML文档中的哪个或者哪些元素。1、元素选择器 2、类选择器 3、ID选择器 4、通配符选择器 5、包含选择器 6、伪类选择器 7、伪元素选择器 选择器优先级
:first-child | CSS属性参考
初晴
09-19 924
CSS :first-child伪类选择器用于匹配父元素中的第一个子元素。 :first-child伪类选择器仅仅会匹配某个父元素中的第一个子元素，例如： article>   p>     第一个段落...   p>   p>     第二个段落...   p> article>
css小技巧
lay7889的博客
01-10 106
1.伪类选择器用来指定元素第一个字符的样式 2.给透明图片添加阴影 3.镂空文字 4.背景文字 5.填充文字效果 6.网页灰度效果（黑白图片） 7.justify-content设置为space-between实现两端对齐效果，最后一行左对齐 8.文字不换行、自动换行、强制换行
CSS选择器
Eyno的博客
03-03 1109
通用选择器 *{} 标签选择器 标签（p,body...）{} ID选择器 #ID{} 注：如果一个元素有id或者应该有id，不要强行添加id从而使用ID选择器。 类选择器 .class{} 注：拒绝滥用！！ 伪类选择器 匹配其父元素中的第一个子元素 :firstchild{} 匹配其父元素的最后一个子元素 :lastchild{} 动态伪类 input:focus{} 鼠标点击 a:hover{} 选择访问过的链接 a:visited{} 属性选择器 [属性]{} [属性=属性值]{}
CSS选择器详解二
xiaokangmiclong的博客
09-26 628
ss
CSS选择器图文详解
Long_gone的博客
06-22 403
1、什么是选择器呢？ 选择器，说白了就是用一种方式把你想要的那一个标签选中！把它选中了，你才能操作这个标签的CSS样式。CSS有很多把你所需要的标签选中的方式，这些不同的方式就是不同的选择器。 选择器的不同，在于它选择方式不同，但是他们的目的都是相同的，那就是把你需要的标签选中，然后让你定义该标签的CSS样式。当然，你也有可能会用某一种选择器代替另一种选择器，这仅仅是由于选择方式不一样罢了，目的还是一样的。 2、标签选择器 元素选择器，就是“选中”相同的元素，然后对相同的元素设置同一个CSS样式。 语法：
十种CSS选择器详解介绍
最新发布
01-31
1. 通用选择器 2. 标签选择器 3. ID 选择器 4. 类选择器 5. 后代选择器 6. 子选择器 8. 通用兄弟选择器 9. 分组选择器 10. 属性选择器 基础选择器总结
详解css常用选择器
09-27
在本文中，我们将深入探讨一些常见的CSS选择器及其用法。 1. **元素选择器**：通过元素名称来选择元素，如`table {background:red;}`将所有表格的背景颜色设为红色。 2. **属性选择器**： - `div[id]` 选择所有...
详解CSS中的选择器优先级顺序
09-24
了解并熟练运用CSS选择器优先级顺序，可以帮助开发者更精确地控制元素的样式，避免不必要的样式冲突，从而提高代码的可读性和维护性。在实际开发中，尽量减少对 `!important` 的依赖，因为它会使代码难以管理和调试...
css的选择器
07-17
css选择器，根据w3school整理分类
CSS选择器种类、优先级与匹配原理详解
09-25
作为一个Web开发者，掌握必要的前台技术也是很重要的特别是CSS选择器的优先级问题，为了广大web爱好者可以更好的解决问题，这里就CSS选择器的优先级问题做了一些总结
css选择器（选择<div>内所有<p>元素）
angou6476的博客
12-11 2612
情况1：<div><p></div> 情况2：<div><a><p></p></a></div> 使用： div p{} 其实在这里的解释是，选择<div>内所有<p>元素，不会是局限在<div>的下一级，而是不过<p>元素在...
关于CSS中选择器的一点补充[(div p),(div>p),(div+p)]
热门推荐
你微笑时很美的博客
12-29 1万+
CSS element element 选择器 实例:选择div 下所有的p元素 /*选择并设置位于 &amp;amp;lt;div&amp;amp;gt; 元素内部的每个 &amp;amp;lt;p&amp;amp;gt; 元素的样式*/ &amp;amp;lt;style&amp;amp;gt; div p{ background-color:red; } &amp;amp;lt;/style&amp;amp;gt; ------
css获取父元素下第几个元素出坑和JQuery通过index()获取下标出坑方法
韩大璐
12-28 3430
这里首先要区分nth-of-type(n)和nth-child(n)的区别： nth-of-type(n) 选择器匹配属于父元素的 特定类型 的第 N 个子元素的每个元素. nth-child(n) 选择器选取父元素的第 N 个子元素， 与类型无关 写个demo理解： &lt;div class="container"&gt; &lt;div&gt;div1&lt;/...
CSS试题
weixin_68548138的博客
05-21 4321
[ 选择题 ]在css定位属性中， position的值为可以是（ ）。 A 绝对定位 B 相对定位 C 层叠定位 D 固定定位 正确答案：A,B,D 试题解析：在CSS中，position属性用于定义元素的定位方式，它的可能值有absolute（绝对定位），fixed（固定定位），relative（相对定位），static（静态定位，默认值）， inherit（规定应该从父元素继承 position 属性的值），因此选ABD。C不存在此种定位方式。 [ 选择题 ]下面定义背景图片的语法，正确的是.
html5 first child,:first-child | CSS属性参考
weixin_36350581的博客
06-17 1555
CSS :first-child伪类选择器用于匹配父元素中的第一个子元素。:first-child伪类选择器仅仅会匹配某个父元素中的第一个子元素，例如：第一个段落...第二个段落...如果使用下面的CSS规则来添加样式，那么第一个段落的文字大小将被修改：p:first-child {font-size: 2em;}但是如果在容器中，段落不是第一个元素，那么它不会被匹配，例如：标题第一个段落...第...
CSS 3.0中伪元素after和before的妙用
越陌度阡
06-10 445
我们常用CSS 3.0中的伪元素来修饰一些细节，让页面看起来效果更好，比如下面这个图片中的面包屑导航中的符号，还有任务清单前的序列符号，都是用伪元素实现的。 以下是代码实现，希望能对初学者有一个简单的认识。 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="wi.
CSS------伪类(:first)和伪元素(::after)汇总以及区别分析
COCOLI_BK的博客
08-06 2548
css中伪类和伪元素的区别及用法: 伪元素定义：伪元素主要是用来创建一些不存在原有dom结构树种的元素,被添加的内容会以具体的UI显示出来，被用户所看到的，这些内容不会改变文档的内容，不会出现在DOM中，不可复制，仅仅是在CSS渲染层加入 伪类定义：伪类表示已存在的某个元素处于某种状态，但是通过dom树又无法表示这种状态，就可以通过伪类来为其添加样式。 注意点：CSS3中建议使用::表示伪元素，如：div::before; CSS3中建议使用:表示伪元素，如：a:hover ...
评论 3
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

Qayrup

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值