CSS matching rule reference

ArticleDirectory

• 11.2 CSS matching rule reference
• 11.2.1 select a child Matching Element
• 11.2.2 inheritance
• 11.2.3 select child matching child element
• 11.2.4 use a combination to match multiple elements at the same time
• 11.2.5 General Selection Sub-configuration all elements
• 11.2.6 select child matching child element
• 11.2.7 select a child matching sibling Element
• 11.2.8 the first sub-element pseudo-class matches the first sub-element
• 11.2.9 select the child matching element of the specified attribute
• 11.2.10 class Selection Sub-and ID Selection Sub-

11.2 CSS matching rule reference

This section describes how CSS Level 1 and CSS Level 2 match XML rules. The attributes and values of CSS are not discussed in this book. on the website of the World Wide Web Federation, you can read the CSS standard description: http://www.w3.org/style/css /.

Note: Microsoft Internet Explorer 6.0 only supports CSS Level 1 and does not yet implement matching rules for CSS Level 2. Internet Explorer 7.0 supports CSS Level 2. Currently, browsers that support CSS are opera 9 and Mozilla Firefox 2.

11.2.1 select a child Matching Element

The format of CSS matching rules is as follows:

Elementname {

Property1: value1;

Property2: value21 value22;

}

The parts are described as follows.

(1)CodeThe content in the braces "{" and "}" represents a CSS rule (rule ).

(2) The content before curly braces is called "selector", which is used to specify the scope of the rule. For example, the "elementname" in the code above indicates that this rule will be used to match the "elementname" element.

(3) In the rule, "property1:" is the name of the style property, and "value1" is the value of the style property.

(4) A rule can contain multiple attributes. Each attribute ends with a semicolon. The last attribute in the rule can be omitted with its semicolon mark.

(5) Some CSS attributes can contain multiple values. Each value is separated by a space (for example, "value21 value22 ").

(6) Attribute names and values are generally case insensitive.

Note: Because XML is case sensitive, the element names in CSS are also case sensitive. However, CSS attributes and attribute values are case-insensitive. The URL file path in the CSS attribute varies depending on the operating system of the file to which the URL points.

The following CSS code matches all the "abbr" elements in the XML document. The font-style attribute is italic ).

Abbr {

Font-style: italic;

}

The following CSS code matches all the "book" elements in the XML document. Its border attribute contains three values, specifying the Border width, style, and color.

Book {

Border: 3pt double black;

}

11.2.2 inheritance

After the first generation element is matched by a CSS rule, the child element inherits some rendering attributes of the first generation element. For the following XML documents:

<Book>

<Chapter> Chapter1 </Chapter>

<Paragraph> paragraph1 </Paragraph>

</Book>

Use the following CSS code to match the "book" element:

Book {

Text-Decoration: underline;

}

The underline attribute of the "book" element will be inherited by its descendant elements "chapter" and "paragraph, therefore, both the "chapter" and "paragraph" elements are rendered in the following underlined text.

Note: Different CSS attributes have different inheritance features. For details, see the CSS recommendations.

11.2.3 select child matching child element

In the selection child, you can write multiple elements at the same time. Each element is separated by a space, indicating that the child element is matched by layers. The CSS style applies to the last level element of the Level list, for example, the following "elementname3" element (this element is a descendant element of "elementname2, the "elementname2" element is the descendant element of "elementname1 ).

Elementname1 elementname2 elementname3 {

Property1: value1;

Property2: value21 value22;

}

Note: layered matching has a higher priority than element matching. If conflicting rule attributes are defined in hierarchical matching and element matching, the rule attributes are prioritized in hierarchical matching.

For example, the following CSS Code contains two rules, 1st rules match the "title" element, and 2nd rules match the "title" Descendant element of the "chapter" element. In this way, the "title" Descendant element of "chapter" will be matched by the two rules at the same time. Both rules specify the "text-align" attribute. Because "Chapter title" is more specific than "title" and has a higher priority, the actual value of "text-align" attribute is "Left" in "Chapter title ", that is, all the "title" elements in the "chapter" element are displayed on the left alignment.

Title {

Text-align: center;/* center text */

Font-size: 24pt;

Font-weight: bold;

Color: Brown;

}

Chapter title {

Font-size: 14pt;

Text-align: Left;/* Left-aligned display text */

}

In the list of elements that are matched by hierarchies, all elements that follow the hierarchies are the child elements of the first element. For example, the above "Chapter title" rule matches two "title" elements of the following XML code at the same time.

<Chapter>

<Title> title1 </title>

<Sub-chapter>

<Title> title2 </title>

</Sub-chapter>

</Chapter>

11.2.4 use a combination to match multiple elements at the same time

If you apply the same rule to multiple matching conditions, you can use commas to separate the matching conditions. The format is as follows:

Conditionelement1,

Conditionelement21 conditionelement22 {

Property1: value1;

Property2: value21 value22;

}

The following CSS code matches the "book", "title", "author" elements, and the "paragraph" element in the "body" element.

Book, title, author, body paragraph {

Display: block;

}

11.2.5 General Selection Sub-configuration all elements

Wildcard is a feature in CSS Level 2 that matches all elements. The format is as follows:

*{

Property1: value1;

Property2: value21 value22;

}

/* Match all descendant elements in "element1 */

Element1 *{

Property1: value1;

Property2: value21 value22;

}

The following CSS code matches all descendant elements under the "body" element.

