css-doodle的选择器


我们已经知道，css-doodle 是基于CSS的，因此它和CSS一样，建立了自己的若干选择器。css-doodle 选择器遵循 CSS选择器的语法，选择器名称之后用一对花括号 {} 将选择器的属性集合包裹起来；同时，css-doodle 的选择器都有前缀，特殊选择器用小角冒号 : 、其他用 @ 。目前官网介绍的 css-doodle 共9个。


① :doodle


这个第一讲已经介绍，这里再加强一下。:doodle 是 css-doodle 构建的图形图表效果所依托的父元素，它里面设定的是自己的属性和约束子元素的属性。参考以下代码：


<css-doodle>
        :doodle {
                width: 300px;
                height: 300px;
                border-radius: 50%;
                border: 1px solid cyan;
        }
</css-doodle>


这组代码，选择器 :doodle {} 代码块里的属性表述全部是CSS规范，宽高以及边框的设定，都是基于 css-doodle 主元素的。运行以上代码，我们得到的是一个300x300、1像素边框的圆圈。


请再参考下一组代码：


<css-doodle>
        :doodle {
                @grid: 6 / 300px;
                border-radius: 50%;
                border: 1px solid cyan;
                grid-gap: 1px;
        }
        background: lightsteelblue;
</css-doodle>


这组代码，:doodle 选择器设置了 6x6 的网格（@grid属性），且设置了网格行列间隙（grid-gap），这两个属性设置，用于规范子元素（单元格）。子元素的背景色 background 属性写在 :doodlbe {} 代码块之后，这里使用了淡钢蓝色 lightsteelblue。


（广告时间到了：运行以上代码，请访问 http://mahei.freeee.ml/api/pencilcode/pencilcode-ddl.html）




② :container


如果 :doodle 选择器是爹地，那么，:container 则是妈咪 。为啥？:container 选择器才是真正的容器，是它容纳了所有的单元格。不过呢，虽然妈咪下得了厨房上得了厅堂却不经常出现，主要任务是相夫教子，仅在一些需要的情形才会出来遛一遛，比方说，插播广告前的那一组代码，假如我们希望所有的子元素作为一个整体旋转45度，可以让妈咪来完成，而不必每个孩子都旋转（每个孩子的动作也未必能跟随妈咪的动作整齐划一）：


<css-doodle>
        :doodle {
                @grid: 6 / 300px;
                border-radius: 50%;
                border: 1px solid cyan;
                grid-gap: 1px;
        }
        :container {
                transform: rotate(45deg);
        }
        background: lightsteelblue;
</css-doodle>


:container 这位妈咪其实也挺厉害，:doodble 爹地的设置，其实也可以在它这里设置，只不过，在家从父嫁人从夫，它完全继承了 :doodle 的属性，所以不必要重复设置，或者，它没必要上厅堂时，它就没必要露面，一切交由 :doodle 爹地处理好了。


至此，两个父辈级别的选择器介绍完了。请特别注意，作为 css-doodle 选择器，这两个选择器的前缀使用的是冒号，往下的选择器都是用 @ 做前缀，@ 就是 at 也读 at。


③ @nth


@nth 借鉴 CSS 伪类 nth 命名，道理也一致。比如，@nth(6) 就表示是第六个单元格：


<css-doodle>
        :doodle {
                @grid: 4 / 300px;
                grid-gap: 1px;
        }
        background: lightsteelblue;
        @nth(6) { background: purple; }
</css-doodle>


代码中，@nth(6) {...} 写在了 ：doodle {} 代码块之外，因为它是用来设置子元素（单元格）的，不能再爸爸的房间 {} 里。@nth(6) 属性里，我们将第六个单元格设置为紫色背景色。


@nth(n) 支持 CSS 的常用表达，例如 @nth(3n+2)，n 从 0 开始算，一路按式子计算下去。


④  @even 和 ⑤  @odd


次序为偶数的单元格，用 @even {} 来设置：


        @even {
                background: #ccc;
        }


次序为奇数的单元格，用 @odd {} 选择器设置：


        @even {
                background: pink;
        }


以上代码都可以加入到前面的代码中测试，放在 <css-doodle> 和 </css-doodle>之内、 :doodle {} 代码块之后。下同。


⑥ @at(row,col)


在第几行、第几列。例如：


        @at(2,4) {
                cursor: pointer;
        }
        @at(2,4) {
                :hover { background: black; }
        }


这些代码表示：第二列第四行的单元格呈现手型图标，鼠标指针划过时背景色变为黑色。


⑦ @random


随机选择单元格：


        @random {
                transform: scale(.8);
        }


这将随机地选取一些单元格，令其缩小 0.8 倍。


@random 属性可以带随机数比率值，缺省（和缺省）值是 0.5，值在 0 和 1 之间（含头尾0和1）必要时可以自己设定：@random(.8) {...};


⑧ @row(n, ...) 和 ⑨ @col(n, ...)


选择网格地几行和第几列，可以单选、多选：


<css-doodle>
        :doodle {
                @grid: 6 / 300px;
                grid-gap: 1px;
        }
        background: lightsteelblue;
        @row(2) { background: blue; }
        @col(1,3,5) { background: green; }
</css-doodle>


这将使得 6x6 的 网格中第二行单元格为蓝色、第一、三、五列为绿色，因为列设置在后，第二行的单元格中，与一、三、五列交叉的单元格背景被列的设置（绿色）所覆盖。


@row() 和 @col 选择器支持偶数、奇数表达，以 @col 为例举个栗子：


        @col(odd) { background: green; }


这将第一、三、五、七 …… 列背景色设置为绿色。


css-doodle 的九个选择器介绍完了，了解之后应一一进一步熟悉、掌握。

前一篇: css-doodle入门（四）
下一篇: css-doodle入门（二）