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

2024-10-19 08:44:40

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
可以用首字母快速生成样式

复合选择器

后代选择器

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

ul li{

    width: 300px;

}

注意：

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

<ul>

    <li>

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

    </li>

</ul>

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

子选择器

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

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

注意：

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

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

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

注意：

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

div,

p,

.pig li{样式声明}

伪类选择器

链接伪类选择器

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

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

这个好好玩！

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

focus伪类选择器

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

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

最新文章

热门文章