html和css中的一些选择器

1.常见的选择器
1.id选择器：
作用：通过元素的id属性值选中唯一的一个元素
语法：#id属性值{}
2.元素选择器：
作用：通过元素选择器可以选择页面中所有指定元素
语法：标签名{}

3.类选择器
我们可以为元素设置成class属性：
class属性和id属性相似，只不过class属性可以重复
拥有相同的class属性值的元素，我们说它们是一组元素
通过元素的class属性值选中一组元素
可以同时为一个标签设置成多个class属性值，多个值之间可以使空格隔开
语法：
class属性值{}

4.选择器分组（并集选择器）
通过选择器分组可以同时选择多个选择器对应的元素
语法：选择器1，选择器2，选择器n{}

5.通配选择器
它可以用来选择页面中的所有的元素
语法：*{}

6.复合选择器（交集选择器）
可以选择同时满足多个选择器的元素
语法：选择器1选择器2选择器n{}

2.子选择器和后代元素选择器

1.后代元素选择器：
作用：选中指定元素的指定后代元素
语法：祖先元素 后代元素{}

2.子元素选择器
作用：选中指定父元素的指定子元素
语法：父元素>子元素

元素之间的关系：
父元素：直接包含子元素的元素
子元素：直接被父元素包含的元素
祖先元素：直接或间接包含后代元素的元素，父元素也是祖先元素
后代元素：直接或间接被祖先元素包含的元素，子元素也是后代元素
兄弟元素：拥有相同父元素的元素叫做兄弟元素

3.伪选择器
伪类专门用来表示元素的一种特殊的状态
比如：获取过的超链接，普通的超链接，获取焦点的文本框
当我们需要为处在这些特殊状态的元素设置样式时，就可以用伪类

1 :link
表示普通的链接（就是没访问过的链接）

2 :visited
表示访问过的链接
浏览器通过历史纪录判断一个链接是否访问过
由于涉及到用户的隐私问题，所以使用visited伪类只能设置字体的颜色

3 :hover
伪类表示鼠标移入的状态

4 :active
表示的时超链接被点击的状态
4.伪元素选择器
1 :before表示元素最前边的部分
一般before都需要结合content这个模式一起使用
通过content可以向before或after的位置添加一些内容

2 :after表示元素的最后边的部分

5.属性选择器
属性选择器：
作用：可以根据元素中的属性或属性值来选取指定元素
语法：[属性名]选取含有指定属性的元素
[属性名=“属性值”]选取含有指定属性值的元素
[属性名^=“属性值”]选取属性值已指定内容开头的元素
[属性值$=“属性值”]选取属性值已指定内容结尾的元素
[属性值*=“属性值”]选取属性值以包含指定内容的元素