Forward-css Selectors

CSS Reference manual: Css.doyoe.com

In CSS3, different browsers may require a different prefix, which means that the CSS property or rule has not yet become part of the Web Standard, is a private property of the browser, although the newer version of the browser does not need a prefix, but in order to better forward compatibility prefix is not necessary

-webkit represents Chrome, safari private properties

-moz on behalf of the Firefox browser private properties

-ms for IE browser private properties

-O stands for Opera browser private properties

CSS syntax structure

CSS syntax consists of three parts: selectors, attributes, values

Selector{property:value;}

↓↓↓

Selector Property value

Three ways to introduce CSS

1. Inline style
2. Internal style sheet
3. External style sheet

Priority levels for three introduction methods (Nearest principle)

Inline styles > Internal style sheets > external style Sheets

But!important can change their priority levels.

<p class= "Content" style= "color:red;" > Turn me into a blue font </p><style>    . content{color:blue!important;} </style>

CSS code comments
Start with/* * END

A wildcard selector

* Denotes all objects, the so-called wildcard selectors, means that you can select the object using a fuzzy-specified method, specify the style

*{margin:0; padding:0;}

Element Selector

The so-called element selector, which is a selector with the name of an existing label in a Web page

body{background: #fff;} h1{color: #000;} p{color: #ccc;}

Group Selector

In addition to styling a single label, you can make the same style definition for a group of labels

Use a comma to separate the selectors, just write the style once for the page where you want to use the same style

h1,h2,h3,p{  font-size:12px;  font-family:arial;    }

Relationship Selector

Include selector (E F) Select all F elements that are contained by the E element

Sub-selector (e>f) selects all child elements as E elements F

The adjacent selector (e+f) is selected to cling to the E element after the F element

Brother Selector (e~f) Select E element all sibling element F

<div><a> background color is #e61061</a><span><a> background color is #67b374</a></span></div> <p> background color is #0000ff</p><p> back color is #808080</p><p> background color is #808080</p><style type= "text/ CSS ">div>a{background: #E61061;} Span a{background: #67B374;} p~p{background: #808080;} div+p{background: #0000FF;} </style>

ID and Class Selector

The ID selector is defined as "#", and the ID selector can specify a specific style for an HTML element labeled with a specific ID, which can only be used once in each ID name and must not be duplicated

Class selector with "." To define, unlike the ID, class allows reuse, such as multiple elements on a page, can be defined using the same style

<p id= "P1" > This is a paragraph </p> #p1 {font-size:12px;font-weight:bold;} <p class= "P2" > This is a paragraph </p>.p2 {font-size:12px;font-weight:bold;}

Pseudo-Class selectors

E:link to set the style of hyperlink a before it is accessed

e:visited setting hyperlink A In its link address has been accessed by outdated styles

E:hover to set the style of an element when its mouse hovers

E:active setting the style of an element when it is activated by the user (events that occur between mouse clicks and releases)

Note that hover must be located after link and visited, and active must be behind hover

The Reliable Order is: (link) (visited) (hover) (active)

<a href= "#" > Point I </a><style>    a{text-decoration:none; font-size:50px;}    A:link{color:black;}    A:visited{color: #ccc;}    a:hover{color:red;}    A:active{color:blue;} </style>

E:focus the style of the set element when it becomes the input focus (the onfocus event of the element occurs)

<input type= "text" ><style>    input:focus{outline:1px solid red; border:none;} </style>

E:first-child matches the first child element of a parent element E

E:last-child matches the last child element of the parent element E

E:only-child matches only one child element of the parent element E

E:nth-child (n) matches the nth child element e of the parent element

E:nth-last-child (n) matches the parent element's reciprocal nth child element E

E:first-of-type matches the first sibling element in the same type E

E:last-of-type matches the last sibling element in the same type E

E:only-of-type matches only one sibling element in the same type E

E:nth-of-type (n) matches nth sibling in same type E

E:nth-last-of-type (n) matches the reciprocal nth sibling in the same type E

The difference between First-child and First-of-type:

A:first-child is the first structure tag under the. Test, and it is a tag, not the effect.

A:first-of-type does not need to be the first child element only needs to be the first of the a tag under the. Test.

<ul id= "List" ><li> this is the 1th item List </li><li> This is the 2nd item List </li><li> This is the 3rd item list </li><li > This is the 4th item List </li><li> This is the 5th list </li></ul><style> #list li{border-bottom:1px solid #ccc;} #list li:first-child{Font-weight:bold;} #list li:last-child{Border-bottom:none;} #list Li:nth-child (2) {color:red;} #list Li:nth-last-child (2) {color:blue;} </style>

e:checked matches the selected element e in the user interface (for input type radio and checkbox)

E:DEFAULT Specifies the style of a radio box or check box control that is selected by default when the current page is open

E:INDETERMINATE Specifies the style of the entire set of radio boxes when a set of radio boxes is set to the selected state when the page is open

<input type= "Radio" name= "num" >1<input type= "Radio" name= "num" >2<input type= "Radio" name= "num" >3 <style>    input:checked{width:30px; height:30px;} </style>

E:lang (FR) matches the element e that uses the special language. Rarely used

E:not (s) matches elements that do not contain s-selectors E

E:root matches the E element at the root element of the document. Often referred to as HTML elements

E:empty matches elements that do not have any child elements (including text nodes) E

E:enabled matches elements that are in the available state on the user interface E

E:disabled matches an element in the disabled state on the user interface E

E:target matches the element that the related URL points to E

<a href= "#nav1" id= "NAV1" > Navigation one </a><a href= "#nav2" id= "nav2" > Navigation two </a><a href= "#nav3" id= " Nav3 "> Navigation three </a><style>    a{Text-decoration:none;}    a:target{color:red;} </style>

Property Selector

E[att] Select the e element with the ATT attribute

E[att= "Val"] Select the e element with the ATT attribute and the attribute value equals Val

E[att~= "Val"] Select the list of words with the ATT attribute and the attribute value as a space separated by an e element equal to Val

E[att^= "Val"] Select the e element with the ATT attribute and the property value as a string starting with Val

E[att$= "Val"] Select the e element with the ATT attribute and the property value as a string ending in Val

E[att*= "Val"] Select the e element with the ATT attribute and the property value as a string containing Val

E[att|= "Val"] Select the e element with the ATT attribute and the attribute value to begin with Val and the string delimited by the connector "-"

<p class= "A" > Test data 1</p><p class= "QQ" > Test data 2</p><p class= "XYZ abc" > Test Data 3</p><p class= "aa123" > Test data 4</p><p class= "TEST-ABC" > Test data 5</p><p class= "Hello-z-world" > Test Data 6 </p><p class= "y-1" > Test data 7</p><p class= "y-2" > Test data 7</p><style>p[class]{color: Green;} P[class= "QQ"]{color:red;}     p[class~= "abc"]{COLOR:BLUE;} p[class^= "AA"]{color:yellow;} p[class$= "abc"]{COLOR:BLACK;} P[class*= "Z"]{color:orange;} p[class|= "y"]{color: #ccc;} </style>

Pseudo-Object selectors

E:first-letter/e::first-letter the style of the first character within a set object

E:first-line/e::first-line to set the style of the first row within an object

E:before/e::before sets the content that occurs before the object, based on the logical structure of the object tree. Used in conjunction with the Content property

E:after/e::after the content that occurs after the object (based on the logical structure of the object tree). Used in conjunction with the Content property

E::p laceholder styles for setting object text placeholders

E::selection setting the color of the object when it is selected

E:invalid when an element's content cannot be passed through HTML5 by using attributes such as required, pattern, and so on, when the element content does not conform to the format specified by the element

E:valid style When the content of an element is passed through HTML5 by using elements such as required, pattern, or the contents of an element as specified by the check or content of elements that conform to the format defined by the element

<input type= "text" required><style>    input[type= "text"]:invalid{        background:pink;    }    Input[type= "text"]:valid{        background:white;    } </style>

Forward-css Selectors