HTML基础知识day6

最新推荐文章于 2021-07-06 23:55:29 发布

hzbobhz

最新推荐文章于 2021-07-06 23:55:29 发布

阅读量131

点赞数

CC 4.0 BY-SA版权

文章标签： html

本文链接：https://blog.csdn.net/hzbobhz/article/details/111937449

本文详细介绍了CSS中的高级选择器，包括层次选择器、结构伪类选择器和属性选择器，并提供了丰富的示例进行解释。通过后代选择器、子选择器、相邻兄弟选择器和通用兄弟选择器等层次选择器，实现精确的元素定位；结构伪类选择器如`:first-child`、`:last-child`和`:nth-child()`等帮助定位页面结构；属性选择器则通过属性匹配来选中特定元素。此外，还展示了如何使用这些选择器实现网页元素的样式控制和布局调整。

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

CSS高级选择器

CSS的高级选择器一共有三种：层次选择器、结构伪类选择器、属性选择器。

1、层次选择器

选择器	类型	功能描述
E F	后代选择器	选择匹配的F元素，且匹配的F元素被包含在匹配的E元素内
E>F	子选择器	选择匹配的F元素，且匹配的F元素是匹配的E元素的子元素
E+F	相邻兄弟选择器	选择匹配的F元素，且匹配的F元素紧位于匹配的E元素后面
E~F	通用兄弟选择器	选择匹配的F元素，且位于匹配的E元素后的所有匹配的F元素

示例如下：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			ul li{
				font: 18px;
				color: red;
			}
			body>p{
				color: #008000;
			}
			p+h1{
				color: #0000FF;
			}
			h1~p{
				color: orange;
			}
		</style>
	</head>
	<body>
		<p>今天你吃到了吗</p>
		<h1>哈哈哈哈哈哈哈</h1>
		<p>哦哦哦哦哦哦哦哦哦</p>
		<p>哒哒哒哒哒哒哒哒哒</p>
		<ul>
			<li>反反复复反反复复</li>
			<li>红红火火晃晃悠悠</li>
			<li>热热热热热热热热</li>
			<li>嘤嘤嘤嘤嘤嘤嘤嘤</li>
		</ul>
	</body>
</html>

运行结果：
在这里插入图片描述

2、结构伪类选择器

选择器	功能描述
E:first-child	作为父元素的第一个子元素的元素E
E:last-child	作为父元素的最后一个子元素的元素E
E F:nth-child(n)	选择父级元素E的第n个子元素F，（n可以是1、2、3）
E:first-of-type	选择父元素内具有指定类型的第一个E元素
E:last-of-type	选择父元素内具有指定类型的最后一个E元素
E F:nth-of-type	选择父元素内具有指定类型的第n个F元素

示例如下：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			p:first-child{
				font-size: 25px;
			}
			li:last-child{
				color: darkblue;
			}
			body p:nth-child(2){
				color: red;
			}
			p:last-of-type{
				color: orange;
			}
			li:first-of-type{
				font:25px bolder italic;
				color: #00008B;
			}
			body p:nth-of-type(3){
				color: chocolate;
			}
		</style>
	</head>
	<body>
		<p>今天你吃到了吗</p>
		<p>哈哈哈哈哈哈哈</p>
		<p>哦哦哦哦哦哦哦哦哦</p>
		<p>哒哒哒哒哒哒哒哒哒</p>
		<ul>
			<li>反反复复反反复复</li>
			<li>红红火火晃晃悠悠</li>
			<li>热热热热热热热热</li>
			<li>嘤嘤嘤嘤嘤嘤嘤嘤</li>
		</ul>
	</body>
</html>

运行结果：
在这里插入图片描述
可以看到，p标签的第一个孩子字体变成了25px。li标签的最后一个孩子变成了深蓝色。body中的第二个子元素是p标签，所以这个标签的字体变成了红色。

3、属性选择器

属性选择器	功能描述
E[attr]	选择匹配具有属性attr的E元素
E[attr=val]	选择匹配具有属性attr的E元素,并且属性值为val（其中val区分大小写）
E[attr^=val]	选择匹配元素E，且E元素定义了属性attr，其属性值是以val开头的任意字符串
E[attr$=val]	选择匹配元素E，且E元素定义了属性attr，其属性值是以val结尾的任意字符串
E[attr*=val]	选择匹配元素E，且E元素定义了属性attr，其属性值包含了“val”，换句话说，字符串val与属性值中的任意位置相匹配

示例如下：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			input[text]{
				background-color: #FFFFED;
			}
			input[type^=pass]{
				background-color: #FF0000;
			}
			input[id$=nd]{
				font-size: 25px;
				color: blueviolet;
			}
			input[id=first]{
				color: coral;
			}
			a[href*=hir]{
				color: deeppink;
				font-size: 25px;
			}
		</style>
	</head>
	<body>
		<form action="#">
			<p><a href="#">免费邮</a> <a href="#">企业邮</a> <a href="#">VIP邮箱</a> <a href="#">帮助</a></p>
			<p><a href="#">立即同步普通登陆手机号登陆</a></p>
			<p>用户名：<input type="text" name="username" value="" />@163.com</p>
			<p>密码：<input type="password" name="pwd" value="" /></p>
			<p><input type="button" name="denglu" id="second" value="自动登录" /> <input type="button" name="ssl" id="first" value="SSL" checked="checked"/></p>
			<p><a href="third">关于网易</a> </p>
		</form>
	</body>
</html>

运行结果：
在这里插入图片描述

盒子模型

CSS盒子模型本质上是一个盒子，封装周围的HTML元素，它包括：外边距，边框，内边距和实际内容。盒子模型允许我们在其它元素和周围元素边框之间的空间放置元素。

不同部分的说明

Margin(外边距) - 清除边框外的区域，外边距是透明的。

Border(边框) - 围绕在内边距和内容外的边框。

Padding(内边距) - 清除内容周围的区域，内边距是透明的。

Content(内容) - 盒子的内容，显示文本和图像。

网页居中对齐：margin:0px auto;
网页居中对齐的必要条件：1、必须是块元素。2、拥有固定宽度。

示例如下：

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<title></title>
<style>
#a1{
    background-color: lightgrey;
    width: 300px;
    border: 25px solid green;
    padding: 25px;
    margin: 25px;
}
#a2{
	width:100px;
	margin:0px auto;
	background-color:pink;
	}
</style>
</head>
<body>
<div id="a1">这里是盒子内的实际内容。有25px内间距，25px外间距、25px绿色边框。</div>
	<p id="a2">这是一个盒子</p>
</body>
</html>