components. */
@@ -147,63 +115,34 @@ div {
The above style works as follows:
-
-
-In the preceding example, **.container text** sets title and content to blue, and **.container \> text** sets title to red. The two styles have the same priority, but **.container \> text** declares the style later and overwrites the former style. \(For details about the priority, see [Selector Specificity](#section1460102134415).\)
-
-## Selector Specificity
-
-The specificity rule of the selectors complies with the W3C rule, which is only available for inline styles, **id**, **class**, **tag**, grandchild components, and child components. \(Inline styles are those declared in the **style** attribute.\)
-
-When multiple selectors point to the same element, their priorities are as follows \(in descending order\): inline style \> **id** \> **class** \> **tag**.
-
-## Pseudo-classes
-
-A CSS pseudo-class is a keyword added to a selector that specifies a special state of the selected element\(s\). For example, **:disabled** can be used to select the element whose **disabled** attribute is **true**.
-
-In addition to a single pseudo-class, a combination of pseudo-classes is supported. For example, **:focus:checked** selects the element whose **focus** and **checked** attributes are both set to **true**. The following table lists the supported single pseudo-class in descending order of priority.
-
-
-
Pseudo-class
- |
-Available Components
- |
-Description
- |
-
|---|
-
-:disabled
- |
-Components that support the disabled attribute
- |
-Selects the element whose disabled attribute is changed to true (unavailable for animation attributes).
- |
-
-:active
- |
-Components that support the click event
- |
-Selects the element activated by a user. For example, a pressed button or a selected tab-bar (unavailable for animation attributes).
- |
-
-:waiting
- |
-button
- |
-Selects the element whose waiting attribute is true (unavailable for animation attributes).
- |
-
-:checked
- |
-input[type="checkbox", type="radio"], and switch
- |
-Selects the element whose checked attribute is true (unavailable for animation attributes).
- |
-
-
-
-
-The following is an example for you to use the **:active** pseudo-class to control the style when a user presses the button.
+
+
+In the preceding example, .container text sets title and content to blue, and .container > text sets title to red. The two styles have the same priority, but .container > text declares the style later and overwrites the former style. (For details about the priority, see [Selector Specificity](#selector-specificity).)
+
+## Selector Specificity
+
+The specificity rule of the selectors complies with the W3C rule, which is only available for inline styles, id, class, tag, grandchild components, and child components. (Inline styles are those declared in the style attribute.)
+
+When multiple selectors point to the same element, their priorities are as follows (in descending order): inline style > id > class > tag.
+
+
+## Pseudo-classes
+
+A CSS pseudo-class is a keyword added to a selector that specifies a special state of the selected element(s). For example, :disabled can be used to select the element whose disabled attribute is true.
+
+In addition to a single pseudo-class, a combination of pseudo-classes is supported. For example, :focus:checked selects the element whose focus and checked attributes are both set to true. The following table lists the supported single pseudo-class in descending order of priority.
+
+ | Pseudo-class | Available Components | Description |
+| -------- | -------- | -------- |
+| :disabled | Components that support the disabled attribute | Selects the element whose disabled attribute is changed to true (unavailable for animation attributes). |
+| :focus | Components that support the focusable attribute | Selects the element that takes focus (unavailable for animation attributes). |
+| :active | Components that support the click event
| Selects the element activated by a user. For example, a pressed button or a selected tab-bar (unavailable for animation attributes). |
+| :waiting | button | Selects the element whose waiting attribute is true (unavailable for animation attributes). |
+| :checked | input[type="checkbox", type="radio"], and switch | Selects the element whose checked attribute is true (unavailable for animation attributes). |
+| :hover
6+ | Components that support the mouseover event | Selects the element that the cursor is on. |
+
+The following is an example for you to use the :active pseudo-class to control the style when a user presses the button.
+
```
@@ -212,6 +151,7 @@ The following is an example for you to use the **:active** pseudo-class to con