怎样建手机网站,无锡网站制作优化推广,十大外包公司,网站优化连云港哪家强?开本系列#xff0c;谈谈一些有趣的
CSS 题目#xff0c;题目类型天马行空#xff0c;想到什么说什么#xff0c;不仅为了拓宽一下解决问题的思路#xff0c;更涉及一些容易忽视的 CSS 细节。解题不考虑兼容性#xff0c;题目天马行空#xff0c;想到什么说什么#x…开本系列谈谈一些有趣的
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;
} div1/div
div /div
div/div 上述的例子前两个div会正常显示而第三个则会
display:none 隐藏。也就是说要想
:empty 生效标签中连哪怕一个空格都不允许存在。[Demo戳我:empty结构性伪类示例] title:empty结构性伪类示例 srchttp://codepen.io/Chokcoco/embed/VmvWpG/?height265theme-id0default-tabcss,resultembed-version2 frameborderno scrollingno width320 height265 :not 伪类
CSS否定伪类
:not(X)可以选择除某个元素之外的所有元素。X不能包含另外一个否定选择器。
关于
:not 伪类有几个有趣的现象:not 伪类不像其它伪类它不会增加选择器的优先级。它的优先级即为它参数选择器的优先级。 我们知道选择器是有优先级之分的通常而言伪类选择的权重与类选择器class selectors例如.example属性选择器attributes selectors例如 [typeradio]的权重相同但是有一个特例就是 :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 发到博客希望得到更多的交流。
到此本文结束如果还有什么疑问或者建议可以多多交流原创文章文笔有限才疏学浅文中若有不正之处万望告知。
