您现在的位置是：网站首页> 编程资料编程资料

深入理解CSS中选择器的逻辑处理

2021-09-05 850人已围观

简介 这篇文章主要介绍了CSS中选择器的逻辑处理,深入探讨了浏览器解析选择器的方式,需要的朋友可以参考下

在过去的很长一段时间中，我们都说 CSS 是不带有任何逻辑的，意思是在 CSS 中没有控制流，也没有某种类似于其他编程语言的方式来组织 CSS。CSS 天生缺乏逻辑性的问题导致了预处理器的出现。然而业界却对 CSS 预处理器褒贬不一，支持预处理器的人认为这弥补了 CSS 缺失的特性；而反对预处理器的人则认为 CSS 的设计初衷就不应该带有逻辑性，他们认为根本不应该引入预处理器这个概念。

然而，一种独特的思考方法最近突然蹦入了我的脑袋。它让我感到 CSS 确实拥有逻辑性！很少有人真正那么想过，这大概也是我们一直认为 CSS 的逻辑性匮乏的最大原因吧。

我发现我们可以将复合选择器理解为：主体部分 + 条件部分。首先来看一个例子：

CSS Code复制内容到剪贴板
  1. div.sidebar .login-box a.btn span {   
  2.     /*...*/  
  3. }  

在这个复合选择器由主体部分是 span，而条件部分是 IF (inside .btn) AND IF (on a) AND IF (inside .login-box) AND IF (inside .sidebar) AND IF (on div)。

也就是说，一个选择器的每一部分都是一个 if 语句，需要在解析选择器时被满足（或者不满足）。有了这种微妙的而又全新的认识，如今我们回头再看看自己曾经写出的 CSS 代码，我们将会意识到选择器写的好或者坏，会对效率产生直接的影响。我们真的会写出下面这段逻辑吗？（伪代码）：

CSS Code复制内容到剪贴板
  1. @if exists(span) {   
  2.   @if is-inside(.btn) {   
  3.     @if is-on(a) {   
  4.       @if is-inside(.login-box) {   
  5.         @if is-inside(.sidebar) {   
  6.           @if is-on(div) {   
  7.             # Do this.   
  8.           }   
  9.         }   
  10.       }   
  11.     }   
  12.   }   
  13. }  

也许不会。这看上去太不直接，也太

上一篇：一波CSS制作的三角形和圆形小按钮示例利用CSS3实现文本框的清除按钮相关的一些效果用CSS3写的模仿iPhone中的返回按钮HTML5+CSS3实现的音量调节旋转按钮动态特效源码

下一篇：一波CSS+Div实用技巧小结css实现元素居中的N种方法div水平布局两边对齐的三种实现方法waterfall瀑布流布局+动态渲染的实现页面中有间隔的方格布局如何完美实现方法css实现六种自适应两栏布局方式使用flex布局轻松实现页面布局的示例代码使用Flex布局实现头部固定内容区域滚动的方法详解flex布局下图片变形的解决方法详解flex布局与position:absolute/fixed的冲突问题Flex布局实现div内部子元素垂直居中的示例

相关内容

点击排行

本栏推荐

猜你喜欢

-六神源码网