css-doodle入门(三)

位置: 首页 > 马黑教程
[发布: 2023.4.16  作者: 马黑黑  阅读: 194]
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入门(二)

发表评论:

  
 

评论列表 [0条]

Copyright © 2014 All Right Reserved 马黑PHP文章管理整站系统v1.8
联系我们: gxblk@163.com