stylus - 选择器

Stylus

选择器

    在stylus中选择某个元素，是通过缩进的方式来控制的。缩进在stylus中是尤为重要的。

从选择一个标签开始

div
	width 100px
	height 100px
	background pink

上述代码编译为：

div {
	width: 100px;
	height: 100px;
	background: pink;
}

群组选择器 （官方叫做规则集）

ul,ol
	list-style none

也可以省略逗号，如下：

ul
li
	list-style none

上述代码编译为：

ul,ol {
	list-style: none;
}

子选择器

div
	width 100px
	height 100px
	>a
		color red

上述代码编译为：

div {
  width: 100px;
  height: 100px;
}
div >a {
  color: #f00;
}

父级引用

.fade
	opacity 1
	&.active
		opacity .5
ul
	li
		&:nth-child(2)
			color red
		&::after
			content ""
		&:nth-of-type
			color blue

上述代码编译为：

.fade {
  opacity: 1;
}
.fade.active {
  opacity: 0.5;
}
ul li:nth-child(2) {
  color: #f00;
}
ul li::after {
  content: "";
}
ul li:nth-of-type {
  color: #00f;
}