前端学习第八课（CSS选择器优先级和盒子模型）

1.css复合选择器

CSS选择器分为 基础选择器 和 复合选择器 ，但是基础选择器不能满足我们实际开发中，快速高效的选择标签。

1.1后代选择器

后代选择器又称为包含选择器，用来选择元素或元素组的子孙后代，其写法就是把外层标签写在前面，内层标签写在后面，中间用空格分隔，先写父亲爷爷，在写儿子孙子。

例：

#app .header{

height: 100px;

width: 100px;

background-color: violet;

}

1.2子元素选择器

子元素选择器只能选择作为某元素子元素(亲儿子)的元素。

语法：

.class>h3{color:red;font-size:14px;}

这里的子 指的是 亲儿子 不包含孙子 重孙子之类。

例如：

 #app> .header {

            height: 100px;

            width: 100px;

            background-color: red;

        }

1.3交集选择器

交集选择器由两个选择器构成，找到的标签必须满足：既有标签一的特点，也有标签二的特点。

语法：

h1.header{属性：值；}

其中第一个为标签选择器，第二个为class选择器，两个选择器之间不能有空格，如h3.special。

1.4并集选择器

并集选择器（CSS选择器分组）是各个选择器通过,连接而成的，通常用于集体声明。

语法：

#p1,.hello,h1{属性：属性值}

各个选择器之间用，隔开任何形式的选择器都可以作为并集选择器的一部分。

例如：

#p1,.hello,h1{

            font-size: 50px;

            color: blueviolet;

        }

helloworld

helloworld

实现效果：

 1.5链接伪类选择器

用于向某些选择器添加特殊的效果。比如给链接添加特殊效果， 比如可以选择 第1个，第n个元素。

• a:link /* 未访问的链接 */

• a:visited /* 已访问的链接 */

• a:hover /* 鼠标移动到链接上 */

• a:active /* 选定的链接 */

:target伪类用来改变页面中锚链接URL所指向的ID元素的样式

:focus 伪类在元素获得焦点时向元素添加特殊的样式。  

:focus-within 是一个CSS 伪类 ，表示一个元素或其后代元素获得焦点。

:focus-visible当元素匹配伪类并且客户端(UA)的启发式引擎决定焦点应当可见(在这种情况下很多浏览器默认显示“焦点框”。)

1.6复合选择器总结 选择器作用特征使用情况隔开符号及用法后代选择器用来选择元素后代是选择所有的子孙后代较多符号是空格 .nav a子代选择器选择 最近一级元素只选亲儿子较少符号是> .nav>p交集选择器选择两个标签交集的部分既是 又是较少没有符号 p.one并集选择器选择某些相同样式的选择器可以用于集体声明较多符号是逗号 .nav, .header链接伪类选择器给链接更改状态较多重点记住 a{} 和 a:hover 实际开发的写法 2.标签显示模式（display）

HTML标签一般分为块标签和行内标签两种类型，它们也称块元素和行内元素。 我们网页的标签非常多，在不同地方会用到不同类型的标签，以便更好的完成我们的网页。

元素模式元素排列设置样式默认宽度包含块级元素一行只能放一个块级元素可以设置宽度高度容器的100%容器级可以包含任何标签行内元素一行可以放多个行内元素不可以直接设置宽度高度它本身内容的宽度容纳文本或则其他行内元素行内块元素一行放多个行内块元素可以设置宽度和高度它本身内容的宽度

 1）常见的块级元素：~、

、