css-doodle入门（三）

马黑黑 · 发表于 2023-4-12 07:45

请马上登录，朋友们都在花潮里等着你哦：）

您需要登录才可以下载或查看，没有账号？立即注册

x

css-doodle入门（三）

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 的九个选择器介绍完了，了解之后应一一进一步熟悉、掌握。