CSS的引入方式和复合选择器

CSS的引入方式

样式表	优点	缺点	范围
行内样式表	书写方便	结构样式混写	控制一个标签
内部样式表	部分结构和样式相分离	没有彻底	控制一个页面
外部样式表	完全实现结构和样式分离	需要引入	控制多个页面

<link rel="stylesheet" href="a.css">
<!-- href="路径" -->

emmet 语法

快速生成HTML标签

• 生成多个标签：div*****10
• 有父子级关系的标签：ul > li
• 兄弟关系：div**+**p
• 带有类名或者标签名的：div**.**pink（class名）div#gray(id名)
• 生成的div的类名是有顺序的：p.demo**$***5
• 生成的标签默认显示几个文字：div{这里写文字}

注意：$是自增的符号

快速生成CSS样式

• width：100px; w100
• 可以用首字母快速生成样式

复合选择器

1. 后代选择器

可以选择父元素里的子元素

ul li{
    width: 300px;
}

注意：

1. 元素一和元素二必须用空格隔开
2. 只要有一层以上的关系就可以用，就像:

<ul>
    <li>
        <a href="#">aaa</a>
    </li>
</ul>

也可以通过后代选择器对“a”标签进行选择（ul li a）

1. 子选择器

只选择父元素最近一级的子元素

元素1>元素2{样式声明}

注意：

1. 元素1和元素2用大于号隔开

2. 元素1是父级，元素2是子级，最终选择元素2

3. 并集选择器

可以将多个标签用同一样式

元素1，元素2{样式声明}

注意：

1. 用逗号来实现
2. 任何选择器都可以作为并集选择器的一部分
3. 最后一个元素不需要加逗号

div,
p,
.pig li{样式声明}

1. 伪类选择器

链接伪类选择器

给某些选择器添加特殊效果，用“ : ”来实现

属性	定义
a:link	选择所有未被访问的链接
a：visited	选择所有已经被访问过的链接
a：hover	选择鼠标指针位于其上的链接
a:active	选择活动链接（鼠标按下未弹起）

这个好好玩！

注意：按照 lvha的顺序！！！

focus伪类选择器

用于选取获得焦点的表单元素input：focus{样式声明}

选择器	作用	用法
后代选择器	用来选择后代元素	符号是空格 .nav a
子代选择器	选择最近一级元素	符号是大于号 .nav>p
并集选择器	选择某些相同样式的元素	符号是逗号 .nav,.header
链接伪类选择器	选择不同状态的链接	a:hover{}
:focus 选择器	选择获得光标的表单	input：focus