Css id selector (3) and cssid Selector

Css id selector (3) and cssid Selector
I. ID Selector

The ID selector uses the "#" prefix identifier for identification, followed by the ID name of the specified element.

For example

#box{ width:100px; height:100px;}

The element ID name is unique and can only correspond to a specific element in the document. In HTML, the tag used to build the overall framework should define the ID attribute, because this object is generally unique on the page, fixed, and will not be repeated, such as the Logo inclusion box, navigation bar, subject inclusion box, and copyright area.

Ii. Set the page layout by ID

<! DOCTYPE html PUBLIC "-// W3C // dtd xhtml 1.0 Transitional // EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
@charset "utf-8";/* CSS Document */#header{    margin:0 auto;    width:960px;    height:210px;    border:solid 1px #000000;}#logo{    width:100px;    height:100px;    border:solid 1px #000000;    float:left;}#banner{    margin-left:30px;    float:left;    width:800px;    height:100px;    border:solid 1px #000000;}#nav{    clear:both;    margin:0 auto;    width:800px;    height:100px;    border:solid 1px #000000;}
Iii. Internal class attribute of external ID
<! DOCTYPE html PUBLIC "-// W3C // dtd xhtml 1.0 Transitional // EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
@ Charset "UTF-8";/* CSS Document * // * parent style */# father {width: 500px; height: 500px; border: solid 2px blue; margin: 5px;}/* set the tag div Mode Under the parent style through the parent style */# father div {width: 100px; height: 100px; border: solid 1px red; padding: 10px; margin: 10px; background-color: # 0000FF;}/* set the class under the parent style through the parent style */# father. child1 {width: 100px; height: 100px; margin: 20px; padding: 10px; border: solid 5px # FF00FF; background-color: #66FF00 ;} /* set the class under the parent style through the parent style */# father. child2 {width: 100px; height: 100px; margin: 10px; padding: 10px; border: solid 5px #00FF00; background-color: # FF0000 ;} /* setting the class style directly does not work because the above # father div has already been set. The class selector priority here is smaller than the label selector */. child3 {width: 100px; height: 100px; margin: 10px; padding: 10px; border: solid 10px # 0000FF; background-color: # FF00FF ;}