pink老师HTML5+CSS3学习笔记

生成标签：直接输入标签名+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 记住这个写法