CCS3样式（二）

jule_zhou

已于 2022-07-01 17:20:32 修改

阅读量124

点赞数

分类专栏： # HTML5 前端文章标签： css css3 html

于 2022-07-01 16:08:25 首次发布

本文链接：https://blog.csdn.net/jule_zhou/article/details/125559063

版权

前端同时被 2 个专栏收录

15 篇文章 0 订阅

订阅专栏

HTML5

8 篇文章 0 订阅

订阅专栏

一、选择器

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

1、结构伪类选择器——元素选择

选择器	功能描述
E:first-child	作为父元素的第一个子元素的元素E
E:last-child	作为父元素的最后一个子元素的元素E
E F:nth-child(n)	选择父级元素E的第n个子元素F，（n可以是1、2、3），关键字为even、odd

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<link rel="stylesheet" href="style.css" type="text/css">
	</head>
	<body>
		<ol>
			<li>ol第一个</li>
			<li>ol第二个</li>
			<li>ol第三个</li>
		</ol>
		<ul>
			<li>ul第一个</li>
			<li>ul第二个</li>
			<li>ul第三个</li>
			<li>ul第四个</li>
		</ul>
	</body>
</html>

ul li:first-child{
	color: red;
}
ol li:last-child{
	color: blue;
}
li:first-child{
	font-size: 25px;
}
ul li:nth-of-type(2){
	font-family: 楷体;
}

2、结构伪类选择器——类选择

选择器	功能描述
E:first-of-type	选择父元素内具有指定类型的第一个E元素
E:last-of-type	选择父元素内具有指定类型的最后一个E元素
E F:nth-of-type(n)	选择父元素内具有指定类型的第n个F元素

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<link rel="stylesheet" href="style.css" type="text/css">
	</head>
	<body>
		<div>
			<h1>div:h11</h1>
			<h1>div:h12</h1>
			<h1>div:h13</h1>
			<p>div:p1</p>
			<p>div:p2</p>
			<p>div:p3</p>
		</div>
	</body>
</html>

h1:first-of-type{
	font-size: 19px;
}
h1:last-of-type{
	font-size: 45px;;
}
div h1:first-of-type{
	color: red;
}
div h1:last-of-type{
	color: blue;
}
div h1:nth-of-type(2){
	color: aqua;
}

二、注意事项：区分元素与类

元素：p，a…的统称

类：标签为p的一类，或者标签为a的一类

三、属性选择器

属性选择器	功能描述
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>
		<link rel="stylesheet" href="style.css" type="text/css">
	</head>
	<body>
		<footer>
			<h2>标题一</h2>
			<p>段落</p>
			<ul>
				<li>
					<a href="">kjshfs <strong>shfk</strong></a>
				</li>
				<li>
					<a href="">kjshfs <strong>shfk</strong></a>
				</li>
				<li>
					<a href="">kjshfs <strong>shfk</strong></a>
				</li>
			</ul>
			<strong></strong>
			<form action="">
				<p>
					name:<input type="text"/>
				</p>
				<p>
					pass:<input type="password" placeholder="请输入">
				</p>
				<p>
					tel:<input type="tel" placeholder="请输入">
				</p>
				<p>
					date:<input type="date" placeholder="请输入">
				</p>
				<p>
					date-time:<input type="datetime" placeholder="请输入">
				</p>
				<p>
					date:<input type="submit" value="99999">
				</p>
			</form>
		</footer>
	</body>
</html>

/* [type]{
	border-color: red;
} */
input[type]{
	border-color: blue;
}
input[type="tel"]{
	width: 50px;
}
input[type^="t"]{
	height: 25px;
}
input[type$="e"]{
	background-color: red;
}
input[type*="s"]{
	background: #00f;
}