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）

2. 子选择器

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

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

注意：

1. 元素1和元素2用大于号隔开
2. 元素1是父级，元素2是子级，最终选择元素2

3. 并集选择器

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

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

注意：

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

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

4. 伪类选择器

链接伪类选择器

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

这个好好玩！

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

5. focus伪类选择器

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