【前端】元素关系和选择器

1、id和class：必须以字母开头，可以有数字。在前端开发中，编写css时，一般用class选择器，尽量避免使用id选择器。

id选择器 #id 。 id是一个元素的唯一标识。

class选择器 .class 。class属性用来为一个元素分组，页面中相同的class属性值可以出现多个，并且一个元素可以拥有多个class.

2、标签中还支持一个属性，叫做title.

一个元素设置了title属性以后，当鼠标引入到元素上边时，title中的文字会显示出来。

3、元素之间的关系

（1）祖先元素：直接或间接被祖先元素包含的元素我们称为后代元素（子元素也是后代元素）。

（2）后代元素： 直接或间接包含后代元素的元素我们称为祖先元素（父元素也是祖先元素）。

（3）父元素：直接包含子元素的元素我们称为父元素。

（4）子元素： 直接被父元素包含的元素我们称为子元素。

（5）兄弟元素： 拥有相同的父元素的元素称为兄弟元素。

3、不同关系的选择器

（1）后代元素选择器：
- 作用：选择指定元素的指定后代元素
- 语法：祖先元素 后代元素
- 例子：div p{}
- 这样会选取所有的在div中的p元素

（2）子元素选择器：
- 作用：选择器指定元素的指定子元素
- 语法：父元素 > 子元素
- 例子：div > p{}
- 会选中所有的div的子元素p

（3）兄弟元素选择器：
- 作用：选择指定元素的后一个兄弟元素或者后边所有的兄弟元素
指定元素的后一个兄弟元素

            - 语法：前一个 + 后一个

- 例子：div + p{}
- 选中紧挨着div后边的p元素

指定指定元素后边的所有元素

• 语法：前一个 ~ 后一个
• 例子: div ~ p {}
• 选择div后边所有的p兄弟元素