谈谈一些有趣的CSS题目（十）-- 结构性伪类选择器

最新推荐文章于 2024-03-28 23:22:23 发布
最新推荐文章于 2024-03-28 23:22:23 发布
阅读量106 收藏
点赞数
分类专栏： 前端 文章标签： :empty :target :root :not 结构性伪类选择器
原文链接：https://www.mk2048.com/blog/blog.php?id=bkhaj1jaa&title=%E8%B0%88%E8%B0%88%E4%B8%80%E4%BA%9B%E6%9C%89%E8%B6%A3%E7%9A%84CSS%E9%A2%98%E7%9B%AE%EF%BC%88%E5%8D%81%EF%BC%89--+%E7%BB%93%E6%9E%84%E6%80%A7%E4%BC%AA%E7%B1%BB%E9%80%89%E6%8B%A9%E5%99%A8
版权

开本系列，谈谈一些有趣的 

CSS
 题目，题目类型天马行空，想到什么说什么，不仅为了拓宽一下解决问题的思路，更涉及一些容易忽视的 CSS 细节。

解题不考虑兼容性，题目天马行空，想到什么说什么，如果解题中有你感觉到生僻的 CSS 属性，赶紧去补习一下吧。

不断更新，不断更新，不断更新，重要的事情说三遍。

谈谈一些有趣的CSS题目（一）-- 左边竖条的实现方法

谈谈一些有趣的CSS题目（二）-- 从条纹边框的实现谈盒子模型

谈谈一些有趣的CSS题目（三）-- 层叠顺序与堆栈上下文知多少

谈谈一些有趣的CSS题目（四）-- 从倒影说起，谈谈 CSS 继承 inherit

谈谈一些有趣的CSS题目（五）-- 单行居中，两行居左，超过两行省略

谈谈一些有趣的CSS题目（六）-- 全兼容的多列均匀布局问题

谈谈一些有趣的CSS题目（七）-- 消失的边界线问题

谈谈一些有趣的CSS题目（八）-- 纯CSS的导航栏Tab切换方案

谈谈一些有趣的CSS题目（九）-- 巧妙的实现 CSS 斜线

所有题目汇总在我的 Github 。

 

十、结构性伪类选择器（
:root
,
:target
,
:empty
,
:not
）

每一个 CSS 伪类及伪元素的出现，肯定都是为了解决某些先前难以解决的问题而应运而生的。

学习了解它们，是解决许多其他复杂 CSS 问题或者前沿技术的基础。

这里是 4 个基本的结构性伪类选择器，结构性伪类选择器的共同特征是允许开发者根据文档树中的结构来指定元素的样式。

 

:root
 伪类

:root
 伪类匹配文档树的根元素。应用到HTML， 
:root
 即表示为 
<html>
元素，除了优先级更高外，相当于html标签选择器。

语法样式
:root { 样式属性 }

譬如，

