CSS学习笔记3Emmet语法、复合选择器、元素显示模式

最新推荐文章于 2024-06-17 09:00:23 发布

最爱琴女E

最新推荐文章于 2024-06-17 09:00:23 发布

阅读量178

点赞数 1

分类专栏： CSS 文章标签： css html

本文链接：https://blog.csdn.net/qwq_666/article/details/115730031

版权

Emmet语法

快速生成HTML结构语法

生成标签直接输入标签名按tab键即可，比如输入div然后按tab键，就可以生成
了
若想生成多个相同的标签，加上*就可以了，比如 div * 3（别有空格）再按tab键就可以快速生成3个div了
若有父子级关系的标签，可以用> 比如 ul>li
若有兄弟关系的标签，用+ 比如 div+p
若生成带有类名或者id名字的，直接写 .demo 或者 #two tab键就可以了

p.one
按tab键后如下
<p class="one"></p>

p#two
按tab键后如下
<p id="two"></p>

若生成的div类名是有顺序的，可以用自增符号$

.demo$*5
按tab键后如下
<div class="demo1"></div>
<div class="demo2"></div>
<div class="demo3"></div>
<div class="demo4"></div>
<div class="demo5"></div>

若想要在生成的标签内部写内容可以用{}表示

div{最爱琴女E}
按tab键后如下
<div>最爱琴女E</div>

div{大大大}*3
按tab键后如下
<div>大大大</div>
<div>大大大</div>
<div>大大大</div>

div{$}*5
按tab键后如下
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
<div>5</div>

快速生成CSS样式语法

CSS基本采取简写形式即可

比如 w200 按tab 可以生成 width:200px;
比如 lh26 按tab 可以生成 line-height:26px;

.one {
   
		tac
		w100
		h200
			}
按tab键后如下
.one {
   
		text-align: center;
		width: 100px;
		height: 200px;
			}

复合选择器

简介：在CSS中，根据选择器的类型把选择器分为基础选择器和复合选择器，复合选择器是建立在基础选择器之上，对基本选择器进行组合形成的。

复合选择器可以更准确、更高效的选择目标元素（标签）
复合选择器是由两个或多个基础选择器，通过不同的方式组合而成的
常用的复合选择器包括：后代选择器、子选择器、并集选择器、伪类选择器等等

后代选择器（重要）

后代选择器又称包含选择器，可以选择父元素里面的子元素

语法：
元素1 元素2 { 样式声明 }

上述语法表示选择元素1里面的所有元素2（后代元素）

注意：

元素1和元素2中间使用空格隔开
元素1是父级，元素2是子级，最终选择的是元素2
元素2可以是儿子，也可以是孙子等，只要是元素1的后代即可

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>复合选择器之后代选择器</title>
		<style type="text/css">
			/* 想要把ol里面的小li选出来改为绿色 */
			ol li {
    
				color: green;
			}
			ol li a {
    
				color: red;
			}
			
			.nav li a {
    
				color: yellow;
			}
		</style>
	</head>
	<body>
		<ol>
			哈哈哈~
			<li>我是ol的孩子</li>
			<li>我是ol的孩子</li>
			<li>我是ol的孩子</li>
			<li><a href="#">我是孙子</a></li>
		</ol>
		<ul>
			<li>我是ul的孩子</li>

最低0.47元/天解锁文章

最爱琴女E

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
CSS学习笔记3Emmet语法、复合选择器、元素显示模式

Emmet语法快速生成HTML结构语法生成标签直接输入标签名按tab键即可，比如输入div然后按tab键，就可以生成了若想生成多个相同的标签，加上*就可以了，比如 div * 3（别有空格）再按tab键就可以快速生成3个div了若有父子级关系的标签，可以用> 比如 ul>li若有兄弟关系的标签，用+ 比如 div+p若生成带有类名或者id名字的，直接写 .demo 或者 #two tab键就可以了p.one按tab键后如下<p class="one"></
复制链接

扫一扫