components. */
+/\* Set the style for all
components. \*/
div {
flex-direction: column;
}
@@ -101,15 +101,13 @@ div {
.title, .content {
padding: 5px;
}
-/* Set the style for all texts of components whose class is container.
- */
+/\* Set the style for all texts of components whose class is container.\*/
.container text {
- color: #007dff;
+ color: \#007dff;
}
-/* Set the style for direct descendant texts of components whose class is container.
-*/
-.container > text {
- color: #fa2a2d;
+/\* Set the style for direct descendant texts of components whose class is container.\*/
+.container > text {
+ color: \#fa2a2d;
}
```
@@ -130,46 +128,45 @@ When multiple selectors point to the same element, their priorities are as follo
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.
+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 |
+| 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). |
+| :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). |
-| :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.
+The following is an example for you to use the **:active** pseudo-class to control the style when a user presses the button.
-```
+```html
```
-
-```
+```css
/* index.css */
.button:active {
background-color: #888888;/* After the button is activated, the background color is changed to #888888. */
}
```
->  **NOTE**:
-> Pseudo-classes are not supported for the \
component and its child components, including, \