本文主要内容

1.html导入css的三种方式

分为内联方式、嵌入方式、外联方式。

2.css的选择器

分为id选择器、class选择器、属性选择器、伪类选择器、标签选择器、伪元素选择器、通配符选择器。

html导入css的三种方式

1.内联方式：直接在元素上面添加style属性，就是内联使用css样式

内联样式

2.嵌入方式: 在html中的head里面引入style标签，写css的样式，称为嵌入方式引入css样式。

嵌入样式

3.外联方式：通过在head中使用link引入外部样式。

引入外部css样式

css的选择器

选择器是有优先级的，选择器优先级的顺序是：

!important > id选择器 > class选择器 = 伪类选择器 = 属性选择器 > 标签选择器 = 伪元素选择器 > 通配符

1000        > 100          >  10                = 10              = 10              > 1                  = 1                    > 0

1.id选择器：元素上声明为：id="id_name", css中使用#id_name

id选择器

2. class 选择器：元素上声明为：class="class_name", css中使用 .class_name

class选择器

3.标签选择器: 实际上是对html标签，填充css样式，在css中直接使用标签名，例如：span

标签选择器

4.分组选择器：应用到这多个选择器所引用的元素，例如，下图中 h1,p 是对凡是这两个标签的元素都加上yellow.

分组选择器

5.后代选择器：下图的意思是 所声明的样式仅对h2下面的所有p生效。

后代选择器

6.属性选择器：是指样式仅对持有特定属性的元素生效。下图的例子是指，对a标签中，有href的元素，添加color样式。

属性选择器

7.子元素选择器：他和后代选择器的主要区别是：后代选择器是应用到所有的后代，而子元素选择器只影响直接后代。下图中 h1 > strong  样式只对h1中的第一个strong标签生效。

子元素选择器

8.相邻选择器：h3+p: 只对h3相邻的第一个p标签生效。

相邻选择器

9.CSS 伪类用于向某些选择器添加特殊的效果。

伪类选择器 伪类集合

10.伪元素选择器：伪元素用于向某些选择器设置特殊效果

伪元素选择器 伪元素选择器集合

参考文档

W3S, 本文GitHut代码库