WEB前端 | H5基础——(3)CSS3选择器

最新推荐文章于 2024-05-08 22:33:14 发布

Erosvan

最新推荐文章于 2024-05-08 22:33:14 发布

阅读量674

点赞数

文章标签： css3 css3选择器选择器 html5 web前端

本文链接：https://blog.csdn.net/Erosvan/article/details/52598837

版权

<!doctype html>
<html>
	<head>
		<meta charset="utf-8"/>
		<title>CSS3选择器</title>
		<style type="text/css">
			/*
				子代(兄弟、兄弟相邻)
				nth-child / of-type
				after(before)
				属性(2种)
				input(可用和不可用)
			*/
			/*1、子代选择器
				单指div子代(不包括孙子级..)里面的p标签*/
			div > p {
				background-color: red;
			}
			/*2、兄弟相邻选择器
				p标签后面的span标签(不能有间隔)*/
			p + span {
				background-color: red;
			}
			/*3、兄弟(弟弟)选择器
				和p同级，并且位于p后面的span标签(可以有间隔)*/
			p ~ span {
				background-color: red;
			}
			/*4、伪类选择器
				该标签位于第一位，并且是p标签
			*/
			p:nth-child(1) {
				background-color: red;
			}
			/*第一个p标签*/
			p:nth-of-type(1) {
				background-color: red;
			}
			p:last-child {
				background-color: red;
			}
			p:last-of-type {
				background-color: blue;
			}
			/*属性选择
				带有title属性的p标签*/
			p[title] {
				background-color: red;
			}
			/*title属性值为123的p标签*/
			p[title="123"] {
				background-color: red;
			}
			p:before {
				content: "123";
				display: block;
				background-color: pink;
			}
			/*after
				清除浮动的div必须是块级标签，并且不可以浮动
				最常见的用处：清除浮动
				给浮动元素的父级添加after这个伪类 after里面写clear属性
				给一个元素添加after属性相当于给这个元素添加了一个子级，位于元素的最后，默认是以行标签来展示*/
			.clear:after {
				content: "";
				display: block; 
				clear: both; 
			}
			
		</style>
	</head>
	<body>
		<div>
			<p>我是p1</p>
			<p>我是p2</p>
			<p>我是p3</p>
			<section>
				<p>我是p5</p>
			</section>
		</div>
		<p>我是p4</p>
	</body>
</html>

Erosvan

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
WEB前端 | H5基础——(3)CSS3选择器

CSS3选择器 /* 子代(兄弟、兄弟相邻) nth-child / of-type after(before) 属性(2种) input(可用和不可用) */ /*1、子代选择器单指div子代(不包括孙子级..)里面的p标签*/ div > p { background-color: red; }
复制链接

扫一扫