css基本知识点1（选择器）

最新推荐文章于 2024-04-06 09:33:27 发布

wujiancai1163

最新推荐文章于 2024-04-06 09:33:27 发布

阅读量184

点赞数 1

本文链接：https://blog.csdn.net/wujiancai1163/article/details/103210541

版权

一、css的基本概念：css是一种层叠样式表文件

二、基本语法：

（一）div（属性：属性值）比如：width:100px;

（二）书写样式：

1、行内样式

2、内嵌样式

(1)<style>@import url("css/base.css") </style>

(2)<style>

div{}

</style>

3、外联样式

三、选择器

（一）交集选择器

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>05.css.交集选择器.html</title>
	<style>
		/*标签选择器*/
		span{
			width: 30px;
			height: 30px;
			background-color: #ccc;
		}
		/*交集选择器*/
		span.circle{
			display: block;
			margin-top:5px;
		}
	</style>
</head>
<body>
	<div>
		<span class="circle"></span>
		<span class="circle"></span>
		<span class="circle"></span>
		<span class="circle"></span>
		<span class="circle"></span>
	</div>
</body>
</html>

（二）并集选择器

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>04.css.并集选择器.html</title>
	<style>
		/*并集选择器*/
		/*代码复用*/
		ul,ol{
			list-style:none;
		}
	</style>
</head>
<body>
	<!-- 并集选择器 -->
	<ul>
		<li>无序列表</li>
		<li>无序列表</li>
		<li>无序列表</li>
		<li>无序列表</li>
		<li>无序列表</li>
	</ul>
	<ol>
		<li>有序列表</li>
		<li>有序列表</li>
		<li>有序列表</li>
		<li>有序列表</li>
		<li>有序列表</li>
	</ol>
</body>
</html>

（三）后代选择器

1、直接子代选择器

2、间接子代选择器

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>06.css.后代选择器.html</title>
	<style>
		/*直接子代选择器*/
		ul>li{
			width:160px;
			background-color: #ccc;
			margin-bottom: 10px;
			/*list-style:none;*/
		}
		/*间接后代选择器*/
		ul li{
			list-style:none;
		}
		/*后代选择器*/
		/*ul>li ol li{
			height: 50px;
			border-bottom: 1px solid pink;
		}*/
	</style>
</head>
<body>
	<!-- 辈分 -->
	<!-- 嵌套关系 -->
	<ul><!-- 爷爷 -->
		<li><!-- 父亲 -->
			<div>这是儿子标签</div><!-- 儿子 -->
			<ol><!-- 儿子 -->
				<li>孙子标签</li><!-- 孙子 -->
				<li>孙子标签</li><!-- 孙子 -->
				<li>孙子标签</li><!-- 孙子 -->
			</ol>
		</li>
		<li><!-- 父亲 -->
			<div>这是儿子标签</div><!-- 儿子 -->
			<ol><!-- 儿子 -->
				<li>孙子标签</li><!-- 孙子 -->
				<li>孙子标签</li><!-- 孙子 -->
				<li>孙子标签</li><!-- 孙子 -->
			</ol>
		</li>
		<li><!-- 父亲 -->
			<div>这是儿子标签</div><!-- 儿子 -->
			<ol><!-- 儿子 -->
				<li>孙子标签</li><!-- 孙子 -->
				<li>孙子标签</li><!-- 孙子 -->
				<li>孙子标签</li><!-- 孙子 -->
			</ol>
		</li>
	</ul>
</body>
</html>

（四）属性选择器

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>07.css.属性选择器.html</title>
	<style>
		div{
			width:200px;
			height:50px;
			border:1px solid #ccc;
			margin-top:10px;
		}
		/*属性选择器*/
		div[class="box"]{
			background-color: blue;
		}
		/*以d开头的类名*/
		div[class^="d"]{
			background-color: red;
		}
		/*结尾是v的类名*/
		div[class$="v"]{
			background-color: orange;
		}
		/*包含i的类名*/
		div[class*="i"]{
			background-color: purple;
		}
		div[data-num="10010"]{
			background-color: green;
		}
	</style>
</head>
<body>
	<!-- data-* 表示标签自定义属性 -->
	<div class="nav"></div>
	<div class="demo"> </div>
	<div class="box"></div>
	<div class="main"></div>
	<div data-num="10010"></div>
</body>
</html>

