pink老师HTML5+CSS3学习笔记 | DAY7

文章介绍了Emmet语法如何快速生成HTML和CSS结构,包括创建标签、嵌套关系、类名和ID以及内容。同时,详细讲解了CSS的复合选择器,如后代选择器、子选择器、并集选择器和伪类选择器,以及它们在精准选择和样式应用中的作用。
摘要由CSDN通过智能技术生成

目录

1、emmet语法

①作用

②使用emmet语法快速生成html结构

③使用emmet语法快速生成css结构

2、css的复合选择器

①什么是复合选择器?

②后代选择器(重要)

③子选择器(重要)

④并集选择器(重要)

⑤伪类选择器

⑥链接伪类选择器

⑦focus伪类qi选择器

⑧复合选择器总结


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 记住这个写法

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值