【css复合选择器】

css的学习

有关emmet语法
Emmet语法的前身是HTML结构语法，来提高HTML/css编写速度
1）快速生成HTML结构语法
2）快速生成css样式语法

一、css的复合选择器的介绍
1.什么是css的复合选择器

• 在css中，可以根据选择器的类型把选择器分为基础选择器和复合选择器，复合选择器是建立在基础选择器之上的，对基本选择器进行组合形成。

2.复合选择器的特点

• 复合选择器可以更准确，更高效的选择目标元素（标签）

• 复合选择器是由两个或多个基础选择器，通过不同的方式组合而成

• 常用的复合选择器包括：后代选择器、子元素选择器、并集选择器、伪类选择器等。

二、复合选择器的分类介绍
1.后代选择器（重要）
后代选择器又称包含选择器，可以选择父元素里面的子元素

    元素1  元素2{  样式说明  }

• 元素1和元素2可以是任何的基础选择器

• 元素1是父级，元素2为子级（比喻来说可以指儿子孙子等）

• 元素1和元素2之间用空格隔开

2.子选择器（重要）
子选择器只能选择最近一级选择器

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

• 元素1是父级，元素2是子级（这里的子级只能是亲儿子）
• 元素1和元素2之间用大于号>连接

3.并集选择器（重要）
并集选择器可以选择多组标签，并且定义相同的样式。通常用于集体声明。并集选择器是各选择器通过英文逗号连接而成，任何形式的选择器都可以作为并集选择器的一部分。

   元素1，元素2 { 样式说明 }

• 元素1和元素2用逗号连接

• 最后一组不需要加逗号

• -元素1和元素2之间为兄弟关系

4.伪类选择器
伪类选择器用于向某些选择器添加特殊的效果，或选择第一个，第n个元素。
伪类选择器书写通常用（：）表示，比如：hover, :first-child
伪类选择器包括链接伪类和结构伪类
(1)链接伪类选择器

	 a:link       /选择所有未被访问的/
	 a:visited     /选择所有已被访问的/
	 a:hover       /选择鼠标指针位于其上的链接/
	 a:active      /选择活动链接/

注意事项：
按顺序进行书写，不可随意更换顺序。因为链接在浏览器中具有默认样式，需要单独指向。
（2）focus伪类选择器
focus伪类选择器用于选取获得焦点的表单元素
焦点就是光标，一般情况下< input>类表单元素才会获取，即针对表单元素

  input： focus {  background-color:yellow }

三、css的元素显示模式转换

显示模式：元素标签以什么方式进行显示

1.HTML元素：块元素和行内元素
(1)块元素
常见的< h1>~< h6>、< p>、< div>、< ul>、< ol>、< li>等
特点:

• 独占一行，是一个容器及盒子
• 可以存放行内或者块级元素，文字类元素，不能存放其他块级元素 div是一个典型的块元素

（2）行内元素
常见的< a>、< strong>、< em>、< i>、< del>、< s>、< ins>、< span>等
特点：

• 相邻行列元素在一行上显示多个

• 链接中不在放其他的来来连接

（3）行内块元素
在行内元素有几个特殊的标签< img/>、< input/>、< td>
同时具有块元素和行内元素的特点
特点：

• 高度和行距可控制

• 和相邻元素在一行，之间有空白缝隙

2.元素显示模式的转换
显示模式的转换：一个模式的元素需要另外一种模式的特性

• 转换为块元素 ：display:black

• 转换为行内元素 ：display:inline

• 转换为行内块元素 ：display:inline-black

a {  display:black ;}