Css选择器之其他选择器

发布时间:2020-04-04 18:08:47 作者:Java大S
来源:网络 阅读:332

一、元素之间的关系

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>Css之选择器</title>
		<style type="text/css">
			/**
			 * 为div中的审判元素设置背景为绿色
			 * 后代选择器
			 * 作用:选中指定元素的指定后代元素
			 * 语法:祖先元素 后代元素{}
			 */
			div span{
				background-color: green;
			}
		</style>
	</head>
	<body>
		<!--
			元素之间的关系
        	时间:2016-12-04
        	描述:父元素:直接包含子元素的元素;
        		子元素:直接被父元素包含的元素;
        		祖先元素:直接或间接包含后代元素的元素,父元素也是祖先元素
        		后代元素:直接或间接被祖先元素包含的元素,子元素也是后代元素
        		兄弟元素:拥有相同父元素的元素叫做兄弟元素
        -->
		<div id="d1">
			<span>我是div标签中的span</span>
			<p>
				<span>
					我是P标签中的span
				</span>
			</p>
			
		</div>
		<span>我是body标签中的审判</span>
	</body>
</html>

Css选择器之其他选择器


二、后代选择器

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>Css之选择器</title>
		<style type="text/css">
			/**
			 * 为div中的审判元素设置背景为绿色
			 * 后代选择器
			 * 作用:选中指定元素的指定后代元素
			 * 语法:祖先元素 后代元素{}
			 */
			div span{
				background-color: green;
			}
		</style>
	</head>
	<body>
		<!--
			元素之间的关系
        	时间:2016-12-04
        	描述:父元素:直接包含子元素的元素;
        		子元素:直接被父元素包含的元素;
        		祖先元素:直接或间接包含后代元素的元素,父元素也是祖先元素
        		后代元素:直接或间接被祖先元素包含的元素,子元素也是后代元素
        		兄弟元素:拥有相同父元素的元素叫做兄弟元素
        -->
		<div id="d1">
			<span>我是div标签中的span</span>
			<p>
				<span>
					我是P标签中的span
				</span>
			</p>
			
		</div>
		<span>我是body标签中的审判</span>
	</body>
</html>

Css选择器之其他选择器

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>Css之选择器</title>
		<style type="text/css">
			/**
			 * 为div中的审判元素设置背景为绿色
			 * 后代选择器
			 * 作用:选中指定元素的指定后代元素
			 * 语法:祖先元素 后代元素{}
			 */
			div span{
				background-color: green;
			}
			/**
			 * 选中id为d1的div中的p元素中的span元素
			 */
			#d1 p span{
				background: deepskyblue;
			}
		</style>
	</head>
	<body>
		<!--
			元素之间的关系
        	时间:2016-12-04
        	描述:父元素:直接包含子元素的元素;
        		子元素:直接被父元素包含的元素;
        		祖先元素:直接或间接包含后代元素的元素,父元素也是祖先元素
        		后代元素:直接或间接被祖先元素包含的元素,子元素也是后代元素
        		兄弟元素:拥有相同父元素的元素叫做兄弟元素
        -->
		<div id="d1">
			<span>我是div标签中的span</span>
			<p>
				<span>
					我是P标签中的span
				</span>
			</p>
			
		</div>
		<span>我是body标签中的审判</span>
	</body>
</html>

Css选择器之其他选择器

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>Css之选择器</title>
		<style type="text/css">
			/**
			 * 为div中的审判元素设置背景为绿色
			 * 后代选择器
			 * 作用:选中指定元素的指定后代元素
			 * 语法:祖先元素 后代元素{}
			 */
			div span{
				background-color: green;
			}
			/**
			 * 选中id为d1的div中的p元素中的span元素
			 */
			#d1 p span{
				background: deepskyblue;
			}
			/**
			 * 选中div的子元素span元素设置一个背景颜色
			 * 子元素选择器
			 * 作用:在给定的父元素下匹配所有的子元素
			 * 语法:父元素>子元素
			 */
			div>span{
				font-size: 25px;
			}
			
		</style>
	</head>
	<body>
		<!--
			元素之间的关系
        	时间:2016-12-04
        	描述:父元素:直接包含子元素的元素;
        		子元素:直接被父元素包含的元素;
        		祖先元素:直接或间接包含后代元素的元素,父元素也是祖先元素
        		后代元素:直接或间接被祖先元素包含的元素,子元素也是后代元素
        		兄弟元素:拥有相同父元素的元素叫做兄弟元素
        -->
		<div id="d1">
			<span>我是div标签中的span</span>
			<p>
				<span>
					我是P标签中的span
				</span>
			</p>
		</div>
		<span>我是body标签中的审判</span>
	</body>
</html>

Css选择器之其他选择器





推荐阅读:
  1. HTML 之 CSS选择器
  2. Css选择器总结

免责声明:本站发布的内容(图片、视频和文字)以原创、转载和分享为主,文章观点不代表本网站立场,如果涉及侵权请联系站长邮箱:is@yisu.com进行举报,并提供相关证据,一经查实,将立刻删除涉嫌侵权内容。

css 选择器

上一篇:CentOS/Oracle Linux 7.6安装IBM Domino V10

下一篇:ASA Modular Policy Framework_04

相关阅读

您好,登录后才能下订单哦!

密码登录
登录注册
其他方式登录
点击 登录注册 即表示同意《亿速云用户服务条款》