css选择器

最新推荐文章于 2022-11-05 11:35:29 发布

须佐能乎！

最新推荐文章于 2022-11-05 11:35:29 发布

阅读量299

点赞数 1

分类专栏： HTML CSS 文章标签： html css选择器

本文链接：https://blog.csdn.net/qq_34416191/article/details/51637018

版权

HTML 同时被 2 个专栏收录

13 篇文章 0 订阅

订阅专栏

CSS

7 篇文章 0 订阅

订阅专栏

<html>
	  <head>
	  	  
	  	  <title>css常用选择器和扩展选择器</title>
	  	  <!--三种常用选择器：标签选择器，class选择器，id选择器-->
	  	  <style type="text/css">
	  	  	  /*标签选择器：标签名{属性:值 用分号隔开}*/
	  	  	  p{
	  	  	  	color:"red";
	  	  	  	font-family:"宋体";
	  	  	  	font-size:"30px";
	  	  	  	}
	  	  </style>
	  	  <style type="text/css">
	  	  	  /*class类选择器：点类名{属性:值 用分号隔开}*/
	  	  	  .classname{
	  	  	  	color:"orange";
	  	  	  	font-family:"微软雅黑";
	  	  	  	font-size:"34px";
	  	  	  	}
	  	  </style>
	  	  <style type="text/css">
	  	  	  /*id选择器：#id名{属性:值 用分号隔开}*/
	  	  	  #idname{
	  	  	  	font-size:"32px";
	  	  	  	font-style:"italic";/*字体风格：斜体*/
	  	  	  	text-shadow:"black 0px 0px 5px";/*字体阴影：黑色，模糊效果*/
	  	  	  	}
	  	  </style>
	  	  <!--三种扩展选择器：关联选择器，组合选择器，伪元素选择器-->
	  	  <style type="text/css">
	  	  	  /*组合选择器：对多个不同选择器进行相同样式设置的时候应用此选择器，多个不同选择器用逗号分隔开*/
	  	  	  strike,em{
	  	  	  	color:blue;
	  	  	  	font-size:30px;
	  	  	  	}
	  	  </style>
	  	  <style type="text/css">
	  	  	  /*伪元素选择器：在html中预先定义好的选择器，称为伪元素，是因为css的术语。*/
	  	  	  a:link{  /*正常状态下的链接样式*/
	  	  	  	text-decoration:underline;  /*下划线*/
	  	  	  	} 
	  	  	  a:hover{ /*鼠标滑入链接时的样式*/
	  	  	  	color:red;
	  	  	  	font-size:36px;
	  	  	  	}
	  	  	  a:active{  /*按下链接但不松开时的样式，即激活状态*/
	  	  	  	color:orange;
	  	  	  	
	  	  	  	}
	  	  	  a:visited{ /*访问过的链接样式*/
	  	  	  	color:green;
	  	  	  	text-decoration:overline;
	  	  	  	}
	  	  </style>
	  	  <style type="text/css">
	  	  	  /*关联选择器：标签是可以嵌套的，要让相同标签里的不同标签显示不同效果，可以应用此选择器。*/
	  	  	  strong{
	  	  	  	font-size:38px;
	  	  	  	color:black;
	  	  	  	border:solid red;
	  	  	  	}
	  	  	  i{
	  	  	  	font-size:30px;
	  	  	  	color:blue;
	  	  	  	font-family:"微软雅黑";
	  	  	  	border:1px dashed gray;
	  	  	  	}
	  	  </style>
	  </head>
	  
	  
	  <body>
	  	  <!--标签选择器-->
	  	  <h2>静夜思</h2>
	  	  <p>床前明月光，</p>
	  	  <p>疑是地上霜。</p>
	  	  <p>举头望明月，</p>
	  	  <p>低头思故乡。</p>
	  	  
	  	  <!--class选择器-->
	  	  <pre class="classname">
	  	  	 知止而后定，
	  	  	 定而后能安，
	  	  	 安而后能虑，
	  	  	 虑而后能得。
	  	  </pre>
	  	  
	  	  <!--id选择器-->
	  	  <div id="idname">
	  	  	  物有本末，事有终始。<br>
	  	  	  知所先后，则近道矣。
	  	  </div>
	  	  <br><br><br><br><br><br>
	  	  
	  	  <!--组合选择器-->
	  	  <em>字体出现斜体效果</em> 	  
	  	  <br><br>
	  	  <strike>画线删除标记</strike>
	  	  <br><br>
	  	  
	  	  <!--伪元素选择器-->
	  	  <a href="#">百度一下，你就知道</a>
	  	  <br><br>
	  	  
	  	  <!--关联选择器-->
	  	  <strong>你没有多少时间了！<i>你确定还要继续这样吗？你是一个loser！</i></strong>
	  	  	  
	  	  
	  </body>
</html>