HTML/CSS/Layout/Position Selector

Материал из Web эксперт
Перейти к: навигация, поиск

Descendant Selector

   <source lang="html4strict">

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" 

 "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html xmlns="http://www.w3.org/1999/xhtml"> <head> <title></title> <style type="text/css"> div *.my-class { 

   font-size:1.2em; 
   font-weight:bold;

} </style> </head> <body>

p.my-class

  1. div ol li
  2. div ol li

  3. div ol li p.my-class

</body> </html> 

</source>


Descendant Selector: id element

   <source lang="html4strict">

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" 

 "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html xmlns="http://www.w3.org/1999/xhtml"> <head> <title></title> <style type="text/css">

  1. my-id p { 
   background-color:gold;

}

</style> </head> <body>

p.my-class

  1. div ol li
  2. div ol li

  3. div ol li p.my-class

</body> </html> 

</source>


Position Selectors Demo

   <source lang="html4strict">

<html xmlns="http://www.w3.org/1999/xhtml"> <head> <title></title> <style type="text/css"> div * .my-class { 

 font-size: 1.2em;
 font-weight: bold;

} </style> </head> <body>

p.my-class

  1. div ol li
  2. div ol li

  3. div ol li p.my-class

</body> </html> 

</source>


To select descendant elements

   <source lang="html4strict">

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" 

 "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html xmlns="http://www.w3.org/1999/xhtml"> <head> <title></title> <style type="text/css">

  1. my-id p { background-color:gold; }

</style> </head> <body>

p.my-class

  1. div ol li
  2. div ol li

  3. div ol li p.my-class

</body> </html> 

</source>
Источник — «http://wbex.ru/index.php?title=HTML/CSS/Layout/Position_Selector&oldid=5009»