趣学前端 | 综合一波CSS选择器的用法

2024-04-05 21:28

本文主要是介绍趣学前端 | 综合一波CSS选择器的用法,希望对大家解决编程问题提供一定的参考价值,需要的开发者们随着小编来一起学习吧!

背景

最近睡前习惯翻会书,重温了《HTML5与CSS 3权威指南》。这本书,分上下两册,之前读完了上册,下册基本没翻过。为了对得起花过的每一分钱,决定拾起来近期读一读。

CSS 选择器

在CSS3中,提倡使用选择器来将样式与元素直接绑定起来,这样的话,在样式表中什么样式与什么元素相匹配变得一目了然 ,修改起来也很方便。

可能是秋季的清爽,又或者藕粉的甜蜜,感觉自己开了「神行千里」的buff,这章读起来比绸缎还丝滑。

属性选择器

类型

含义

效果展示

[att*=val]

如果元素用att表示的属性的属性值中包含用val指定的字符,则该元素使用这个样式。

[att^=val]

如果元素用att表示的属性的属性值的开头字符为用val指定的字符,则该元素使用这个样式。

[att$=val]

如果元素用att表示的属性的属性值的结尾字符为用val指定的字符,则该元素使用这个样式。

效果实现

码上掘金

结构性伪类选择器

类型

含义

效果展示

root选择器

root选择器将样式绑定到页面的根元素中。

root选择器有个妙用,就是定义公共样式,比如一些公共的文字不同颜色、背景不同颜色等。

not选择器

如果想对某个结构元素使用样式,但是想排除这个结构元素下面的子结构元素,让它不使用这个样式,可以使用not选择器。

empty选择器

使用empty选择器来指定当元素中内容为空白时使用的样式。

target选择器

使用target选择器来对页面中某个target元素(该元素的id被当作页面中的超链接来使用)指定样式,该样式只在用户点击了页面中的超链接,并且跳转到target元素后起作用。

效果实现

码上掘金

有趣的伪类选择器

类型

含义

效果展示

E:valid

用来指定,当元素内容通过HTML5通过使用元素的诸如required、pattern等属性所指定的检查或元素内容符合元素的规定格式时的样式。

E:invalid

用来指定,当元素内容不能通过HTML5通过使用元素的诸如required、pattern等属性所指定的检查或元素内容符合元素的规定格式时的样式。

和E:valid的效果合并

E:required

用来指定允许使用required属性,且已经指定了required属性的input元素、select元素以及textarea元素的样式。

E:optional

用来指定允许使用required属性,且已经未指定required属性的input元素、select元素以及textarea元素的样式。

和E:required的效果合并

效果实现

码上掘金

总结

通过选择器,可以实现复杂的指定,减少样式的代码书写量,今天也特别有收获的一天。

CSS样式真有趣,光写样式我感觉自己能写一天。

偶尔翻出来珍藏的技术书,读几章,有了新想法的感觉真不赖。

关于作者

非职业「传道授业解惑」的程序媛叶一一,欢迎来稀土掘金关注我。

作者:叶一一

作者简介:「趣学前端」、「CSS畅想」系列作者,华夏美食、国漫、古风重度爱好者,刑侦、无限流小说初级玩家。

文章来源:稀土掘金

著作权归作者所有。商业转载请联系作者获得授权,非商业转载请注明出处。

这篇关于趣学前端 | 综合一波CSS选择器的用法的文章就介绍到这儿,希望我们推荐的文章对编程师们有所帮助!



http://www.chinasem.cn/article/878190

相关文章

在React中引入Tailwind CSS的完整指南

《在React中引入TailwindCSS的完整指南》在现代前端开发中,使用UI库可以显著提高开发效率,TailwindCSS是一个功能类优先的CSS框架,本文将详细介绍如何在Reac... 目录前言一、Tailwind css 简介二、创建 React 项目使用 Create React App 创建项目

vue使用docxtemplater导出word

《vue使用docxtemplater导出word》docxtemplater是一种邮件合并工具,以编程方式使用并处理条件、循环,并且可以扩展以插入任何内容,下面我们来看看如何使用docxtempl... 目录docxtemplatervue使用docxtemplater导出word安装常用语法 封装导出方

揭秘Python Socket网络编程的7种硬核用法

《揭秘PythonSocket网络编程的7种硬核用法》Socket不仅能做聊天室,还能干一大堆硬核操作,这篇文章就带大家看看Python网络编程的7种超实用玩法,感兴趣的小伙伴可以跟随小编一起... 目录1.端口扫描器:探测开放端口2.简易 HTTP 服务器:10 秒搭个网页3.局域网游戏:多人联机对战4.

MyBatis 动态 SQL 优化之标签的实战与技巧(常见用法)

《MyBatis动态SQL优化之标签的实战与技巧(常见用法)》本文通过详细的示例和实际应用场景,介绍了如何有效利用这些标签来优化MyBatis配置,提升开发效率,确保SQL的高效执行和安全性,感... 目录动态SQL详解一、动态SQL的核心概念1.1 什么是动态SQL?1.2 动态SQL的优点1.3 动态S

java之Objects.nonNull用法代码解读

《java之Objects.nonNull用法代码解读》:本文主要介绍java之Objects.nonNull用法代码,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐... 目录Java之Objects.nonwww.chinasem.cnNull用法代码Objects.nonN

Vue中组件之间传值的六种方式(完整版)

《Vue中组件之间传值的六种方式(完整版)》组件是vue.js最强大的功能之一,而组件实例的作用域是相互独立的,这就意味着不同组件之间的数据无法相互引用,针对不同的使用场景,如何选择行之有效的通信方式... 目录前言方法一、props/$emit1.父组件向子组件传值2.子组件向父组件传值(通过事件形式)方

JavaScript Array.from及其相关用法详解(示例演示)

《JavaScriptArray.from及其相关用法详解(示例演示)》Array.from方法是ES6引入的一个静态方法,用于从类数组对象或可迭代对象创建一个新的数组实例,本文将详细介绍Array... 目录一、Array.from 方法概述1. 方法介绍2. 示例演示二、结合实际场景的使用1. 初始化二

css中的 vertical-align与line-height作用详解

《css中的vertical-align与line-height作用详解》:本文主要介绍了CSS中的`vertical-align`和`line-height`属性,包括它们的作用、适用元素、属性值、常见使用场景、常见问题及解决方案,详细内容请阅读本文,希望能对你有所帮助... 目录vertical-ali

一文带你了解SpringBoot中启动参数的各种用法

《一文带你了解SpringBoot中启动参数的各种用法》在使用SpringBoot开发应用时,我们通常需要根据不同的环境或特定需求调整启动参数,那么,SpringBoot提供了哪些方式来配置这些启动参... 目录一、启动参数的常见传递方式二、通过命令行参数传递启动参数三、使用 application.pro

关于@RequestParam的主要用法详解

《关于@RequestParam的主要用法详解》:本文主要介绍关于@RequestParam的主要用法,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教... 目录1. 基本用法2. 默认值3. 可选参数4. 绑定到对象5. 绑定到集合或数组6. 绑定到 Map7. 处理复杂类