css-doodle 学习第三天， selectors的使用

1、前言

在上一篇中我们介绍了关于Grid功能的使用，这一篇我们接着讲selectors的使用

2、selectors（运行代码的时候把所有的注释去掉，不然运行不出来结果）

2.1、selectors的功能划分（又是从官网偷的）

2.2、声明

:doodle是控制整个表格的属性的选择器

:container是官网介绍的另一个选择器，据文档翻译过来的意思也是控制整个表格的，继承了:doodle选择器的所有属性

@even是选择整个表格中所有下标（这里的下标是从1开始的）为偶数的单元格

@odd是选择整个表格中所有下标为奇数的单元格

@nth是可以直接选中指定下标的单元格或者指定数列（应该是叫这个名字吧，高中学的了，错了见谅哈，参数是数列的通项公式）

@at是选中指定行、列的那个单元格（比如位于第四行二列的那个单元格）

@random是根据随机数获取单元格（道友们见笑了哈，我没有搞清楚参数的作用是什么，太笨没有观察出来）

@row是选中指定行的所有单元格，如果参数为even，则是获取所有行号为偶数的单元格，如果参数为odd，则是获取所有行号为奇数的单元格；选中一个单元格后，使用@row()能获取它的行号

@col是选中指定列的所有单元格，如果参数为even，则是获取所有行号为偶数的单元格，如果参数为odd，则是获取所有行号为奇数的单元格；选中一个单元格后，使用@col()能获取它的列号

2.3、:doodle选择器

2.3.1、说明

该选择器的作用是控制整个表格的，比如设置这个表格的宽高、表格的背景颜色、单元格之间的间距等等，或者，可以直接在该选择器中才设置一共有几行几列的单元格（这需要用到@grid，这是后边才有的内容）。

2.3.2、实例代码

（1）、生成5行5列的单元格

<css-doodle>
    :doodle {
        @grid: 5 / 8em;
        /* 8em指的是表格的宽高都为8em */
        overflow: hidden;
        grid-gap: 3px; /* 单元格之间的间距 */
        background: #fff000; /*这是绿色，设置的是整个变革的背景颜色*/
    }
    background: #60569e;  /*这是紫色吧，官网给的颜色，设置的每一个单元格的背景颜色*/
</css-doodle>

运行结果：

（2）、生成4行6列的单元格

        <css-doodle>
			:doodle {
				@grid: 4x6 / 8em;
				overflow: hidden;
				grid-gap: 3px;
				background: #fff000;
			}
			background: #60569e;
		</css-doodle>

运行结果：