CSS选择器

最新推荐文章于 2023-08-30 17:15:45 发布

ashxjdn

最新推荐文章于 2023-08-30 17:15:45 发布

阅读量325

点赞数

文章标签： css 前端

本文链接：https://blog.csdn.net/weixin_58627980/article/details/122800621

版权

<!DOCTYPE html>
<html>
	<head>
		<!--
		   CSS的基本使用
		      一、CSS的定义：
			       选择器名{
					   属性名：属性值；
					   属性名：属性值；
					   ......
				       }
					   
					   注意点：
					   1、声明需要使用{}括起来，每个声明以分号；结尾
					   2、一行建议一个声明
					   3、如果样式的属性值由多个单词组成，需要用“”括起来
			  二、CSS的注释方式：
			           /*内容*/
			  
		      三、CSS的三种使用方式：
			        1.行内样式
					   直接写在标签上的样式，在标签上通过style属性定义的样式
					2.内部样式
					   定义在style标签中的样式，style标签一般设置在head标签中
					3.外部样式
					   定义在外部的CSS文件中，通过link标签引入
					    <link rel="stylesheet" type="text/css" href="css/style.css"/>href=css文件的路径
					  注：当有多重样式时，越精准越优先
					-->
			<!--
			   CSS基本选择器
			      1.通用选择器 *
				  *{
					  属性名：属性值；
					  ......
				  }
				  2.元素选择器
				     元素名/标签名{
						 属性名：属性值；
						 .....
					 }
				  3.ID选择器 #
				  #id属性值{
					  属性名：属性值；
					  ......
				  }
				  4.类选择器
				    .class属性值{
						属性名：属性值；
						.....
					}
				  5.分组选择器
				      选择器1,选择器2,....{
				      		属性名：属性值；
							  ....
				      }
			   -->
		<meta charset="utf-8">
		<title>CSS的基本使用</title>
		<style>
		/*设置所有的h2标签的文本为红色*/
			h2{
				color: red;
			}
		/*通用选择器*/
			*{
				color:#00FFFF;
			}
		/*元素选择器*/
		div{
			font-size: 30px;
		}
		/*id选择器*/
		#p1{
			background-color: antiquewhite;
		}
		/*类选择器*/
		.cls1{
			font-family: "楷体";
		}
		/*分组选择器*/
		 #p1,.cls1,font{
			 text-decoration:line-through ;
		 }
		</style>
		<link rel="stylesheet" type="text/css" href="css/style.css"/>
		
	</head>
	<body>
			      
		<h2 style="color: red;font-family: "楷体";">Hello world</h2>
		<h2>lkadkfjklasjdlasd</h2>
		<div id="" class="cls1">
			这是一个div1
		</div>
		<div id="">
			这是一个div2
		</div>
		<p id="p1">这是一个p</p>
		<span class="cls1">这是一个span</span><br>
		<font size="" color="">这是一个font</font>
	</body>
</html>

组合选择器

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			/*后代选择器*/
			.food li{
				border: #9ACD32 solid 1px;
			}
			/*子代选择器*/
			.food2 > li{
				border: palegoldenrod dotted 1px;
			}
			/*相邻兄弟选择器*/
			#mydiv+div{
				background-color: #9ACD32;
			}
		</style>
	</head>
	<body>
		<!--
		组合选择器
				   一、后代选择器
					  选择指定元素的所有指定后代元素，以空格隔开
					  选择器 指定元素{
						  属性名：属性值；
						  .....
					  }
				   二、子代选择器
				      选择指定元素的第一代子元素，以大于号>隔开
					  选择器 > 指定元素{
						  属性名：属性值；
						  ......
					  }
                   三、相邻兄弟选择器
				       选择指定元素的下一个指定元素(只会找一个)，两者有相同的父元素，以加号隔开
					   选择器 + 指定元素{
						  属性名：属性值；
						  ......
					   }
			  -->
			  <!--获取class属性值时food的元素的所有对应11列表项-->
			  <ul class="food">
				  <li>水果
					  <ul>
					  	<li>香蕉</li>
						<li>苹果</li>
						<li>梨</li>
					  </ul>
				  </li>
				  <li>蔬菜
					  <ul>
						<li>白菜</li>
						<li>油菜</	li>
						<li>卷心菜</li>
					  </ul>
				  </li>
			  </ul>
			  <ul>
					<li>香蕉</li>
					<li>苹果</li>
					<li>梨</li>
		      </ul>
			  <ul class="food2">
			  				  <li>水果
			  					  <ul>
			  					  	<li>香蕉</li>
			  						<li>苹果</li>
			  						<li>梨</li>
			  					  </ul>
			  				  </li>
			  				  <li>蔬菜
			  					  <ul>
			  						<li>白菜</li>
			  						<li>油菜</	li>
			  						<li>卷心菜</li>
			  					  </ul>
			  				  </li>
			  </ul>
			  <hr >
			  <div>相邻兄弟选择器1</div>
			  <div id="mydiv">相邻兄弟选择器2</div>
			  <div>相邻兄弟选择器3</div>
			  <div>相邻兄弟选择器4</div>
	</body> 
</html>

ashxjdn

关注

0
点赞
踩
1

收藏

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

<!DOCTYPE html><html> <head> <!-- CSS的基本使用一、CSS的定义：选择器名{ 属性名：属性值；属性名：属性值； ...... } 注意点： 1、声明需要使用{}括起来，每个声明以分号；结尾 2、一行建议一个声明 3、如果样
复制链接

扫一扫