CSS entry series: Part 3 advanced CSS and selectable Media

-- From "getting started with CSS (version 3rd)" by LAN Pouncey and Richard York

[Advanced selector] · Direct subselector

Body>. Intro {font-weight: bold;} // The direct child selector applies only to the direct child element of the element. Directly sub-selectors can also be connected in series. The separator number is greater than the number (> ).

Note: Apart from IE6, all mainstream browsers support direct sub-selectors.

· Adjacent Selector

H1 +. Intro {font-weight: bold;} // This selects the element that follows the H1 element and the class name intro changes to bold.

The adjacent selector is applied to the next sibling element of an element. Concatenates data through the + symbol.

Note: All mainstream browsers except IE6 support adjacent selectors.

· Attribute Selector

The attribute selector applies the style table declaration based on the attributes or attribute values in the HTML element.

There are several different attribute selectors. In CSS, you can check the element attributes according to the following standards.

• Whether the property exists or not
• Attribute Value
• Whether the attribute value starts with a specific character
• Whether the attribute value ends with a specific character
• Whether the specified string is contained in any part of the property value (front-end, end, or middle)

Note: All mainstream browsers except IE6 support attribute selectors.

· Select based on whether the attribute exists

Input [name] {border: 2px dashed #000;} // set only for the input element with the name attribute.

· Select based on attribute values

Input [name = "email"] {border: 2px dashed #000;} // only the input element whose name attribute value is email matches this selector.

· Attribute substring Selector

A [href ^ = "mailto:"] {padding-left: 23px; Background: transparent url(icon-email.png) No-repeat center left ;} // The ^ character after the href attribute is used to select the element whose previous attribute starts with the value after it. Input [ID $ = "name"] {border: 2px dashed #000;} // use the dollar sign to indicate the end of the value that the selector matches. [Name * = "recipe"] {border: 20x dashed #000;} // use the * number to indicate that the selector will search any location of the attribute value.

· Pseudo elements: First-letter and: frist-line

A pseudo element is used to indicate a specific part of a document that cannot be easily modified with the flag. For example, a pseudo element can be used to modify the first letter of a paragraph or the format of the first line.

Pseudo elements: First-letter and: first-line indicate the first and first lines of a text element.

Note:Css3 modifies the syntax of pseudo elements, that is, double colons (: :) are used before each pseudo element. For example, P: First-letter represents the first letter of a paragraph, rather than P: first-letter. This syntax separates pseudo elements from pseudo classes. The pseudo classes use the single colon syntax. For example, a: hover is a pseudo class reference.

However, any version of IE does not support this form, but supports the form of a single colon, and mainstream browsers still support the form of a single colon, so we recommend that you use: First-letter and: first-line.

· Structured pseudo-class: the first-Child structured pseudo-class is only used when one element is the third child element of another element.

Note: All mainstream browsers except IE6 support the first-Child pseudo class.

: Lat-Child structured pseudo-classes are only used when one element is the last child element of another element.

Note: IE6, IE7, and IE8 do not support the last-Child structured pseudo class. All other mainstream browsers (including ie9) support this pseudo class.

: Nth-child (n) Structured pseudo-class is only used when an element is the nth child element of another element. If the value in the brackets is 3, the third child element is selected.

Note: IE6, IE7, and IE8 do not support Nth-child (n) Structured pseudo classes. All other mainstream browsers (including ie9) support this pseudo class.

[Custom mouse pointer] · the cursor attribute controls the pointer type displayed for a specific element.

Attribute	Value
Cursor	[<URL>.] * [auto | croschair | default | pointer | move | E = resire | ne-resize | NW-resize | n-resize | ne-resize | Sw-resize | S-resize | w-resize | text | wait | help | progress]
Initial Value: Auto
Non-standard extension of cursor	Hand | all-scroll | col-resize | row-resize | no-drop | not-allowed | veertical = text

Note: safari and chrome do not support non-standard cursor keywords

· Pointer compatibility

Currently, the most common pointer is Pointer. When Javascript is used to add a function, you can use this pointer to indicate that elements can interact.

[Control transparency and visibility] · opacity attributes

Attribute	Value
Opacity	<Number> Initial Value: 1

The value range of opacity is 0-1. If the value is 1, the element is completely opaque. If the value is 0, the element is completely invisible.

Note: All mainstream browsers except IE6, 7, and 8 support the opacity attribute.

· The visibility attribute controls the visibility of elements. Invisible elements still occupy the page space.

Attribute	Value
Visibility	Visible | hidden Initial Value: visible

[Style content for mobile devices]

Considerations for website design and layout on mobile devices:

• Do not set absolute width for the website
• Show main content in a column
• Explicitly indicating links, buttons, and other interactive controls
• Do not assume that there is a hovering state

· Mobile browser Rendering Engine

WebKit and presto are the most widely used mobile browsers. Apple's mobile safari and Google's Android browser use the WebKit rendering engine, while opera mobile and opera use the presto rendering engine, the mobile IE 7 browser of Windows phone7 uses the Trident rendering engine, while the Firefox mobile browser uses the gecko rendering engine.

· Media Query

Theoretically, media attributes or @ media rules can be used for different media application styles. The media attribute is applied to link or style elements, while the @ media rule is used in the style sheet.

Different media types:

Media	Purpose
All	Applicable to all devices
Handbeld	For handheld devices
Print	For printers
Projection	For projected images
Screen	For Color Display
Speech | aural	For Speech Synthesizer
......