CSS定位、选择器

最新推荐文章于 2024-05-29 22:48:09 发布

原创最新推荐文章于 2024-05-29 22:48:09 发布 · 339 阅读

1 ·

CC 4.0 BY-SA版权

本文深入解析CSS的四种定位方式：静态、相对、绝对、固定定位，以及粘性定位的特性与应用。同时，全面介绍了CSS选择器的种类与使用场景，包括类选择器、ID选择器、通用选择器等。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

1、CSS定位

position； CSS定位主要有4种：静态定位、相对定位、绝对定位、固定定位；静态定位是元素的默认定位方式，不能使用top，bottom，left，right和z-index属性，其它三种定位可以使用。
（1）静态定位：static

<!DOCTYPE html>
<html>
<head>
<meta charset = "UTF-8">
<style>
div.static{
	position : static ;
	border : 2px dashed #73AD21 ;
}
</style>
<title>double1</title>
</head>
<body>
<div class = "static">
这个元素使用了position:static;
</div>
</body>
</html>

（2）相对定位：relative

<!DOCTYPE html>
<html>
<meta charset = "utf-8">
<head>
<title>double2</title>
<style type = "text/css">
h2.pos_left{
	position : relative ;
	left : -20px;
}
h2.pos_right{
	position : rerlative ;
	right : 20px ;
}
</style>
</head>
<body>
<h2>正常标题</h2>
<h2 class = "pos_left">相对于正常标题向左偏移</h2>
<h2 clsaa = "pos_right">相对于正常标题向右偏移</h2>
</body>
</html>

在这里插入图片描述
（3）绝对定位：absolute

<!DOCTYPE html>
<html>
<head>
<meta charset = "utf-8">
<title>double3</title>
<style>
#div1{
	width : 100px ;
	height : 100px ;
	background :  yellow ;
}
#div2{
	width : 100px ;
	height : 100px ;
	background : blue ;
	top : 50px ;
	left : 50px ;
	position : absolute;
}
</style>
</head>
<body>
<div id = "div1">
	<div id = "div2"></div>
</div>
</body>
</html>

在这里插入图片描述
（4）固定定位：fixed；
元素的位置相对于浏览器窗口是固定位置，即使窗口是滚动的它也不会移动。

<!DOCTYPE html>
<html>
<head>
<meta charset = "utf-8">
<title>double3</title>
<style>
p.pos_fixed{
	position : fixed ;
	top : 5px ;
	right : 5px ;
}
</style>
</head>
<body>
<p class = "pos_fixed">一个元素</p>
<p>一个元素</p>
<p>一个元素</p>
<p>一个元素</p>
<p>一个元素</p>
<p>一个元素</p>
<p>一个元素</p>
</body>
</html>

（5）粘性定位：sticky
粘性定位的元素是依赖于用户的滚动，在 position:relative 与 position:fixed 定位之间切换。它的行为就像 position:relative; 而当页面滚动超出目标区域时，它的表现就像 position:fixed;，它会固定在目标位置。

<!DOCTYPE html>
<html>
<head>
<meta charset = "utf-8">
<title>double4</title>
<style>
div.sticky{
	position : -webkit-sticky ;
	position : sticky ;
	top : 0 ;
	padding : 2px ;
	bacaground-color : #cae8ca ;
	border : 2px dashed #4CAF50 ;
}
</style>
</head>
<body>
<div class = "sticky">粘性定位</div>
<p>滚动我</p><p>滚动我</p><p>滚动我</p>
<p>滚动我</p><p>滚动我</p><p>滚动我</p>
<p>滚动我</p><p>滚动我</p><p>滚动我</p>
<p>滚动我</p><p>滚动我</p><p>滚动我</p>
<p>滚动我</p><p>滚动我</p><p>滚动我</p>
<p>滚动我</p><p>滚动我</p><p>滚动我</p>
</body>
</html>

注：IE/Edge 15 及更早 IE 版本不支持 sticky 属性。

2、选择器

在 CSS 中，选择器是一种模式，用于选择需要添加样式的元素。

.class	.class1	选择class=“class1”的所有元素	1
选择器	例子	描述	css版本
#id	#id1	选择id=“id1”的所有元素	1
*	*	选择所有元素	2
element	p	选择所有<p>元素	1
element，element	div，p	选择所有<div>和所有<p>元素	1
element element	div p	选择<div>元素内部的所有<p>元素	1
element>element	div>p	选择父元素为 <div> 元素的所有 <p> 元素	2
element+element	div+p	选择紧接在 <div> 元素之后的所有 <p> 元素	2
[attribute]	[target]	选择带有 target 属性所有元素	2
[attribute=value]	[target=_blank]	选择 target="_blank" 的所有元素	2
[attribute~=value]	[title~=flower]	选择 title 属性包含单词 "flower" 的所有元素	2
[attribute\|=value]	[lang\|=en]	选择 lang 属性值以 "en" 开头的所有元素	2
:focus	input:focus	选择获得焦点的 input 元素	2
:first-letter	p:first-letter	选择每个 <p> 元素的首字母	1
:first-line	p:first-line	选择每个 <p> 元素的首行	1
:first-child	p:first-child	选择属于父元素的第一个子元素的每个 <p> 元素	2
:before	p:before	在每个 <p> 元素的内容之前插入内容	2
:after	p:after	在每个 <p> 元素的内容之后插入内容	2
:lang(language)	p:lang(it)	选择带有以 "it" 开头的 lang 属性值的每个 <p> 元素	2
element1~element2	p~ul	选择前面有 <p> 元素的每个 <ul> 元素	3
[attribute^=value]	a[src^="https"]	选择其 src 属性值以 "https" 开头的每个 <a> 元素	3
[attribute$=value]	a[src$=".pdf"]	选择其 src 属性以 ".pdf" 结尾的所有 <a> 元素	3
[attribute*=value]	a[src*="abc"]	选择其 src 属性中包含 "abc" 子串的每个 <a> 元素	3
:first-of-type	p:first-of-type	选择属于其父元素的首个 <p> 元素的每个 <p> 元素	3
:last-of-type	p:last-of-type	选择属于其父元素的最后 <p> 元素的每个 <p> 元素	3
:only-of-type	p:only-of-type	选择属于其父元素唯一的 <p> 元素的每个 <p> 元素	3
:only-child	p: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-child	p:last-child	选择属于其父元素最后一个子元素每个 <p> 元素	3
:root	:root	选择文档的根元素	3
:empty	p:empty	选择没有子元素的每个 <p> 元素（包括文本节点）	3
:target	#news:target	选择当前活动的 #news 元素	3
:enabled	input:enabled	选择每个启用的 <input> 元素	3
:disabled	input:disabled	选择每个禁用的 <input> 元素	3
:checked	input:checked	选择每个被选中的 <input> 元素	3
:not(selector)	:not(p)	选择非 <p> 元素的每个元素	3
::selection	::selection	选择被用户选取的元素部分	3