（五）伪类选择器

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>08.css.伪类选择器.html</title>
	<style>
		div.box{
			width: 100px;
			height: 100px;
			background-color: blue;
		}
		/*伪类选择器*/
		div.box:hover{
			width: 200px;
			height: 200px;

		}

		.parent{
			width:200px;
			height: 50px;
			border:1px solid black;
		}
		.parent .red{
			width:200px;
			height: 50px;
			background-color: red;
		}
		.parent .blue{
			width:200px;
			height: 50px;
			background-color: blue;
			display: none;
		}
		/* 伪类选择器 */
		.parent:hover .red{
			display: none;
		}
		.parent:hover .blue{
			display: block;
		}
		/*伪类选择器  链接标签*/
		a{
			display: block;
			width: 160px;
			height:40px;
			border:1px solid #ccc;
			margin-top: 10px;
			color: black;
			text-decoration: none;
		}
		/*未访问的链接*/
		a:link{
			color: #333;
		}
		/*已访问过得链接*/
		a:visited{
			color: red;
			background-color: pink;
		}
		/*鼠标滑过链接*/
		a:hover{
			color: orange;
			background-color:lightblue;
		}
		/*已选中的链接*/
		a:active{
			color :green;
			background-color:lightyellow;
		}
		
	</style>
</head>
<body>
	<!-- 1 -->
	<div class="box"></div>


	<!-- 2 -->
	<!-- 初始化状态 red显示  ，blue隐藏 -->
	<!-- 鼠标在父元素悬停状态 red隐藏  ，blue显示 -->
	<div class="parent">
		<div class="red">你好</div>
		<div class="blue">hello</div>
	</div>
	<!-- 3.0 链接 -->
	<a href="http://www.baidu.com">百度</a>
	<a href="http://www.souhu.com">搜狐</a>
	<a href="http://www.jd.com">京东</a>


</body>
</html>

（六）相邻选择器

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>10.css.相邻选择器.html</title>
	<style>
		div{
			width:100px;
			height: 100px;
			border:1px solid #ccc;
		}
		/*选择当前标签.box的标签*/
		.box+div{
			background-color: green;
		}
		/*选择当前标签的.demo的后面的所有标签*/
		.demo~span{
			color:red;
		}
	</style>
</head>
<body>
	<div></div>
	<div class="box"></div>
	<div></div>
	<div></div>
	<div></div>

	<span>hello1</span>
	<span class="demo">hello2</span>
	<span>hello3</span>
	<span>hello4</span>
	<span>hello5</span>
</body>
</html>

（七）基本选择器

1、标签选择器 div{}

2、类型选择器 .box{}

3、id选择器 #bixId{}

4、选择器权重 id>class>标签选择器

5、选择器权重值 id选择器：100，类名选择器：10 ，权重选择器：1，

会选择权重值最高的那个显示。

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>11.css.选择器的权重问题.html</title>
	<style>
		body{
			/*font-size: 100px;*/
		}
		/*选择器的权重问题*/
		/* 有#的为id选择器 ， .为类名选择器，直接以标签命名为标签选择器 */
		div.box .circle#pointId{  /*有1个id选择器，两个类名选择器，一个标签选择器*//*权重是100+20+1=121*/
			width: 200px;
			height: 200px;
			background-color: green;
			color:green;
		}
		.box #pointId{ /*有1个id选择器，一个类名选择器，零个标签选择器*//*权重是100+10+0=110*/
			width: 300px;
			height: 300px;
			background-color: pink;
			color:pink;
		}
		div#demoId span{/*有1个id选择器，零个类名选择器，两个标签选择器*//*权重是100+0+2=102*/
			width: 400px;
			height: 400px;
			background-color: yellow;
			color: yellow;
		}
		div.box span.circle{/*有零个id选择器，两个类名选择器，两个标签选择器*//*权重是0+20+2=22*/
			width: 500px;
			height: 500px;
			background-color: red;
			color:red;
		}
		div#demoId .circle{
			width: 600px;
			height: 600px;
			background-color: blue;
			color:blue;
		}
	</style>
</head>
<body>
	<div class="box" id="demoId">
		<div class="circle" id="pointId">
			极限青春！
		</div>
	</div>
</body>
</html>

四、css的特征

（一）层叠性

（二）继承性

wujiancai1163

关注

1
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
css基本知识点1（选择器）

一、css的基本概念：css是一种层叠样式表文件二、基本语法：（一）div（属性：属性值）比如：width:100px;（二）书写样式：1、行内样式<div style = " "></div>2、内嵌样式(1)<style>@import url("css/base.css") </style>(2)<s...
复制链接

扫一扫