Summary of how to use CSS selectors_html/css_WEB-ITnose-HTML Tutorial-php.cn

Summary of how to use CSS selectors_html/css_WEB-ITnose

WBOY

Release： 2016-06-24 11:45:05

Original

915 people have browsed it

1. Element selector

Definition: You can switch a style from one element to another.

Example: If you are styling HTML, the selector will usually be an HTML element, such as p, h1, em, a, or even html itself.

html {color:black;}h1 {color:blue;}h2 {color:silver;}

Copy after login

2. Type selector

Definition: The type selector matches the name of the document language element type, matching every instance of that element type in the document tree .

Example: The following rule matches all h1 elements in the document tree.

h1 {font-family: sans-serif;}

Copy after login

3. Wildcard selector

Definition: Wildcard selector, displayed as an asterisk (*); this selector can match any element, It's like a wildcard.

Example: The following rule can make every element in the document red.

* {color:red;}

Copy after login

4. ID selector

Definition: Similar to a class selector, but there must be a # sign in front, also called a checkerboard number or pound sign .

Example:

*#intro {font-weight:bold;}

Copy after login

<p id="intro">This is a paragraph of introduction.</p>

Copy after login

5. Contains selector

Definition: Used to select the descendants of an element in the document tree element.

Instance

<body><h1>Heading <em>here</em></h1><p>Lorem ipsum dolor <em>sit</em> amet.</p></body>

Copy after login

6. Pseudo-class selector

Definition: Allows us to format some entries that are not in the document tree.

Example:

Use pseudo-class selectors to format the 4 different states of the hyperlink element in different ways.

◆a:link Selector for unvisited links.

a:link{color:red;}

Copy after login

◆a:visited Selector used for visited links.

a:visite{color:blue}

Copy after login

◆a:hover The selector used for the link over which the mouse cursor is placed.

a:hover{color:yellow}

Copy after login

◆a:active Selector for links that get focus (for example: clicked).

a:active{color:pink}

Copy after login

7. Pseudo-element selector

Definition: Allows us to format some information that is not in the document tree.

There are two types supported by browsers: first-line and first-letter.

first-line is used for the first line of an element.

Example:

p:first-line{font-weight:bolder}

first-letter is used for the first letter of an element.

Example:

p:first-letter{font-size:20px;}

Summary:

Basic selector :

1. Element (label) selector: Acts directly on the label name.

2. Class selector: There must be a class attribute on the label, and a dot must be added before the class attribute value.

3.id selector: The label must have an id attribute, and # must be added before the id attribute value.

4. Attribute selector: Use [] to enclose the attribute/property="value" of the tag.

5. Wildcard selector: in the form: *{...}.

Composite selector:

1. Intersection selector: Use two or more selectors written next to each other (div.class{...}).

2. Union selector: Two or more selectors are written together and separated by commas. All selected tags will be applied (div, h1, .class, #div1{... }).

3. Background selector: Two or more selectors are written together and separated by spaces. All descendant selectors of the first selector will be applied (div .class{...}) .