CSS entry series: Part 3 advanced CSS and selectable Media

Source: Internet
Author: User

-- 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

......

Related Article

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.