CSS选择器整理

最新推荐文章于 2024-04-22 16:58:34 发布

weixin_49697978

最新推荐文章于 2024-04-22 16:58:34 发布

阅读量127

点赞数

文章标签： css html

本文链接：https://blog.csdn.net/weixin_49697978/article/details/107750057

版权

根据w3c定义：在css中，选择器是一种模式，用于选择HTML中需要添加的样式的元素
css选择器分为五个大类：
一：基础选择器：
1.元素选择器：
书写格式：标签{声明块} 适用范围：页面内所有相同元素都会被选中

2.类选择器：
书写格式：.类名{声明块} 适用范围：选中所有class属性值相同的标签

3.ID选择器
预留给JS 书写格式：id（属性）=" #自定义命名" 在同一个页面中，元素的id值必须唯一

4.组合选择器/并集选择器/并列选择器
书写格式：p，span{ 声明块 } 该选择器在发生声明冲突，比较特殊性时元素应分开计算 p{ } span{ }

5.通配符选择器: 选择全部元素不建议使用
书写格式：*{声明块}

二：层次选择器：
1.后代选择器
书写格式：父元素空格子元素例：main div{ }

2.子级选择器
书写格式：父元素>子元素例：header>nav{ }

3.兄弟选择器（适用：相邻的兄弟）
书写格式：兄弟元素A+兄弟元素B 例：p+div{ } 注：AB两个元素之间没有其他任何标签

4.通用选择器（不相邻兄弟）
书写格式：兄弟元素A～兄弟元素B 例：p~div{ } 注：选中A元素后面所有的兄弟元素B

三.伪类选择器（html中不需添加任何属性）是元素什么时候用：不想在HTML中添加东西
1.结构伪类选择器：

: hover 鼠标上移样式
：nth-child （适用场景：当元素的标签名相同的情况下数字代表父元素里的第几个子元素，将所有子元素计算在内） odd/2n+1代表奇数， even /2n代表偶数选中前三个或几个方式 -n+3)
：nth-of-type（类型）（数字为选中子元素第几个适用场景：兄弟元素的标签名可以不同）
：nth-last-child （选中倒数第几个元素）
：last-child 选中最后一个元素
：first-child 选中第一个元素

2.否定伪类选择器：not（）：否定元素
p：not(:nth-child(3)) 除了第三个不被选中其余全被选中添加样式
p:not(:nth-child(3)):not(:nth-child(4)) 除了第三个和第四个不被选中其余全被选中添加样式

3.动态伪类选择器： 有四个状态

：link 未访问（没有点击过）
：hover 悬停（鼠标移上去的状态）（给样式告诉用户现在鼠标在那个区域客户体验度）其他元素可以使用
：active 点击时（点击时出现的样式）其他元素可以使用
：visited 已经访问（已经点击）
书写顺序；：link/:visited/:hover/:active
或者：visited/:link/:hover/:active

link 与 visited 只有a标签可以使用
hover 与 active 其他元素也可以使用

判断是否有无点击过 取决于href里的值

扩展：另一个动态伪类选择器：focus 获取焦点当a标签被激活时，即获取到焦点框（键盘tab键）

四：伪元素选择器
（html中不需添加任何属性）（可以单冒号也可以双冒号区分伪类和伪元素选择器伪类选择器只有那几种）

五：属性选择器
（作用：通过属性名找标签基本作用于表单元素）
书写格式：元素名[属性名=“属性值”] 例： p[class=“one”]
表示以命名属性名开头的属性值：
书写格式:元素名[name^=“开头部分属性值”] p[title^=“q”]

表示以命名属性名结束的属性值：
书写格式:元素名[name $ =“结束的部分属性值”] p[title$=“qbgb”]

关注