Body *{

Font-size: 14pt;

Text-align: left;

}

11.2.6 select child matching child element

Child element matching is a feature in CSS Level 2. The format is to add a ">" sign between the parent element and the child element. The format is as follows:

Parentelement1> parentelement2 {

Property1: value1;

Property2: value21 value22;

}

The following CSS code matches the "title" sub-element of the "chapter" element.

Chapter> title {

Font-size: 14pt;

Text-align: left;

}

The preceding CSS code matches the 1st "title" elements of the following XML code.

<Chapter>

<Title> title1 </title>

<Sub-chapter>

<Title> title2 </title>

</Sub-chapter>

</Chapter>

11.2.7 select a child matching sibling Element

Sibling element matching is a feature in CSS Level 2. The format is to add a "+" sign between a sibling element and a sibling element. The format is as follows:

Precedingelement1 + element2 {

Property1: value1;

Property2: value21 value22;

}

The following CSS code matches the "paragraph" child element following the "title" element.

Title + paragraph {

Font-size: 14pt;

}

The above CSS code matches the 1st "paragraph" elements after the "title" element in the following XML code.

<Body>

<Chapter>

<Title> title2 </title>

<Paragraph> paragraph 1 </Paragraph>

<Paragraph> paragraph 2 </Paragraph>

</Chapter>

</Body>

11.2.8 the first sub-element pseudo-class matches the first sub-element

The first child element matching is a feature in CSS Level 2. The format is to add the ": First-Child" pseudo class (pseudo-class) after the child element ). The format is as follows:

Childelement: First-child {

Property1: value1;

Property2: value21 value22;

}

The following CSS code matches the "title" element located at the first child element.

Title: First-child {

Font-size: 24pt;

}

The above CSS code matches the 1st "title" elements under the "chapter" element in the following XML code.

<Body>

<Chapter>

<Title> Title 1 </title>

<Paragraph> paragraph 1 </Paragraph>

<Paragraph> paragraph 2 </Paragraph>

<Title> Title 2 </title>

</Chapter>

</Body>

11.2.9 select the child matching element of the specified attribute

Element property matching is a feature in CSS Level 2. The format is to add a pair of "[]" after the element, and write the matched attribute list in the middle. The format is as follows:

/* Match the "element1" element with the "attribute */

Element1 [attribute] {

Property1: value1;

Property2: value21 value22;

}

/* Match the "element1" element with the "attribute" and the property value is equal to "attrvalue1 */

Element1 [attribute = "attrvalue1"] {

Property1: value1;

Property2: value21 value22;

}

/* Match a list with an attribute separated by spaces (for example, "attribute =" attrvalue1 attrvalue2 attrvalue3 ""), at the same time, one of the "element1" elements equals "attrvalue1 */

Element1 [attribute ~ = "Attrvalue1"] {

Property1: value1;

Property2: value21 value22;

}

/* Match with the "Lang" attribute, which is separated by minus signs "-" (for example, "Lang =" ZH-CN ") and

Element1 element starting with "ZH */

Element1 [Lang | = "ZH"] {

Property1: value1;

Property2: value21 value22;

}

/* Matching an element with both "attribute1" and "attribute2" attributes and named "element1 */

Element1 [attribute1] [attribute2] {

Property1: value1;

Property2: value21 value22;

}

/* Matching has the "attribute1" attribute and its value is "attrvalue1 ",

It also has the "attribute2" attribute, and its value is "attrvalue2 ",

Element named "element1 */

Element1 [attribute1 = "attrvalue1"] [attribute2 = "attrvalue2"] {

Property1: value1;

Property2: value21 value22;

}

/* Match all elements with the attribute ("*" before "[" can be omitted )*/

* [Attribute] {

Property1: value1;

Property2: value21 value22;

}

The following CSS code matches the "paragraph" element with the "class =" important "attribute.

Paragraph [class = "important"] {

Font-size: 24pt;

Color: red;

}

The preceding CSS code matches the "paragraph" element with the "class =" important "attribute in the following XML code.

<Body>

<Chapter>

<Title> Title 1 </title>

<Paragraph> paragraph 1 </Paragraph>

<Paragraph class = "important"> paragraph 2 </Paragraph>

</Chapter>

</Body>

11.2.10 class Selection Sub-and ID Selection Sub-

Class selector and ID selector are special attribute selector. They are commonly used in HTML and xhtml css and are rarely used in xml css.

1. class selector)

In HTML or XHTML, the "class" attribute has a special meaning. You can use the CSS class to select a submatch. Class Selection Sub-syntax is. The following example matches the "table" element with the "class =" important "" attribute.

Table. Important {

Font-size: 24pt;

Color: red;

}

2. ID Selector)

In HTML or XHTML, the "ID" attribute of an element is the ID attribute. You can use the css id to select a submatch. The sub-syntax of ID selection is. The following example matches the elements with the "id =" k456 "attribute.

# K456 {

Font-size: 24pt;

Color: red;

}

In XML, the element ID attribute is specified in DTD. If you have used DTD to specify the "name" attribute of the "chapter" element as the ID attribute, you can use the following CSS code to match the "chapter" element with the "name =" C12 "attribute.

Chapter # C12 {

Font-size: 24pt;

Color: red;

}

If the xml dtd is ignored by the browser, or the XML document does not have a DTD, the above matching format will be invalid. To ensure security, use the attribute to select the child matching element.

Chapter [name = "C12"] {

Font-size: 24pt;

Color: red;

}