HTML基本理解day9 | 青训营笔记

46 阅读2分钟

这是我参与「第四届青训营 」笔记创作活动的的第9天

1.2子选择器

子元素选择器(子选择器)只能选择作为某元素的最近一级子元素。简单理解就是选亲儿子元素。 语法:

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

上述语法表示示选择元素1里面的所有直接后代(子元素)元素2 例如:

div>p{样式声明} /* 选择div里面所有最近一级p标签元素 */

元素1和元素2中间用大于号隔开

元素1是父级,元素2是子级,最终选择的是元素2

元素2必须是亲儿子,其孙子、重孙之类都不归他管你也可以叫他亲儿子选择器

1.3并集选择器(重要)

并集选择器可以选择多组标签,同时为他们定义相同的样式。通常用于集体声明 并集选择器是各选择器通过英文逗号(,)连接而成,任何形式的选择器都可以作为并集选择器的一部分。语法:

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

上述语法表示选择元素1和元素2。
例如:

ul,div{样式声明 } /* 选择ul和 div标签元素 */

元素1和元素2中间用逗号隔开,逗号可以理解为和的意思,并集选择器通常用干集体声明

1.4伪类选择器

伪类选择器用于向某些选择器添加特殊的效果,比如给链接添加特殊效果,或选择第1个,第n个元素。 伪类选择器书写最大的特点是用冒号(:)表示,比如:hover、:first-child。

1.5链接伪类选择器

image.png 链接伪类选择器注意事项 1.为了确保生效,请按照 LYHA的循顺序声明:

link-:visited-:hover-:active

2.记忆法:lovehate或者lv包包hao。

3.因为a链接在浏览器中具有默认样式,所以我们实际工作中都需要给链接单独指定样式。

1.6focus伪类选择器

:focus 伪类选择器用于选取获得焦点的表单元素 焦点就是光标,一般情况< input>类表单元素才能获取,因此这个选择器也主要针对于表单元素来说。

input:focus {
background-color:yellow
}

1.7复合选择器

image.png

CSS的元素显示模式

作用:网页的标签非常多,在不同地方会用到不同类型的标签,了解他们的特点可以更好的布局我们的网页。

元素显示模式就是元素(标签)以什么方式进行显示,比如

自己占一行,比如一行可以放多个< span> HTML元素一般分)为块元素和行内元素两种类型。