☆ ☆ distal CSS selectors review ---

<! DOCTYPE HTML > 
< HTML lang = "EN" > 
< head > 
    < Meta charset = "UTF-. 8" > 
    < title > three kinds of ways introduced css </ title > 
    <-! Internal introduced -> 
    < style > 
        body { 
        margin : 0 ; 
        } 
    </ style > 
    <-! iMport -> 
    < Link the rel = "this stylesheet" the href = "selector review.css">
</head > 
< body > 
<-! inline style -> 
< P style = "Color: Red" > This is a color of title </ P > 
</ body > 
</ HTML >

/ * Note that this is the mother of codes of a single line comment * / 
/ * This is a multi-line comment 
multi-line comments 
123 
* / 

/ * css has called the css each composed of two parts consisting of a first cascading style sheet is a second selector there is divided Disclaimer attributes and values * / 

/ * base selector into tag selector / id element selectors and selector class selector universal selector below to introduce a * / 

/ * the tag selector / selector element * / 
div { 
    Color : Red ; 
} / * ID selector * / 
#id { background : Red } / * class selector * / 
.class { 
    font-size : 50px ; 
} / * universal selector





* / 
* { Font-weight : Bold } / * then the packet is divided into selector son descendant selectors selector selector next to his brother selector * / / * descendant selectors * / / * specified div all span * / 
span div { Color : Red } / * the son selector div span all of a * / 
div> span { Color : Red } / * the next adjacent selector div tag label * / 
div + span { Color : Red } / * brother selector div similar tags * / 
div ~ span { Color











: Red } / * attribute selector into an element having a name with an element name and an element name having a value and label values in brackets in the reaction was seen attribute selector * / 
[title] { Color : Red } 
[ = title '234'] { Color : Red } 
INPUT [title = '234'] { Color : Red }
 / * packets with different labels nested group is the same nested selector is different selector together * / / * packet * / 
div, span, P { Color : Red }
 / * nested * / 
#id, .class, div span { 
    Color : Red






; 
} / * Pseudo class selector * / / * Tags: Add Style * / 
A: Link   { Color : Red } / * unvisited links color * / 
A: hover { Color : Red } / * move the mouse on the label * / 
a: Active { Color : Red } / * selected link * / 
a: visited { Color : Red } / * link has visited * / / * when the input focus input box acquired pattern * / 
input: focus { 
  Outline







: None ; 
  background-Color : #eee ; 
} / * pseudo-element selectors * / 
P: First-Letter { font-size : 50px ; Color : Red ;} / * inserted before each <p> element content * / 
P: before { 
  content : "$" ; 
  Color : Red ; 
} / * insert after each <p> element * / 
P: after { 
  content : "?" ; 
  Color : Blue ; 
}