笔记|使用CSS选择器(其他伪类选择器)

简介: 其他伪类选择器

1.使用否定选择器

否定选择器可以对任意选择器取反。

image.png

<style type="text/css">
a:not([href*="apress"]) {
border: thin black solid;
padding: 4px;
}
</style>


⚠️这个选择器匹配子元素没有包含apress字符串的href元素的所有元素。


2.使用:empty 选择器

:empty 选择器匹配没有定义任何子元素的元素。

image.png


3.使用:lang选择器

lang选择器匹配基于lang全局属性值的元素。

image.png

<style type="text/css">
:lang(en) {
border: thin black solid;
padding: 4px;
}
</style>


该选择器匹配具有lang属性代表其内容采用英语表达的元素。


4.使用:target选择器

:target选择器匹配URL片段标识符指向的元素。

image.png

<style type="text/css">
:target {
border: thin black solid;
padding: 4px;
color:red;
}
</style>


小结:

使用选择器可以匹配大量元素,组合多种选择器也能将目标元素锁定为HTML文档的特定部分。


目录
相关文章
|
19天前
|
前端开发 JavaScript
【CSS】选择器
【CSS】选择器
|
29天前
|
前端开发
CSS3选择器
【8月更文挑战第23天】CSS3选择器。
26 1
|
30天前
|
前端开发
CSS中的层级选择器&伪类选择器和伪元素选择器
CSS中的层级选择器&伪类选择器和伪元素选择器
|
1月前
|
前端开发
CSS——通过伪类来自定义四个角边框
CSS——通过伪类来自定义四个角边框
52 3
|
1月前
|
前端开发
HTML+CSS基础知识(2)选择器的使用、盒子模型的讲解、列表的使用
该博客文章详细介绍了HTML和CSS的基础知识,包括CSS样式的应用方式、语法规则、选择器的使用、盒子模型、内边距、外边距、元素的显示类型以及overflow属性处理溢出内容的方法,并通过代码示例和测试结果截图展示了这些知识点在网页设计中的应用。
HTML+CSS基础知识(2)选择器的使用、盒子模型的讲解、列表的使用
|
30天前
|
前端开发
解锁CSS神秘面纱:深度剖析类选择器,掌握前端设计的绝密武器!
解锁CSS神秘面纱:深度剖析类选择器,掌握前端设计的绝密武器!
|
1月前
|
XML 前端开发 安全
如何使用 CSS 中的 :root 伪类选择器
如何使用 CSS 中的 :root 伪类选择器
27 0
|
1月前
|
前端开发 JavaScript 开发者
理解CSS | 青训营笔记(3)
理解CSS | 青训营笔记(3)
24 0
|
1月前
|
机器学习/深度学习 编解码 前端开发
理解CSS | 青训营笔记(2)
理解CSS | 青训营笔记
26 0
|
前端开发 索引