关于css选择器的总结

关于css选择器的总结

css选择器大体上可以分为三种分别是:简单选择器、属性选择器还有伪类选择器。
(一)简单选择器中可以通过三种分类:id、class、type,这三种选择器分别是按重要性递减来排序,id选择器可以视为身份证,class和type都可以当成分类,这就说明id可以当成唯一标识符,id用#来开始展示样式表。

在相同的分量时:在相同规则时,后加载的会覆盖先加载的规则


(二)属性选择器是指根据元素属性的取值来进行属性选择,以下是几个常见的语法和相应的使用说明

1. 基本语法
2.1.1E [ attr ] { sRules }
2.1.2E [ attr = value ] { sRules }
2.1.3E [ attr ~= value ] { sRules }
2.1.4E [ attr |= value ] { sRules }
2.1.5E [ attr $= value ] { sRules }

2. 使用说明
2.2.1选择具有 attr 属性的 E
2.2.2选择具有 attr 属性且属性值等于 value 的 E
2.2.3选择具有 attr 属性且属性值为一用空格分隔的字词列表,其中一个等于 value 的 E 。这里的 value 不能包含空格
2.2.4选择具有 attr 属性且属性值为一用连字符分隔的字词列表,由 value 开始的 E
2.2.5选择具有 attr 属性且属性值为va
lue结尾的元素
(三)伪类选择器包含:UI元素状态伪类、结构性伪类和目标伪类还有否定伪类

UI元素状态伪类:

E:checked : {attribute}是指匹配所有用户界面(form表单)中处于选中状态的元素E

E:enabled : {attribute}是指匹配所有用户界面(form表单)中处于可用状态的E元素

E:disabled : {attribute}是指匹配所有用户界面(form表单)中处于不可用状态的E元素

E::selection : {attribute}是指匹配E元素中被用户选中或处于高亮状态的部分

结构性伪类:(由于结构性伪类比较多,这里只是描写其中比较常见的)

E:last-child : {attribute}是指匹配父元素中最后一个E元素(同理first-child)

E:nth-child(n) : {attribute}是指匹配父元素中的第n个子元素E

E:empty : {attribute}是指匹配没有任何子元素(包括text节点)的元素E

E:root : {attribute}是指匹配文档的根元素。在HTML中,根元素永远是HTML

注:由于是刚开始学习,哪里写的不好或者写错了,还请各位看官老爷多多包涵,能提点斧正我的错误。

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值