元素类型和选择器的分类

元素是什么？

在HTML,元素由三部分构成：

开始标签
内容
结束标签

标签是什么？

<p>开始标签
<dr>单标签
</ul>结束标签

元素/标签是用途是什么？

用途：标签用于描述网页内容。通过标签告诉浏览器：

我是一个标签
我是一个段落
我是一个列表
我是一个表格
我是第一张图片
我是一个超链接
我是一个导航
我是一个页头
我是一个页尾

设置HTML标签的人叫什么

蒂姆·伯纳斯·李（万维网之父）

元素类型

lnline：把元素显示为行内元素，
block：把元素显示块元素
inline-block：把显示为行内块元素
None：把元素显示为无
List-item：列表元素
Table：表格元素
Flex：弹性元素
Grids：网格元素

行内元素和块元素的区别

共三点
1.块元素独占一行，可以设置宽高，自上而下排列
2.行内元素不会独占一行，不能设置宽高，自左而右

选择器

1.选择器是什么？

选择器就是选择元素的方式。
选择元素的方式多样化造成选择器的多样化

选择器的分类

1.全局选择器

全局选择器就是通配符，通配符用于选择器所有元素
通配符星号

2.基础选择器

1.元素选择器：选择全部标签
2.id选择器：选择一个标签
3.class选择器：选择一组标签

3.属性选择器

1.属性选择器：通过标签的属性匹配元素
2.所有的属性选择器都以方括号开头的

<style>
        /* 属性选择器 */
        [title]{
            color: aqua;
        }
        /* 属性值选择器 */
        [title="一级标题"]{
            color: blue;
        }
        /* 属性值开头选择器 */
        [href^="http"]::after{
        content: '666'; 
        }
        /* 属性值结尾选择器 */
        [href$=".net"]::after{
        content: '77'; 
        }
</style>

[target]{ /*选择带有 target 属性的所有元素。*/
样式
}

2.[属性=属性值]

[target="_blank]{ /*选择带有 target="_blank 属性的所有元素。*/
样式
}

3.[属性^=属性值]

a[href^="https"]{ /*选择其 href 属性值以"https" 。*/
样式
}

4.[属性$=属性值]

a[[href$=net]::after]{ /*选择带有 [href$=net]::after 属性的所有元素。*/
样式
}

[attribute]     [target]    选择带有 target 属性的所有元素。
[attribute=value]   [target=_blank]     选择带有 target="_blank" 属性的所有元素。
[attribute~=value]  [title~=flower]     选择带有包含 "flower" 一词的 title 属性的所有元素。
[attribute|=value]  [lang|=en]  选择带有以 "en" 开头的 lang 属性的所有元素。
[attribute^=value]  a[href^="https"]    选择其 href 属性值以 "https" 开头的每个 <a> 元素。
[attribute$=value]  a[href$=".pdf"]     选择其 href 属性值以 ".pdf" 结尾的每个 <a> 元素。
[attribute*=value]  a[href*="w3school"]     选择其 href 属性值包含子串 "w3school" 的每个 <a> 元素。

4.伪类选择器

伪类选择器的标志就是单冒号
1. :link ：link 匹配未点击常态的超链接
1. :hover ：hover 匹配悬浮状态的元素
1. :active ：匹配激活状态（鼠标按下）的元素
1. :visited ：visited 匹配已访问状态（抬起鼠标）的超链接
1. :last-chlid() ：匹配第N个子元素
1. :nth-child() ：匹配第一个子元素
1. :first-child() ：匹配最后一个子元素
1. :root ：匹配根元素（根元素：html 或 xml）
1. :focus ：匹配焦点元素（部分元素拥有焦点元素：表单标签，超链接）
1. :not() ：匹配不是某个元素里的某一个元素
1. :checked ：匹配选中的元素

5.伪元素选择器

1. ::before
1. ::after
1. ::first-letter ：选中段落第一段第一个首字母
1. ::flrst-line ：选中第一行
1. ::s

6.组合选择器

组合选择器就是把上面这五类组合在一起使用。

1.分组选择器：使用逗号组合 (匹配逗号分隔的每一项) 分组选择器，有逗号隔开应用相同的样式
2.后代选择器：使用空格组合 (匹配当前元素的所有后代元素)
3.子元素选择器：使用 > 组合 (匹配当前元素的所有兄弟子元素)
4.相邻兄弟选择器：使用 + 组合 (匹配当前选择相邻的兄弟元素)