CSS常用选择器总结

Bless___

于 2019-12-03 11:21:27 发布

阅读量173

点赞数

文章标签： CSS

本文链接：https://blog.csdn.net/S_Tian/article/details/103363900

版权

<html>
 	<head>
  		<meta charset="utf-8" />
  		<title></title>
  		<link rel="stylesheet" href="css/index.css" />
  		<style>
   			/*标签选择器：所有该标签*/
   			span:{
   		 		font-weight: bolder;    
   			}
   			/*id选择器:w3c规定 id不允许重复*/
   			#txt{
    				border: blueviolet 1px solid;
   			}
   
   
   			/*类选择器:需要同一种样式属性的可以分为一类*/
   			.clazz{
   	 			color: #8A2BE2;border: #FF0000 3px dashed;
   			}
   
   			/*后代选择器*/
   			html #css .clazz{
    				font-style: italic;
   			}
   
   			/*分组选择器：标签之间以逗号间隔，则为一组，共享样式属性*/
   			p,h5{
    				color: yellow;
   			}
   
   			/*通配符选择器：所有标签*/
   			*{
    				margin: 0px;
   			}
   
   			/*伪类选择器:link visited hover active顺序不可以变*/
   			a{
    				text-decoration: none;
   			}
   
   			a:link{/*尚未访问时*/
    				color: blue;
   			}
   
   			a:visited{/*访问后*/
    				color: orangered;
   			}
   
   			a:hover{/*鼠标浮在其上面时*/
    				text-decoration: underline;
    				color: brown;
   			}
   
   			a:active{/*鼠标点住时*/
    				font-size: 36px;
   			}
  		</style>
 	</head>
 	<body id="css">
  
  		<span class="clazz">HelloWorld</span>
  		<span id="txt">HelloWorld</span>
  		<span>HelloWorld</span>
  		<div class="clazz">HelloWorld</div>
  
  		<p>白日依山尽</p>
  		<h5>黄河入海流</h5>
  
  		<a href="http://www.baidu.com">百度</a>
 	</body>
</html>

Bless___

关注

0
点赞
踩
0

收藏

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

<html> <head> <meta charset="utf-8" /> <title></title> <link rel="stylesheet" href="css/index.css" /> <style> /*标签选择器：所有该标签*/ sp...
复制链接

扫一扫