其他分享
首页 > 其他分享> > 2021-07-09

2021-07-09

作者：互联网

Emmet语法

<!DOCTYPE html>
<html lang="en">
<head>    
<meta charset="UTF-8">    
<meta http-equiv="X-UA-Compatible" content="IE=edge">    
<meta name="viewport" content="width=device-width, initial-scale=1.0">    <title>Emmet语法</title>
</head>
<body>    
	<div></div>    
	<div></div>    
	<div></div>   
	<div></div>    
	<div></div>     
	<div></div>    
	<div></div>    
	<div></div>    
	<div></div>    
	<div></div>    
	<!-- div*10 生成十个标签 -->    
	<ul>        
		<li></li>    
	</ul>    
	<!-- ul>li,父子集关系，兄弟集为+ -->    
	<div class="nav"></div>    
	<!-- .nav -->    
	<div id="nav"></div>    
	<!-- #nav ，#two-->    
	<div class="demo1"></div>    
	<div class="demo2"></div>    
	<div class="demo3"></div>    
	<div class="demo4"></div>    
	<div class="demo5"></div>    
	<!-- .demo$*5,排序 -->
</html>

复合选择器

<!DOCTYPE html><html lang="en">
<head>    
<meta charset="UTF-8">    
<meta http-equiv="X-UA-Compatible" content="IE=edge">    
<meta name="viewport" content="width=device-width, initial-scale=1.0">    <title>复合选择器</title>    
<style>        
	ol li {            
	    color: pink;
        }
        /* 后代选择器,亲儿子选择器只能选择自己的下一级：元素1>元素2 */        
        .col {            
            text-decoration: none;
        }
        .other li {            
            color: red;
        }
        /* 多个ol中选择，改标签名字 */        
        div,        
        p {            
             color: green;
        }
        a {            
             color: gray;
        }        /* 并集选择器 */        
        a:link {            
             color: black;            text-decoration: none;
        }
        /* 未被点击过 */        
        a:visited {            
             color: blue;
        }
        /* 点击过的 */        
        a:hover {            
             color: red;
        }
        /* 经过的链接 */        
        a:active {            
             color: pink;
        }
        /* 按下还未选择的链接 */        
        /* 伪类选择器 */    
</style>
</head>
<body>    
    <ul>        
        <li>1</li>        
        <li>2</li>        
        <li>3</li>        
        <li><a href="#" class="col">4</a></li>    
    </ul>    
    <ol>        
         <li>1</li>        
         <li>2</li>        
         <li>3</li>        
         <li>4</li>    
     </ol>    <ol class="other">        
         <li>1</li>        
         <li>2</li>        
         <li>3</li>        
         <li>4</li>    
     </ol>    
     <div>并集选择器</div>    
     <p>并集选择器</p>    
     <a href="http://www.baidu.com">baidu</a>    
     <a href="http://www.sougou.com">sougou</a>
</body>
</html>

小米商城小模块：行与块元素

<!DOCTYPE html>
<html lang="en">
<head>    
<meta charset="UTF-8">    
<meta http-equiv="X-UA-Compatible" content="IE=edge">    
<meta name="viewport" content="width=device-width, initial-scale=1.0">    
<title>行与块元素</title>    
<style>        
	a {            
		display:block;            
		text-decoration: none;            
		line-height: 40px;            
		font-size: 14px;            
		background-color: gray;            
		width: 230px;            
		height: 40px;            
		color: white;            
		text-indent: 2em;

        }        
        a:hover {            
        	background-color: orange;        }
</style>
</head>
<body>    
	<a href="">手机 电话卡</a>    
	<a href="">电视 盒子</a>    
	<a href="">笔记本 平板</a>    
	<a href="">出行 穿戴</a>    
	<a href="">智能 路由器</a>    
	<a href="">健康 儿童</a>    
	<a href="">耳机 音响</a>
</body>
</html>

在这里插入图片描述

标签：07,并集,color,text,09,li,decoration,2021,选择器
来源： https://blog.csdn.net/qq_47195235/article/details/118616340