- 作者:陈大鱼头
- github: KRISACHAN
在上一篇的HTML的标签与语意中简单的介绍了HTML标签跟其一些属性,向各位坚持看到这里的亲表示真诚的感谢。本篇主要会分享一些跟**CSS选择器(CSS Selectors)**相关的内容,有兴趣的请继续往下看。
CSS选择器(CSS Selectors)
啥叫选择器?简单来说就是通过一些定义来选中特定的HTML标签。biu~
首先我们来看看选择器的分类:
基本选择器
-
类型选择器:简单来说就是直接选择HTML标签(不带
<>
的那种),例如:html {width: 100%;}
; -
类选择器:就是HTML标签中class属性的值(但就是给每个值加上了
.
),例如:.div {width: 100%;}
; -
ID选择器:就是HTML标签中id属性的值(但就是给每个值加上了
#
,但是要注意,一个文档中的ID
应是唯一的,但能不能写多个?其实也是可以,只是不建议这么做,至于为什么,后面的文章会进行讲解); -
通用选择器:写个*****,啥HTML标签都选中了。例如:
* {width: 100%;}
-
属性选择器:就是根据HTML标签里的属性选择,语法大概如下:
[attr] [attr=value] [attr~=value] [attr|=value] [attr^=value] [attr$=value] [attr*=value]
鱼头注:上面的~
、|
、^
、$
跟正则表达式的语法相似,对正则表达式语法不熟的可以看鱼头的github
组合选择器
- 空格:后代选择器,例如:
.a .b
。在例子中选中的就是.a
里面的所有带有.b
的节点; - >:子代选择器,例如:
.a > .b
。在例子中选中的就是.a
里面的所有带有.b
的子节点; - ~:后继选择器,例如:
.a ~ .b
。在例子中选中的就是在.a
后面的.b
; - +:直接后继选择器,例如:
.a + .b
。在例子中选中的就是在.a
后面下一个.b
; - |: 命名空间选择器,例如:
.a | .b
。在例子中选中的就是属于.a
的.b
,跟.a .b
一样,属于Selectors Leve 3的内容。 - ||:列选择器,例如:
.a || .b
。在例子中选中的就是由.a
表示的列的网格/表中的单元格的.b
,属于Selectors Level 4
的内容。
伪类与伪元素
-
伪类:伪类是添加到选择器的关键字,指定要选择的元素的特殊状态。
// 语法 selector:pseudo-class { property: value; }
-
伪元素:伪元素是一个附加至选择器末的关键词,允许你对被选择元素的特定部分修改样式。一个选择器中只能使用一个伪元素。
// 语法 selector::pseudo-element { property: value; }
其实掌握了CSS的选择器之后,是可以根据合理的排列组合来实现一些比较有趣的效果的,当然这些效果可能对实际业务逻辑没什么帮助,甚至不一定能用,但是也可以给我们在解决问题的时候提供一个方向。就例如以下DEMO:一个用纯CSS实现的表单验证。
源码在:codepen,你也可以把以下代码复制粘贴,在浏览器查看。
<style>
:root {
--error-color: red;