# selector list

`TTSS`The selector specifies which elements the `TTSS` rule will be applied to.

## basic selector

### type selector（Type selector）

Selects all matching elements by given node name.

**Grammar**

```css
elementName {
   color: red;
}
```

**Example**

```css
/** matches any<input> element */
input {
    color: red;
}
```

### class selector（Class selector）

Selects all matching elements given the value of the `class` attribute.

**Grammar**

```css
.className {
   color: red;
}
```

**Example**

```css
/** Matches any element with "test" in the class attribute */
.test {
    color: red;
}
```

### ID Selector（ID selector）

Selects an element that matches the `id` attribute. It should be noted that in a document, each `ID` attribute should be unique.

**Grammar**

```css
#idName {
   color: red;
}
```

**Example**

```css
/** Matches the element whose element ID is "test" */
#test {
    color: red;
}
```

### Wildcard selector（Universal selector）

The asterisk (*) is a wildcard selector that matches any type of TTML element.

**Grammar**

```css
* {
   color: red;
}
```

**Example**

```css
/** Matches all elements of element suo */
* {
    color: red;
}
```

### group selector（Grouping selectors）

`,`is a method of combining different selectors, it selects all nodes that can be selected by any selector in the list.

**Grammar**

```css
A, B {
   color: red;
}
```

**Example**

```css
/** will match both <text> elements and <view> elements */
text, view {
    color: red;
}
```

### pseudo element

`::`A pseudo-element is a keyword appended to the end of a selector that allows you to style specific parts of the selected element.

**Grammar**

Available pseudo-elements：

`::after`

`::before`

`::placeholder`
```css
::type {
    color: red;
}
```

**Example**

```css
.test::after {
    color: red;
    content: "test";
}
```

## Notes

-   Does not support `.test-1.test-2` selector writing, and does not support cascades above two levels
-   Dynamic switching of parent is not supported class
-   At present, the pseudo element `::placeholder` is only valid in the native environment of the mobile terminal. If you need to achieve the same effect in PC mode, you need to use the element attribute `placeholder-style`, such as：

```html
<input placeholder="This is the demo input box placeholder"
    placeholder-style="color: red; font-size: 20px;"
/>
```