CSS较为常用的选择器

CSS较为常用的选择器

标签选择器

语法：标签名 {}

作用：选中所有的标签名的样式

注意：由于常用标签就那么多，使用标签选择器时要慎重，防止影响到其他同类标签的样式

id选择器

语法：#id属性值{}

作用：选中对应id属性值的结构

注意：

1、不能以数字开头，不能重复，不为汉字

2、建议给外侧不重复的框架，使用id

class选择器

语法：.class属性值{}

作用：选中对应的class值的结构

注意：

1、和id选择器相似，但属性名可以重复

2、使用class属性值，最好配合关系选择器使用，减少冲突

通配选择器

语法：*{}

作用：选中当前html文件中所有的标签

注意：

1、一般情况下，用来设置公共样式的

2、用来去除默认样式

去除默认样式的原因：保证各个不同浏览器的兼容问题

复合选择器

交集选择器

语法：选择器1选择器2……{}

作用：同时符合选择器1和选择器2的结构

注意:

1、交集选择器中的标签选择器必须放在第一位

2、选择器优先级是合并计算的，但不会进位

并集选择器(群组选择器)

语法：选择器1,选择器2,选择器3……{}

作用：同时选中选择器1,选择器2,选择器3……对应的结构

注意：

1、分别计算选择器的优先级

关系选择器

父子选择器

语法：父元素>子元素{}

作用：通过父元素限制子元素

注意：

原则上，结构可以一层层往下找，但嵌套不宜太深

1、可读性比较差

2、修改维护也不方便

下一个兄弟选择器

语法：兄+下一个弟{}

作用：选中紧跟其后的下一个弟元素

兄弟选择器

语法：兄~弟{}

作用：兄后面所以的弟元素

祖先后代选择器

语法：祖先 后代{}(祖先元素和后代元素用空格隔开)

作用：通过祖先元素，选中所有的后代元素

注意：

1、祖先后代关系包括父子关系

2、能用子选择器不用后代选择器，子选择器的效率更高，因为检索的次数少

属性选择器

语法：[属性]

作用：选中含有指定属性的标签

语法：[属性=条件]

作用：选中指定属性，属性值满足条件的标签

语法：[属性^=条件]

作用：选中指定属性，并且属性值以条件开头的

语法：[属性$=条件]

作用：选中指定属性，并且属性值以条件结尾的

语法：[属性*=条件]

作用：选中指定属性，并且包含条件的

伪类选择器

概念：不是固定的类，是可变化的，可以视情况，应用在不同的结构上

常用的伪类选择器：顺序类(:first-child)、鼠标移入、鼠标点击、否定伪类

语法：以冒号开头 :伪类选择器名称

顺序类

:first-child 第一个元素

:list-child 最后一个元素

:nth-child() 选中的第n个元素

括号里的可填值：

n 选中所有的元素

2n/even 选中所有的偶数

2n+1/odd 选中所有的奇数

注意：一个父元素的所有子元素

:first-of-type 同类型第一个元素

:list-of-type 同类型最后一个元素

:nth-of-type() 同类型选中的第n个元素

括号里的可填值：

n 选中所有的元素

2n/even 选中所有的偶数

2n+1/odd 选中所有的奇数

注意：一个父元素的所有同类子元素

否定伪类

:not()除了选中元素

状态

a标签独有的:link :visited

超链接的四种伪类样式需要按照:link -> :visited ->:hover -> :active，否则可能会不生效

:link

未点击过的超链接状态

:visited

点击过后的超链接状态，由于隐私设置，只能设置超链接的字体颜色

:hover

鼠标移入的状态

:active

鼠标点击的状态