Css之选择器

发布时间:2020-07-31 17:57:45 作者:Java大S
来源:网络 阅读:362

一、CSS选择器之标签选择器(元素选择器)

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>选择器</title>
		<style type="text/css">
			/**
			 * 标签选择器
			 * 作用:通过元素选择器可以选择页面中的所有指定元素
			 * 语法:标签名{}
			 */
			p{
				background-color: yellow;
			}
		</style>
	</head>
	<body>
		<h2>静夜思</h2>
		<p>床前明月光,</p>
		<p>疑是地上霜。</p>
		<p>举头望明月,</p>
		<p>低头思故乡。</p>
	</body>
</html>

Css之选择器

二、CSS选择器之id选择器

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>选择器</title>
		<style type="text/css">
			/**
			 * 标签选择器
			 * 作用:通过元素选择器可以选择页面中的所有指定元素
			 * 语法:标签名{}
			 */
			p{
				background-color: yellow;
			}
			/**
			 * id选择器
			 * 作用:通过元素的id属性值来选择唯一的元素
			 * 语法:#id属性值{}
			 */
			#four{
				background-color: aqua;
			}
		</style>
	</head>
	<body>
		<h2>静夜思</h2>
		<p>床前明月光,</p>
		<p>疑是地上霜。</p>
		<p>举头望明月,</p>
		<p id="four">低头思故乡。</p>
	</body>
</html>

Css之选择器

三、CSS选择器之类选择器

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>选择器</title>
		<style type="text/css">
			/**
			 * 标签选择器
			 * 作用:通过元素选择器可以选择页面中的所有指定元素
			 * 语法:标签名{}
			 */
			p{
				background-color: yellow;
			}
			/**
			 * id选择器
			 * 作用:通过元素的id属性值来选择唯一的元素
			 * 语法:#id属性值{}
			 */
			#four{
				background-color: aqua;
			}
			/**
			 * 类选择器i
			 * 作用:通过元素的class属性值选中一组元素
			 * 语法:.class属性值{}
			 */
			.multi{
				background-color: antiquewhite;
			}
		</style>
	</head>
	<body>
		<h2>静夜思</h2>
		<p class="multi">床前明月光,</p>
		<p class="multi">疑是地上霜。</p>
		<p class="multi">举头望明月,</p>
		<p id="four">低头思故乡。</p>
	</body>
</html>

Css之选择器

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>选择器</title>
		<style type="text/css">
			/**
			 * 标签选择器
			 * 作用:通过元素选择器可以选择页面中的所有指定元素
			 * 语法:标签名{}
			 */
			p{
				background-color: yellow;
			}
			/**
			 * id选择器
			 * 作用:通过元素的id属性值来选择唯一的元素
			 * 语法:#id属性值{}
			 */
			#four{
				background-color: aqua;
			}
			/**
			 * 类选择器
			 * 作用:通过元素的class属性值选中一组元素
			 * 语法:.class属性值{}
			 */
			.multi{
				background-color: antiquewhite;
			}
			.hello{
				font-weight: bold;
			}
		</style>
	</head>
	<body>
		<h2>静夜思</h2>
		<!--
        	时间:2016-12-04
        	描述:可以有多个选择器作用于同一个元素
        -->
		<p class="multi hello">床前明月光,</p>
		<p class="multi">疑是地上霜。</p>
		<p class="multi">举头望明月,</p>
		<p id="four">低头思故乡。</p>
	</body>
</html>

Css之选择器

四、CSS选择器之分组选择器(并集选择器)

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>选择器</title>
		<style type="text/css">
			
			/**
			 * 分组选择器(并集选择器)
			 * 作用:通过选择器分组可以同时选中多个选择器对应的元素
			 * 语法:选择器1,选择器2,选择器3{}
			 */
			p,#four,.three{
				background-color: aquamarine;
			}
			
			
		</style>
	</head>
	<body>
		<h2>静夜思</h2>
		<!--
        	时间:2016-12-04
        	描述:可以有多个选择器作用于同一个元素
        -->
		<p class="multi hello">床前明月光,</p>
		<p class="multi">疑是地上霜。</p>
		<p class="three">举头望明月,</p>
		<p id="four">低头思故乡。</p>
	</body>
</html>

Css之选择器

五、CSS选择器之通配选择器

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>选择器</title>
		<style type="text/css">
			
			
			/**
			 * 通配选择器
			 * 选中页面中的所有元素
			 * 语法:*{}
			 */
			*{
				background-color: red;
			}
			
			
		</style>
	</head>
	<body>
		<h2>静夜思</h2>
		<!--
        	时间:2016-12-04
        	描述:可以有多个选择器作用于同一个元素
        -->
		<p class="multi hello">床前明月光,</p>
		<p class="multi">疑是地上霜。</p>
		<p class="three">举头望明月,</p>
		<p id="four">低头思故乡。</p>
	</body>
</html>

Css之选择器

六、CSS选择器之复合选择器(交集选择器)

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>选择器</title>
		<style type="text/css">
			/**
			 * 复合选择器(交集选择器)
			 * 作用:可以选中同时满足多个选择器的元素
			 * 语法:选择器1选择器2选择器3{}
			 */
			p.three{
				background: yellow;
			}
			
		</style>
	</head>
	<body>
		<h2>静夜思</h2>
		<p class="multi hello">床前明月光,</p>
		<p class="multi">疑是地上霜。</p>
		<p class="three">举头望明月,</p>
		<p id="four">低头思故乡。</p>
	</body>
</html>

Css之选择器



<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>选择器</title>
		<style type="text/css">
					/**
			 * 标签选择器
			 * 作用:通过元素选择器可以选择页面中的所有指定元素
			 * 语法:标签名{}
			 */
			p{
				background-color: yellow;
			}
			/**
			 * id选择器
			 * 作用:通过元素的id属性值来选择唯一的元素
			 * 语法:#id属性值{}
			 */
			#four{
				background-color: aqua;
			}
			/**
			 * 类选择器
			 * 作用:通过元素的class属性值选中一组元素
			 * 语法:.class属性值{}
			 */
			.multi{
				background-color: antiquewhite;
			}
			.hello{
				font-weight: bold;
			}
			.three{
				font-family: "楷体";
			}
			/**
			 * 分组选择器(并集选择器)
			 * 作用:通过选择器分组可以同时选中多个选择器对应的元素
			 * 语法:选择器1,选择器2,选择器3{}
			 */
			p,#four,.three{
				background-color: aquamarine;
			}

			/**
			 * 通配选择器
			 * 选中页面中的所有元素
			 * 语法:*{}
			 */
			*{
				background-color: red;
			}
			
			/**
			 * 复合选择器(交集选择器)
			 * 作用:可以选中同时满足多个选择器的元素
			 * 语法:选择器1选择器2选择器3{}
			 */
			p.three{
				background: yellow;
			}
			
		</style>
	</head>
	<body>
		<h2>静夜思</h2>
		<p class="multi hello">床前明月光,</p>
		<p class="multi">疑是地上霜。</p>
		<p class="three">举头望明月,</p>
		<p id="four">低头思故乡。</p>
	</body>
</html>


推荐阅读:
  1. HTML 之 CSS选择器
  2. jQuery 之 选择器

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

css 选择器

上一篇:QQ帮助他人04-Skype for business-配置电话号码

下一篇:阿里巴巴笔试题集第23题及分析

相关阅读

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

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