CSS有哪些选择器

分为两部分,一部分是和层级无关的选择器,一部分是和层级有关的选择器.

和层级无关的选择器有6种.

第一种是ID选择器,使用方式是#加上ID名,这种选择器一个标签只能选择一个,且只能在HTML文档中出现一次.

第二种是类选择器,使用方式是.加上类名,这种选择器一个标签可以选择多个,并且可以被多个标签选中.

第三种是属性选择器,使用方式是标签名加上方括号,方括号指定属性,根据指定属性的不同情况,可分为三种:

第一种是简单属性选择器,仅仅指定属性名;

第二种是具体属性值选择器,既指定属性名,也指定属性值;

第三种是部分属性值选择器,在指定属性名和属性值的同时,使用特定的匹配规则进行匹配,如使用~=匹配包含指定词汇的元素.

额外补充一点:使用=进行匹配的时候,仅仅是单纯的字符串匹配,也就是说,类中词汇的顺序对于匹配结果是有影响的.

第四种是伪类选择器,使用方式是普通选择器加上:和伪类,伪类选择器用来添加一些选择器的特殊效果,如使用link伪类可以给未访问的a标签添加特殊效果.

第五种是元素选择器,使用方式是标签名后直接大括号,元素选择器会匹配文档中的每一个指定元素实例.

第六种是伪元素选择器,使用方式是两个冒号+伪元素名,伪元素选择器用于选择某些不存在的抽象元素,如first-letter选择器选择首字母,而首字母不是一个DOM元素.

和层级有关的选择器有3种.

第一种是后代选择器,使用方式是父元素加空格加后代元素,后代选择器会对指定元素的所有后代元素生效.

第二种是子代选择器,使用方式是父元素加大于号加子元素,子代元素只对指定元素的直接后代元素生效.

第三种是兄弟选择器,使用方式是元素加加号加兄弟元素,兄弟选择器只对指定元素相邻的下一个元素生效.

posted @ 2020-09-02 14:48  心流flux  阅读(386)  评论(0)    收藏  举报