#选择器

element { property declarations }

/* 匹配所有 <input> 元件 */
input {
  ...
}

.className { property declarations }

/* 匹配任何 class 属性中含有 "index" 的元件 */
.index{
  ...
}

.className1.className2 { property declarations }

element.className1.className2 { property declarations }

/* 匹配任何 input元件且同时 class 中含有 "a b" 的元件 */
input.a.b{
  ...
}

/* element */
<input className="a b" /> /* 被选中 */

#idName {  property declarations }

* {  property declarations }

selector1 selector2 selector3 {
  property declarations
}

/* 匹配任何祖先满足 view.a 且自身是 b 的元件 */
view.a .b{
   ...
}

/* element */
<view className="a" >
 <text className="b">hello</text> /*selected*/
</view>

element1 > element2 {
  property declarations
}

/* 选择属于“a”类的 view 元件的直接子元件（text） */
view.a > text {
  ...
}

/* element */
<view className="a" >
  <text>hello</text> /* 被选中 */
</view>

former_element ~ target_element { property declarations }

/* 选择 view 后续的所有 text 兄弟元件 */
view ~ text {
  ...
}

/* element */
<view className="a" />
<text />  /* 被选中 */
...
<text />  /* 被选中 */

former_element + target_element { property declarations }

/* view 紧邻的 text 兄弟元件被选中 */
view + text {
  ...
}

/* element */
<view className="a" />
<text />  /* 被选中 */
<text />  /* 未被选中 */

selector1,selector2 { property declarations }

/* 所有匹配的元件都被选中 */
 selector1, selector2 {
  ...
}

等效于
selector1 {
  ...
}

selector2 {
  ...
}

/* 选中所有既不是 <view> 也不是 <text> 的元件 */
:root :not(view):not(text) {
  font-weight: bold;
}

/* 不是 .crazy 或 .fancy 的元件 */
page :not(.crazy, .fancy) {
  font-family: sans-serif;
}