:root{background:#000}
 ，即可将页面背景色设置为黑色。

由于属于 CSS3 新增的伪类，所以也可以作为一种 HACK 元素，只对 IE9 生效。

介绍 

:root
 伪类，是因为在介绍使用  
CSS变量
 的时候，声明全局CSS变量时  
:root
 很有用。

 

:empty
 伪类

:empty
 伪类，代表没有子元素的元素。 这里说的子元素，只计算元素结点及文本（包括空格），注释、运行指令不考虑在内。

考虑一个例子：

div{
  height:20px;
  background:#ffcc00;
}
div:empty{
  display:none;
}
<div>1</div>
<div> </div>
<div></div>

上述的例子，前两个div会正常显示，而第三个则会 

display:none
 隐藏。

也就是说，要想 

:empty
 生效，标签中连哪怕一个空格都不允许存在。

[Demo戳我：:empty结构性伪类示例]

title=":empty结构性伪类示例" src="http://codepen.io/Chokcoco/embed/VmvWpG/?height=265&theme-id=0&default-tab=css,result&embed-version=2" frameborder="no" scrolling="no" width="320" height="265">

 

:not
 伪类

CSS否定伪类，

:not(X)
，可以选择除某个元素之外的所有元素。

X不能包含另外一个否定选择器。

关于 

:not
 伪类有几个有趣的现象： 

  • :not
     伪类不像其它伪类，它不会增加选择器的优先级。它的优先级即为它参数选择器的优先级。

我们知道，选择器是有优先级之分的，通常而言，伪类选择的权重与类选择器（class selectors，例如

.example
），属性选择器（attributes selectors，例如  
[type="radio"]
）的权重相同，但是有一个特例，就是  
:not()
。 
:not
 否定伪类在优先级计算中不会被看作是伪类，但是在计算选择器数量时还是会把其中的选择器当做普通选择器进行计数。

  • 使用 

    :not(*)
     将匹配任何非元素的元素，因此这个规则将永远不会被应用。

  • 这个选择器只会应用在一个元素上， 你不能用它在排除所有祖先元素。 举例来说， body :not(table) a 将依旧会应用在table内部的

    <a>
     上, 因为 
    <tr>
    将会被:not() 这部分选择器匹配。（摘自MDN）

 

:target
 伪类

:target
 伪类，在  
#8、纯CSS的导航栏Tab切换方案
 中已经实践过了，可以回过头看看。 

:target
 代表一个特殊的元素，若是谈论区别的话，它需要一个id去匹配文档URI的片段标识符。 

:target
 选择器的出现，让 CSS 也能够接受到用户的点击事件，并进行反馈。（另一个可以接收点击事件的 CSS 选择器是  
:checked
）。

 

所有题目汇总在我的 Github ，发到博客希望得到更多的交流。

到此本文结束，如果还有什么疑问或者建议，可以多多交流，原创文章，文笔有限，才疏学浅，文中若有不正之处，万望告知。

前端老码农
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
【36】CSS3（1）—— 新增选择器③结构伪类选择器
倏存的博客
04-08 479
结构伪类选择器1.介绍2. 补充3.所有结构伪类选择器举例
谈谈对css属性box-sizing的了解
09-24
本篇文章主要介绍了css属性box-sizing，box-sizing属性是CSS3中引入的，有人解释为它可以指定用width属性与height属性分别指定的宽度值与高度值是否包含元素内部的补白区域，以及边框的宽度与高度。
【CSS3】CSS3 结构伪类选择器 ( E:first-child / E:last-child 选择器 | E:nth-child(n) 选择器 | E:nth-of-type 选择器 )
让 学习 成为一种 习惯 ( 韩曙亮 の 技术博客 )
04-20 5616
一、CSS3 结构伪类选择器 二、E:first-child / E:last-child 选择器 1、E:first-child 选择器 2、E:last-child 选择器 三、E:nth-child(n) 选择器 1、E:nth-child(n) 选择器语法说明 2、n 为数字的情况 3、n 为关键字的情况 4、n 为公式的情况 5、子元素类型不同的情况 四、E:first-of-type / E:last-of-type / E:nth-of-type 选择器
CSS中的十二种结构伪类选择器
一碗周
08-29 5054
Hello 大家好，我是一碗周，不是你想的那个“一碗粥”，是一个不想被喝掉的前端????????‍????，如果我写的文章有幸可以得到你的青睐，万分有幸~ 这是【从头学前端】系列文章的第二十七篇-《CSS中的十二种结构伪类选择器》 编写不易转载请获得允许 写在前面 本篇文章我们将来学习CSS中的结构伪类选择器，该类选择器包含的内容如下表所示： 伪类选择器 作用 selector:first-child 用来定位一组兄弟元素中的第一个元素 selector:last-child 用来
结构伪类选择器与伪元素选择器
w6437286的博客
03-16 986
本章主要讲解了结构伪类选择器与伪元素选择器的使用，内附讲解代码。
CSS 结构伪类选择器 伪元素选择器 盒子模型
最新发布
qq_67140973的博客
03-28 1112
盒子模型的重要组成部分：内容区域(width & height) 内边距：padding（出现在内容与盒子边缘之间）边框线：border 外边距：margin（出现在盒子外面）
谈谈一些有趣的CSS话题
08-10
本系列谈谈一些有趣的 CSS 话题，内容天马行空，想到什么说什么，不仅是为了拓宽解决问题的思路，更涉及一些容易忽视或是十分有趣的 CSS 细节。
谈谈关于MVP模式中V-P交互问题
03-02
在差不多两年的时间内，我们项目组几十来号人都扑在一个项目上面。这是一个基于微软SCSF（SmartClientSoftwareFactory）的项目，客户端是墨尔本一家事业单位。前两周，我奉命负责对某个模块进行CodeReview工作，在此...
css笔记
c1523456的博客
11-01 962
css3 基础内容
第22题：关于css3 伪类选择器
小柒的前端之旅
10-17 558
前面的话 最近刷题，关于css3伪类选择器知识点有些模糊，这里总结一下。 题目 对于以下 HTML，下列选项中哪一个 CSS 选择器效果与其他的不同: html <p> <span>A</span> <span>B</span> <span>C</span> </...
40个有创意的html+css网页源代码
11-16
40个有创意的html+css网页源代码，非常漂亮，如果你是html和css的初学者，这个是不能少的例子。如果你是高手，也许这能帮你减少工作量。
结构伪类选择器（总结）
12-22
什么是结构伪类选择器？ 结构伪类选择器是针对HTML的结构进行分类的选择器，特征就是位置 分为三大类 一类 e:first-child e:last-child e:only-child e:nth-child(n/even/odd)隔行换色，列表换色 e:nth-last-child 二类 e:first-of-type e:last-of-type e:only-of-type e:nth-of-type 三类 e:root e:empty e:target e:not 波浪选择器连接符~ 作用：两个css选择器通过波浪线连接起来，但只作用于后一个css选择器，并且必须出现前一个选择器才符
日历 ——练习CSS结构伪类选择器
weixin_47207556的博客
10-01 202
今天拿到一个日历的练习题，试着实现了一下。 题目照片如下： 然后下面是我最后实现的 感觉还可以，第一次拿着图实现。主要是练习结构伪类选择器。 代码： <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>rili</title> <style> *{ box-sizing:
day10-HTML5&CSS3提高
weixin_48697269的博客
04-22 878
目标 能够说出 3~5 个 HTML5 新增布局和表单标签 能够说出 CSS3 的新增特性有哪些 HTML5新特性 概述 HTML5 的新增特性主要是针对于以前的不足，增加了一些新的标签、新的表单和新的表单属性等。 这些新特性都有兼容性问题，基本是 IE9+ 以上版本的浏览器才支持，如果不考虑兼容性问题，可以大量使用这些新特性。 语义化标签 （★★） 以前布局，我们基本用 div 来做。div 对于搜索引擎来说，是没有语义的 <div class=“header”> </div>
CSS3---结构性伪类选择器—not
diyinjiao1404的博客
05-04 266
结构性伪类选择器—not :not选择器称为否定选择器，和jQuery中的:not选择器一模一样，可以选择除某个元素之外的所有元素。就拿form元素来说，比如说你想给表单中除submit按钮之外的input元素添加红色边框，CSS代码可以写成： form { width: 200px; margin: 20px auto; } div { margin-bo...
CSS伪类选择器使用实例
Mentina的小屋
03-14 2822
    今天的小技巧主要是搞明白了CSS3新增的伪类选择器，并和之前的伪类选择器做比较~~~    每一次看伪类选择器的介绍总有一种语文没学好的感觉，so只能上实例理解了~    这次主要学习了 :first-of-type/:last-of-type/:only-of-type/:nth-child(n)//============================================...
css3结构伪类选择器有哪些？
zy1992As的博客
02-13 1581
结构化伪类选择器是CSS3中新增加的选择器。常用的结构化伪类选择器有：root选择器、：not选择器、：only-child选择器、：first-child选择器、：last-child选择器、：nth-child(n)选择器、：nth-last-child(n)选择器、：nth-of-type(n)选择器、：nth-last-of-type(n)选择器、：empty选择器、：target选择器，下面我们一一讲解。
CSS3选择器--结构性伪类选择器
热门推荐
Wendy
01-01 2万+
在学习结构性伪类选择器之前，先了解2个概念：CSS中的伪类选择器和伪元素： 1、伪类选择器：CSS中已经定义好的选择器,不能随便取名                  常用的伪类选择器是使用在a元素上的几种，如a:link|a:visited|a:hover|a:active 2、伪元素选择器：并不是针对真正的元素使用的选择器，而是针对CSS中已经定义好的伪元素使用的选择器       C
css习题(使用结构伪类选择器去做把列表中的某些列表项的边框线去除)
weixin_46611729的博客
08-26 238
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>中国的流浪猫</title> <style> * { mar
谈谈你对vue中keep-alive的理解
05-12
在Vue中，keep-alive是一个抽象组件，它可以缓存已经被加载的组件实例，以便在下次需要使用该组件时能够快速地渲染出来，从而提高应用的性能。 具体来说，keep-alive可以通过两个属性来控制组件的缓存行为： ...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值