CSS三种引入方式，选择器，伪类

CSS三种引入方式，选择器，伪类

2. ——CSS有三种不同的引入方式

   行内样式表，内部样式表，外部样式表。

   ​ 行内样式是通过style属性引入CSS样式

   eg：

   ​ 内部样式表是在style标签里面写CSS样式

   eg：

   ​ 外部样式表是将CSS代码保存到外部的CSS的文件里面，HTML文件通过link标签引用该CSS样式表。

   eg：

   ——CSS选择器

   选择器
   	1、CSS样式的语法格式：
   	p {color:red;} 元素选择器(元素选择器是最简单的选择器)
   	选择器 属性 值
   	根据这个结构我们可以扩展：
   	例如：p{color:red;font-size:14pt;font-weight:bold;}
   	h1,p,a{color:blue;font-size:14pt;}//组合选择器
   	2、所有用于选择特定元素的选择器分三种：
   	上下文选择器(迭代选择器)：基于祖先或同胞元素选择一个元素
   	ID和类选择器：基于id#和class的属性值进行选择元素。
   	属性选择器：基于属性的有无和特征进行选择。
   	①上下文选择器：
   	上下文选择器的语法格式：标签1 标签2{属性:值;}
   	//注意：组合选择器和上下文选择器的区别，组合选择器以逗号隔开，
   	上下文选择器以空格隔开
   	②特殊的上下文选择器
   	子选择器> :
   	语法格式:标签1>标签2 解释说明：标签1和标签2是父子关系。
   	紧邻同胞选择器+ :
   	语法格式:标签1+标签2 解释说明：标签2紧跟同胞标签1的后面。
   	一般同胞选择器~ :
   	语法格式:标签1~标签2 解释说明:CSS3新增的兄弟选择器，标签1、2是同胞即可，不一定紧挨着。
   	通用选择符* : * .
   	解释说明:通用选择器*是一个通配符，匹配任何元素。
   	③id选择器和class选择器
   	id选择器：语法格式: #idValue
   	class选择器：语法格式: .classValue
   	④属性选择器
   	属性名选择器：
   	语法格式：标签名[属性名]
   	属性值选择器：
   	语法格式：标签名[属性名=“属性值”]

在 CSS 中，选择器是选取需设置样式的元素的模式。

下面我们介绍几种常用选择器:

1、 元素选择器:通过选择html标签设置css样式
2、 类选择器：通过设置class类设置css样式

注意：class命名不能以数字开头

3、 ID选择器：通过设置ID来设置css样式

4、 后代选择器：

写法：div p

5、 直接后代选择器

写法：div>p

6、 相邻兄弟选择器

写法;div+p

7、 兄弟选择器

写法：div~p

8、 结构选择器

常用结构选择器：div p:nth-child(2){

} 选择其父元素（div）的第二个子元素p标签

常用结构选择器：div p:nth-of-type(4){

} 选择其父元素（div）中p元素的第四个元素

属性选择器

写法：属性选择器以[attribute]包裹

类选择器在CSS样式中是以 . 开头的。

——CSS伪类

伪类
	<!–伪类：伪类这个叫法源自于它们跟类相似，但实际上并
	没有类会附加到标记中的标签上。
	伪类分为两种(以及新增的伪类选择器)：
	UI伪类：会在HTML元素处于某种状态时(例如：鼠标指针位于连接上)，
	为该元素应用CSS样式。hover
	结构化伪类：会在标记中存在某种结构上的关系时(
	例如：某元素是一组元素中的第一个或最后一个)，
	为该元素应用CSS样式。
	:not和:target(CSS3新增的两个特殊的伪类选择器)
	UI元素状态伪类选择器有如下几个：
	Selector:link ：匹配Selector选择器且未被访问前的元素(通常只能是超链接)。
	Selector:visited ：匹配Selector选择器且已被访问前的元素(通常只能是超链接)。
	Selector:hover ：匹配Selector选择器且处于鼠标悬停状态的元素。
	Selector:active ：匹配Selector选择器且处于被用户激活(在鼠标点击与释放之间的状态)
	的状态的元素。
	Selector:focus ：匹配Selector选择器且已得到焦点的元素。
	Selector:enabled ：匹配Selector选择器且当前用于处于不可用状态的元素。
	Selector:disabled:匹配Selector选择器且当前处于不可用状态的元素。
	Selector：checked :匹配Selector选择器且当前处于选中状态的元素。
	Selector：default :匹配Selector选择器且页面处于打开时选中状态的元素
	(即使当前没有被选中亦可)。
	Selector：read-only :匹配Selector选择器且当前处于只读状态的元素
	Selector：read-wirte :匹配Selector选择器且当前处于读写状态的元素
	Selector：selection :匹配Selector选择器的元素中当前被选中的内容。
	特别提示：1、一个冒号(:)表示伪类，两个冒号(::)表示CSS3新增的伪元素。
	2、上面的Selcotor选择器可以省略，如果省略则可以匹配处于某种
	状态下的多个元素。

结构化伪类–>
	<!–结构化伪类选择器如下：
	Selector:root :匹配文档的根元素。在HTML文档中，根元素永远是元素
	Selector:first-child : 表示一组同胞元素中的第一个元素。
	Selector:last-child : 表示一组同胞元素中的最后一个元素。
	Selector:nth-child(n) : 表示一组同胞元素中的第n个元素。(顺数第n个)
	Selector:nth-last-child(n) : 表示一组同胞元素中的倒数第n个元素。(倒数第n个)
	Selector:only-child : 匹配符合Selctor选择器，而且必须只有一个子节点。
	还有其他的几个结构化选择器：和上面的类似
	Selector:first-of-type
	Selector:last-of-type
	Selector:nth-of-type(n)
	Selector:nth-last-of-type(n)
	Selector:empty

伪元素：就是在你的文档中若有实无的元素.
	(解释说明：在HTML代码中没有，我们可以通过css的样式设置伪元素，
	让它显示给我们看到)
	伪元素：
	::first-letter 伪元素 第一个字母
	::first-line 伪元素 第一行
	::before 和::after 伪元素

	<!–CSS3新增的两个特殊的伪类选择器
	Selector1:not(Selector2) 匹配Selector1，但不匹配Selector2，
	相当于从Selector1中减去Selector2
	Selector:target (target 目标)说明：如果用户点击一个指向页面中其他元素的链接，
	则那个元素就是目标(target)