文章介绍了Emmet语法如何快速生成HTML和CSS结构，包括创建标签、嵌套关系、类名和ID以及内容。同时，详细讲解了CSS的复合选择器，如后代选择器、子选择器、并集选择器和伪类选择器，以及它们在精准选择和样式应用中的作用。
目录
1、emmet语法
①作用
- 使用缩写提高编写速度；
②使用emmet语法快速生成html结构
- 生成标签：直接输入标签名+tab键就能直接生成；
- 输入“div”+tab键=<div></div>
- 生成多个相同标签：输入标签名*n，按tab键直接生成；
- 输入“div*3”+tab键=<div></div><div></div><div></div>
- 生成父子关系标签：输入“父级标签名>子级标签名”,按tab键直接生成;
- 输入“ul>li”+tab键=<ul><li></li></ul>
- 生成兄弟关系标签：用+；
- 输入“div+p”+tab键=<div></div><p></p>
- 生成带有类名或id的标签：.类名+tab键，生成默认为div的类；标签名.类名+tab键，生成该标签名的类；id同理，.换成#即可；
- 输入“.nav”+tab键=<div class="nav"></div>
- 输入“#nav”+tab键=<div id="nav"></div>
- 输入“p.nav”+tab键=<p class="nav"></p>
- 输入“p#nav”+tab键=<p id="nav"></p>
- 生成的div类名是有顺序的：用$；
- 输入“.nav$*3”+tab键=<div class="nav1"></div><div class="nav2"></div><div class="nav3"></div>
- 在生成标签内部默认显示内容：用{}
- 输入“div{a}”+tab键=<div>a</div>
- 输入“div{a}*3”+tab键=<div>a</div><div>a</div><div>a</div>
- 输入“div{$}*3”+tab键=<div>1</div><div>2</div><div>3</div>
③使用emmet语法快速生成css结构
- css基本采取简写形式：
- 输入“w200”+tab键=width:200px;
- 输入“lh26”+tab键=line-height:26px;
2、css的复合选择器
①什么是复合选择器？
- 复合选择器由两个或多个基础选择器通过不同方式组合而成，是建立在基础选择器上的，对基本选择器进行组合形成的，可以更准确更高效的选择目标标签；
- 常用复合选择器：后代选择器、子选择器、并集选择器、伪类选择器等；
②后代选择器（重要）
- 可以选择父元素里面的子元素；
- 语法：
元素1 元素2 {
...
}- 应用：
/*css*/
ol li {
color: pink;
}
<!--html-->
<body>
<ol>
<li>我是ol的孩子li</li>
<li>我是ol的孩子li</li>
<li>我是ol的孩子li</li>
</ol>
<ul>
<li>我是ul的孩子li</li>
<li>我是ul的孩子li</li>
<li>我是ul的孩子li</li>
</ul>
</body>
- 改变的是元素2的样式；
③子选择器（重要）
- 子选择器只能选择作为某元素最近一级子元素，理解为选亲儿子元素；
- 语法：
元素1>元素2 {
...
}- 选择元素1里面的所有直接后代元素2；
- 应用：
/*css*/
/*后代选择器：div里所有的a都改变了样式*/
div a {
color: pink;
}
/*子元素选择器：div里最近一级子元素span改变了样式*/
div>span {
color: pink;
}
<!--html-->
<body>
后代选择器：
<div>
<a href="#">我的父亲是div</a>
<p>
<a href="#">我的父亲是p，我的爷爷是div</a>
</p>
</div>
子元素选择器：
<div>
<span>我的父亲是div</span>
<p>
<span>我的父亲是p，我的爷爷是div</span>
</p>
</div>
</body>
- 改变的是元素2的样式；
④并集选择器（重要）
- 可以选择多组标签，同时定义相同样式，通常用于集体声明；
- 任何形式的选择器都能作为并集选择器的一部分；
- 语法：
元素1,
元素2 {
...
}- 应用：
/*css*/
/*把熊大熊二、佩奇一家改成粉色*/
div,
p,
.pig li {
color: pink;
}
<!--html-->
<body>
<div>熊大</div>
<p>熊二</p>
<span>光头强</span>
<ul class="pig">
<li>佩奇</li>
<li>乔治</li>
<li>猪爸爸</li>
<li>猪妈妈</li>
</ul>
</body>
- 语法规范：并集选择器喜欢竖着写；
⑤伪类选择器
- 用于向某些选择器添加特殊的效果，如给链接添加特殊效果，或选择第一个、第n个元素；
- 常见伪类选择器：链接伪类、结构伪类、表单伪类等；
⑥链接伪类选择器
- 语法：
a:link /*选择所有未被访问的链接*/
a:visited /*选择所有已被访问的链接*/
a:hover /*选择鼠标指针位于其上的链接*/
a:active /*选择活动链接（鼠标按下未弹起的链接）*/- 按照a:link、a:visited、a:hover、a:active的顺序声明；
- a标签链接具有默认样式，需要单独指定样式；
- 开发中常用写法：
a {
...
}
a:link {
...
}- 应用：
/*css*/
/* a:link:选择所有未被访问的链接,再更改其样式 */
a:link {
color: #333;
text-decoration: none;
}
/* a:visited:选择所有已被访问的链接；当未被访问的链接被点击访问时，样式改变 */
a:visited {
color: orange;
}
/* a:hover:选择鼠标指针位于其上的链接;当鼠标经过该链接时，样式改变 */
a:hover {
color: skyblue;
}
/* a:active:选择活动链接（鼠标按下未弹起的链接） */
a:active {
color: green;
}
<!--html-->
<body>
<a href="#">小猪佩奇</a>
</body>⑦focus伪类选择器
- 用于选取获得焦点(光标点击)的表单元素；
- 语法：
input:focus {
...
}- 应用：
/*css*/
input:focus {
background-color: pink;
}
<!--html-->
<body>
<input type="text">
<input type="text">
<input type="text">
</body>
⑧复合选择器总结
| 选择器 | 作用 | 特征 | 使用情况 | 隔开符号及用法 |
|---|---|---|---|---|
| 后代选择器 | 用来选择后代元素 | 可以是子孙后代 | 较多 | 符号是空格 .nav a |
| 子代选择器 | 选择最近一级元素 | 只选亲儿子 | 较少 | 符号是大于 .nav>p |
| 并集选择器 | 选择某些相同样式的元素 | 可以用于集体声明 | 较多 | 符号是大于 .nav>p |
| 链接伪类选择器 | 选择不同状态的链接 | 跟链接相关 | 较多 | 重点记住 a和a:hover 实际开发的写法 |
| :focus 选择器 | 选择获得光标的表单 | 跟表单相关 | 较少 | input:focus 记住这个写法 |
扫一扫
273
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
