评论资讯 [ 总 913 则 ]
·马黑 - 2024-12-19 08:19
·马黑 - 2024-12-16 23:53
·马黑 - 2024-12-15 22:34
·马黑 - 2024-12-14 23:53
·马黑 - 2024-12-13 18:38
·悄然 - 2024-12-7 06:47
·马黑 - 2024-12-5 23:17
·马黑 - 2024-12-1 17:26
·马黑 - 2024-11-28 11:41
·悄然 - 2024-11-24 21:37
·马黑 - 2024-12-16 23:53
·马黑 - 2024-12-15 22:34
·马黑 - 2024-12-14 23:53
·马黑 - 2024-12-13 18:38
·悄然 - 2024-12-7 06:47
·马黑 - 2024-12-5 23:17
·马黑 - 2024-12-1 17:26
·马黑 - 2024-11-28 11:41
·悄然 - 2024-11-24 21:37
友情链接
网站统计
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 的九个选择器介绍完了,了解之后应一一进一步熟悉、掌握。
我们已经知道,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条]