Introduction to the usage of CSS common selectors

Ways to import an external CSS style sheet

Import an external CSS style sheet using the link label

<linkrel= "stylesheet" href= "Css/demo01.css" >

Import (import) an external style sheet in a style sheet

@import url ("/crazy-html5/06css/css/demo01.css");

Using an internal style sheet

An internal style sheet can only work on a page, defined by adding a style label to the head header, and adding a page style to the style label.

<style> Table { Background: #003366; } </style>

Selector Knowledge Point

Element Property Selector

1) General label Selector

table:{background:red;}

2 A label that contains a property

div[id]{background:red;} Represents a DIV element that contains an id attribute

3 A label that contains a property and the property value is a specific value

div[id=aaa]{background:red;} Represents a DIV element that contains an id attribute and ID=AAA

4 elements that contain an attribute and whose value begins with a specific value

div[id=^aaa]{background:red;} Represents a DIV element that has an id attribute and the value of the ID that begins with AAA

5 elements that contain a property and the property value ends with a specific value

Div[id= $c]{background:red;} Represents a DIV element that has an id attribute and the value of the ID is a C-terminated

ID Selector

ID selector, specifying an element with an ID of a specific value, such as #mydiv representing an element with an ID of mydiv value, and the ID selector to add a symbol before #

Class Selector

A class selector is an element that matches a class value, and a symbol must precede the selector. MyClass represents all elements with a class value of MyClass.

Class selectors can be used in conjunction with element selectors, such as p.important{color:red;} Elements that must meet two selector conditions at the same time can take effect.

Include selector, descendant selector

Descendant selectors can select elements that act as descendants of an element, such as H1 em{color:red}, which changes the text of an EM element as a descendant of H1 elements to red, and other EM text is not used by this rule.

Child Selector

is similar to a descendant selector, but only for an immediate descendant of an element. For example h1>strong{color:red;} is applied to the first level strong element in the H1 element, and other levels are unaffected

Neighboring brother Selector

If you need to select an element immediately after another element, and both have the same parent element, you can use an adjacent sibling selector, such as h1+p{margin-top:50px; Select the paragraph that appears immediately after the H1 element, H1 has the same parent element as the P element

Selector grouping

Selectors that act on multiple elements at once, such as H2,p{color:gray;} Will act on both the H2 element and the P element.

* For wildcard selectors, can match any element

Pseudo element Selector

1): first-line{color:red; Set a special style for the first line of text

2): first-letter{color:red; Text first letter set special style

: After,: Before not selector

: before{} can be inserted before the content of the element, content can be specified,

: after{} can be inserted after the content of the element, content can be specified, such as

p:before{ Content:url ("Img.png"); }

After, before can be used with matching quotes, quotes can be set with nested reference type of quotation marks

<style>     div>div {         quotes: "" ""     ;  }     div>div::before{       content:open-quote;          div> div::after{       content:close-quote;      </style>

After, before match counter use

With the use of counters in front of the text to add multilevel numbering, this can be dedicated to the opening of the article, no longer detailed here.

Pseudo class Selector

1:root selector matches document root element

2:FIRST-CHILD specifies that when an element is the first child of its parent, the style

3:LAST-CHILD Specifies the style that the element is the last child of its parent

4:nth-child (n) specifies the style of the nth child when the element is its parent

n is odd when the element is a style whose parent is an odd number of children

n a style that matches when an element is a child of its parent even when even

When n is m*n+p, matches the style where the element is its parent that conforms to the M*N+P sub-level

5:nth-last-child (n) specifies the style of the lowest-nth child of the element when it is its parent

6:ONLY-CHILD specifies that the element takes effect when it is its parent unique child element

7:EMPTY Specifies the style of an empty element

Pseudo class selector for element state

1:hover style When the mouse pointer is over an element

2:focus the style of the element that gets the focus

3:enabled the style of an enabled element

4:d The style of isabled disabled elements

5:checked the selected element's style (Checkbox,radio)

6:: Selection by the user selected part of the element style

7:not (selector) selection is not the style of this selector

8:target Select the currently active #news element, usually with anchor points