Web全栈~06.CSS选择器

最新推荐文章于 2022-11-26 09:57:12 发布

算法爱好者丶

最新推荐文章于 2022-11-26 09:57:12 发布

阅读量1.1w

点赞数 22

分类专栏： web 文章标签： css3

本文链接：https://blog.csdn.net/qq_41424688/article/details/112279370

版权

web 专栏收录该内容

39 篇文章 9 订阅

订阅专栏

Web基本笔记~06.CSS选择器

上一期

关系选择器

后代选择器

定义

选择所有被 E 元素包含的 F 元素，中间用空格隔开

语法

E F{ }

例子

<html>
　　<head>
　　　　 <title></title>
　　　　 <meta charset="utf-8" />
		<style>
			ul li{color:green;}
		</style>
　	</head>
　　<body>
		<ul>
			<li>蛋糕</li> 
			<li>面包</li> 
		</ul> 
		<ol>
			<li>西瓜</li> 
		</ol>
　　</body>
</html>

子代选择器

定义

选择所有作为 E 元素的直接子元素 F，对更深一层的元素不起作用，用 > 表示

语法

E>F{}

例子

<html>
　　<head>
　　　　 <title></title>
　　　　 <meta charset="utf-8" />
		<style>
			div>a{color:red}
		</style>
　	</head>
　　<body>
		<div>
			<a href="https://www.baidu.com/">子元素 1</a> 
			<p> <a href="https://www.baidu.com/">孙元素</a> </p> 
			<a href="https://www.baidu.com/">子元素 2</a> 
		</div>
　　</body>
</html>

相邻兄弟选择器

定义

选择紧跟 E 元素后的 F 元素，用加好表示，选择相邻的第一个兄弟元素

语法

E+F{ }

例子

<html>
　　<head>
　　　　 <title></title>
　　　　 <meta charset="utf-8" />
		<style>
			h1+p{color:red;}
		</style>
　	</head>
　　<body>
		<div>
			<h1>one</h1> 
			<p>two</p> 
			<p>three</p>
		</div>
　　</body>
</html>

伪类选择器

同一个标签，根据其不同的种状态，有不同的样式。这就叫做“伪类”。伪类用冒号来表示。

link “链接”：超链接点击之前（只适用于 a）

visited “访问过的”：链接被访问过之后（只适用于 a）

hover “悬停”：鼠标放到标签上的时候（适用于所有标签）

active “激活”：鼠标点击标签，但是不松手时。（适用于所有标签）

<html>
　　<head>
　　　　 <title></title>
　　　　 <meta charset="utf-8" />
		<style>
			/*让超链接点击之前是红色*/ 
			a:link{ color:red; }
			/*让超链接点击之后是橘色*/ 
			a:visited{ color:orange; }
			/*鼠标悬停，放到标签上的时候是绿色*/ 
			a:hover{color:green; }
			/*鼠标点击链接，但是不松手的时候是黑色*/ 
			a:active{ color:black; }
		</style>
　	</head>
　　<body>
		<div>
			<a href="https://www.baidu.com">百度一下，你就知道</a>
		</div>
　　</body>
</html>

a:link 、a:visited 、a:hover 、a:active 是固定的顺序,如果顺序不对则会失效

first-child 选择器

定义

first-child 选择器匹配其父元素中的第一个子元素

实例

列表中的第一个 < li >元素选择的样式

li:first-child{ background:yellow; }

last-child 选择器

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

p:last-child{ background:#ff0000; }

nth-child ()选择器

nth-child(n) 选择器匹配父元素中的第 n 个子元素，元素类型没有限制。 n 可以是一个数字，一个关键字，或者一个公式。

奇数和偶数是可以作为关键字使用用于相匹配的子元素，其索引是奇数或偶数（该索引的第一个子节点是 1）。在这里，我们为奇数和偶数 p 元素指定两个不同的背景颜色

p:nth-child(odd){
	background:#ff0000; 
}
p:nth-child(even){
	background:#0000ff; 
}

only-child 选择器

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

p:only-child{ background:#ff0000; }

first-of-type 选择器

first-of-type 选择器匹配元素其父级是特定类型的第一个子元素。和 :nth-of-type(1) 是一个意思。

last-of-type 选择器

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

nth-last-child() 选择器

nth-last-child(n) 选择器匹配属于其元素的第 N 个子元素的每个元素，不论元素的类型，从最后一个子元素开始计数。n 可以是一个数字，一个关键字，或者一个公式。

/*	指定每个 p 元素匹配同类型中的倒数第 2 个同级兄弟元素背景色	*/
p:nth-last-child(2) { background:#ff0000;}

nth-of-type() 选择器

nth-of-type(n)选择器匹配同类型中的第 n 个同级兄弟元素。n 可以是一个数字，一个关键字，或者一个公式。

/*指定每个 p 元素匹配同类型中的第 2 个同级兄弟元素的背景色*/
p:nth-of-type(2)
{
	background:#ff0000;
}

nth-last-of-type() 选择器

nth-last-of-type(n)选择器匹配同类型中的倒数第 n 个同级兄弟元素。n 可以是一个数字，一个关键字，或者一个公式。

p:nth-last-of-type(2)
{
	background:#ff0000;
}

empty 选择器

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

p:empty{
	background:#ff0000;
}

not() 选择器

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

not(p){
	background:#ff0000;
}

focus 选择器

focus 选择器用于选择具有焦点的元素。

input:focus{
	background-color:yellow;
}

checked 选择器

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

input:checked { 
		height: 50px; 
		width: 50px;
	}

selection 选择器

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

selection 只可以应用于少数的 CSS 属性：color, background, cursor,和 outline。Firefox 通过其私有属性 ::-moz-selection 支持。

::selection{ 
	color:#ff0000;
}
::-moz-selection{ 
	color:#ff0000;
}

另外还有伪对象选择器和属性选择器等也可以自行了解一下~

算法爱好者丶

关注

22
点赞
踩
3

收藏

觉得还不错? 一键收藏
20
评论
Web全栈~06.CSS选择器

Web基本教程~06.CSS选择器上一期关系选择器后代选择器定义       选择所有被 E 元素包含的 F 元素，中间用空格隔开语法       E F{ }例子<html>　　<head>　　　　 <title></title>　　　　 <meta charset="utf-8" /&gt
复制链接

扫一扫

专栏目录