Several examples of CSS common selectors

Ways to import external CSS style sheets

Import an external CSS style sheet using the link tag

<link rel= "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 tag to the head header, and adding a page style to the Style tab.

Selector Knowledge Point

Element Property Selector

1) Normal Tag Selector

table:{background:red;}

2) A label that contains a property

p[id]{background:red;} Represents the P element that contains the id attribute

3) A label containing a property with a value of a specific value

p[id=aaa]{background:red;} Represents the P element that contains the id attribute and ID=AAA

4) An element that contains a property and the attribute value begins with a specific value

p[id=^aaa]{background:red;} Represents an id attribute, and the ID value is a P element that begins with AAA

5) An element that contains a property and the attribute value ends with a specific value

P[id= $c]{background:red;} Represents the id attribute, and the ID value is the P element ending in C

ID Selector

An ID selector that specifies an element with an ID of a specific value, such as #myp for an element with an ID of MYP value, preceded by a symbol in the ID selector #

Class Selector

The class selector is an element that matches the class value, and the selector must precede the symbol. MyClass, for example, 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;} An element that must conform to two selector conditions is required to take effect.

Include selector, descendant selector

Descendant selectors can select elements that are descendants of an element, for example: H1 em{color:red}, which turns the text of the EM element as the descendant of the H1 element into red, and the other EM text is not used by this rule.

Child Selector

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

Adjacent sibling 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 the same time, such as H2,p{color:gray;} Both the H2 element and the P element.

* is a wildcard selector and can be matched to 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 No selectors

: before{} can be inserted with content in front of the element content, 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 mate quotes, quotes can be set with a nested reference quote type

<style>    p>p {quotes: "" ""    }    p>p::before{      content:open-quote;    }    p>p::after{      content:close-quote;    } </style>
After, before mate counters use

Can be used with the use of counters in front of the text to add multilevel numbering, this can be a special opening article, here is no longer detailed.

Pseudo class Selector

1:root selector matches document root element

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

3:LAST-CHILD Specifies the style when 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 of its parent odd number of children

n is even when the element is a style of its parent even number of children

When n is m*n+p, the match when the element is its parent conforms to the M*N+P child style

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

6:ONLY-CHILD specifies that the element is in effect when it is the only child of its parent

7:EMPTY Specifies the style of an empty element

Pseudo-class selectors for element states

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

2:focus the style of the element that gets focus

3:enabled the style of an enabled element

4:d isabled The style of a disabled element

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

6:: Selection part element style selected by user

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

 8:target selects the currently active #news element, typically used with anchor points