css-doodle入门（三）
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 的九个选择器介绍完了，了解之后应一一进一步熟悉、掌握。
第二遍看完了，反正没完，肯定得常来翻看。{:4_173:} @at(2,4)这个最奇怪，我以为是第二行第四列，结果是第二列第四行的单元格。
习惯了是行先开始数的，遇到这个有点蒙。{:4_203:} @random这个最是不可控，去运行代码，运行一次，就变化一次，想做某个特定的效果，肯定不敢选它{:4_173:} 黑黑的介绍妙趣横生，尤其对容器:container 是妈咪的这段，边笑边就看懂了{:4_173:} 红影 发表于 2023-4-12 09:45
黑黑的介绍妙趣横生，尤其对容器:container 是妈咪的这段，边笑边就看懂了
我没有深入到源码，只是根据它的介绍和示例这么理解 红影 发表于 2023-4-12 09:43
@random这个最是不可控，去运行代码，运行一次，就变化一次，想做某个特定的效果，肯定不敢选它
随机选取单元格，这有特殊用途 红影 发表于 2023-4-12 09:40
@at(2,4)这个最奇怪，我以为是第二行第四列，结果是第二列第四行的单元格。
习惯了是行先开始数的，遇到这 ...
原生 grid 某些设置，也是先列后行或先纵向后横向，例如，place-items: center start; 这几句，定义了垂直方向居中、水平方向左对齐，估计 css-doodle 源于此二设定，不过不同版本估计会有不同的定义，先看看。 雨中悄然 发表于 2023-4-12 08:41
第二遍看完了，反正没完，肯定得常来翻看。
慢慢去尝试、消化，反正不多 天书天书又见天书{:4_203:} 樵歌 发表于 2023-4-12 14:36
天书天书又见天书
这世上没有天书 马黑黑 发表于 2023-4-12 13:01
慢慢去尝试、消化，反正不多
看字理解有感觉，挺耐看的。
老师教程写得详细，幽默，通俗形象。
配上代码演示更是好玩。
我跟这些单词脸盲{:4_170:}，得多认几遍才行。
雨中悄然 发表于 2023-4-12 19:30
看字理解有感觉，挺耐看的。
老师教程写得详细，幽默，通俗形象。
配上代码演示更是好玩。
对。懂单词在编程中很重要。比方讲，你若知道 shape 是形状的意思，那么，@shape 属性就难不倒你。 马黑黑 发表于 2023-4-12 19:43
对。懂单词在编程中很重要。比方讲，你若知道 shape 是形状的意思，那么，@shape 属性就难不倒你。
就是这个道理。其实常用单词差不多就那些。
不过呢，没事，时间长着呢，慢慢认。{:4_170:} 马黑黑 发表于 2023-4-12 12:57
我没有深入到源码，只是根据它的介绍和示例这么理解
黑黑的介绍更生动，特别好{:4_199:} 马黑黑 发表于 2023-4-12 12:57
随机选取单元格，这有特殊用途
嗯，这个肯定是特殊时候才用到的功能。 马黑黑 发表于 2023-4-12 13:00
原生 grid 某些设置，也是先列后行或先纵向后横向，例如，place-items: center start; 这几句，定义了垂 ...
嗯嗯，这个需要单独去记忆了。 红影 发表于 2023-4-12 22:26
嗯嗯，这个需要单独去记忆了。
总有一些定义会让人觉得不合理 红影 发表于 2023-4-12 22:25
嗯，这个肯定是特殊时候才用到的功能。
深度开发都会用到 马黑黑 发表于 2023-4-12 22:53
总有一些定义会让人觉得不合理
是啊，和习惯不一样了。