"HTML" CSS Selector

CSS selectors are:

• Element Selector
• Selector Group *
• Class Selector
• ID Selector
• Property Selector *
• Descendant Selector *
• Child element Selector *
• Adjacent Sibling selector *

Selector grouping:

h1,h2{/* define style for H1,h2 */   ...}

wildcard character "*":

*{   ...} /* with "*" define styles for all elements */

Class Selector + Tag Selector:

class="cww"class="cww" ...>A.  cww{    ...      }

Multi-Class selectors:

class="p1"class="p2"class= " p1 p2 ">...</p>.p1{...   }.   p2{...   }. p1.p2{...   }

where ". P1.p2" contains its own style and the previous ". P1" and ". P2" styles.

ID selector:

<p id="cww">...</p>#cww {   ...} /* use "#" to locate */

• Use JS to get ID
• IDS can only be used once, and classes can be used multiple times
• ID selectors can not be used in combination

Property selector:

 <a href= http://www.cww.com  Span style= "color: #800000;" > " >...</a><a href="  http:/ /www.mochayo13.com   >...</a> /*   */ [href]{.}  

• The property selector can be defined by a specific property value.
• Can be selected based on partial attributes,

  <p tltle="cw"></p><p tltle="cww"></p ><p tltle="cww13"></p>[title~=cww " ]{   ...} /* "~" can be understood to be omitted, that is, the style only acts on some elements of the title property value that contain the "CWW" string */

Descendant selector:

<! DOCTYPE html><p> Mina sang,<b> here is <i> Chen Play </i></b>, Good morning qwq</p></body><style>    P b i{       color:blue;    } </style>

The effect is as follows:

This is much faster than using class,id to achieve.

Child element Selector:

/* still use the above example: */<! DOCTYPE html>    p>b>i{       color:blue;    } </style>

Note that this is the format defined by the child element, denoted by a layer of symbols ">":

p>b>  i{       color:blue;    }

• Note the difference between the child element selector and the descendant selector, the former to define the <i></i> content needs to be found <b></b> first, a total of three layers of relationship one can not be missed, while the latter can be directly from the <p> go to <i > can omit the middle <b> layer.

Adjacent sibling selector:

• function from the back of an adjacent element
• Must belong to the same parent element

"HTML" CSS Selector