选择器

最新推荐文章于 2024-07-09 15:59:19 发布

xiaobaixie

最新推荐文章于 2024-07-09 15:59:19 发布

阅读量288

点赞数

分类专栏： CSS学习代码文章标签： css

本文链接：https://blog.csdn.net/xiaobaixie/article/details/74635475

版权

CSS学习代码专栏收录该内容

5 篇文章 0 订阅

订阅专栏

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<style type="text/css">
/*
选择器：选择器的作用就是找到对应的数据进行样式化。
	1、标签选择器：就是找到所有指定的标签进行样式化。
		格式：
			标签名{
					样式一;样式2......
				}
		例子：
			div{
				color:#F06;
				font-size:24px;
				}
	2、类选择器：使用类选择器首先要给html标签指定对应的class属性值
		格式：
			.class的属性值{
					样式一;样式二....
				}	
		例子：
			.two{
				background-color:#CCC;
				color:#090;
				font-size:36px;
				}
		类选择器要注意的事项：
			1、html元素的class属性值一定不能以数字开头
			2、类选择器的样式是要优先于标签选择器的样式
	3、ID选择器：使用ID选择器首先要给html元素添加一个id的属性值	
		ID选择器的格式：
			#id属性值{
					样式一;样式二......
				}
		例子：
				#one{
					background-color:#000;
					color:#6F0;
					font-size:16px;
				}
		ID选择器要注意的事项：
			1、ID选择器的样式优先级是最高，优先于类选择器与标签选择器。
			2、ID选择器的属性值也是不能以数字开头的
			3、ID的属性值在一个html页面中只能出现一次
	4、交集选择器：就是对选择器1中的选择器2里面的数据进行样式化
		选择器1 选择器2{
				样式一;样式二......
			}
		例子：
		.two span{
			background-color:#600;
			font-size:24px;
			}
	5、并集选择器：对指定的选择器进行统一的样式化
		格式：
			选择器1,选择器2..{
					样式一;样式二...
				}
		例子：
			span,a{
			border-style:solid;
			border-color:#936;
			}
	6、通用选择器
		格式：
			*{
				样式一,样式二...
				}
		例子：
		*{
			text-decoration:line-through;
			background-color:#330;
		}
*/
	*{
		text-decoration:line-through;
		background-color:#330;
		}
/*
并集选择器
	span,a{
		border-style:solid;
		border-color:#936;
		}
*/		
/*
交集选择器
	.two span{
		background-color:#600;
		font-size:24px;
	}
*/
/*
标签选择器
	div{
		color:#F06;
		font-size:24px;
	}
*/
/*
类选择器
.two{
	background-color:#CCC;
	color:#090;
	font-size:36px;
	}
div{
	background-color:#F00;
}
*/
/*
ID选择器
	.test{
		background-color:#009;
		}
	#one{
		background-color:#000;
		color:#6F0;

		font-size:16px;
	}
*/

</style>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
</head>

<body>
	<div id="one" class="test">这是<span>第一个div标签。。。。。。</span>....</div>
    <div id="one" class="two">这是<span>第二个div标签。。。</span>。。。</div>
    <span>这个是一个span标签</span><br/>
    <a class="two" href="#">新闻标签</a>
</body>
</html>

xiaobaixie

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
选择器

/*选择器：选择器的作用就是找到对应的数据进行样式化。 1、标签选择器：就是找到所有指定的标签进行样式化。格式：标签名{ 样式一;样式2...... } 例子： div{ color:#F06; font-size:24px; } 2、类选择器：使用类选择器首先要给html标签指定对应的class属性值格式： .c
复制链接

扫一扫