id選擇器

id選擇器的定義與用法:

語法結構一:

##myid{ Rules }

此語法結構能夠選擇id為myid的元素。

語法結構二:

E#myid{ sRules }

此語法結構能夠選擇id為myid的E元素。

實例程式碼:

<!DOCTYPE html>
<html>
<head>
<meta charset=" utf-8">
<meta name="author" content="http://ask.php.cn/" />
<title>php中文网</title>
<style type="text/css">
#mytest{
  color:blue;
}
</style>
</head>
<body>
<div>
  <ul>
    <li id="mytest">php中文网欢迎您</li>
    <li>php中文网</li>
  </ul>
  <p id="mytest">php中文网欢迎您</p>
</div>
</body>
</html>

程式碼能夠把id為mytest元素的文字顏色設定為藍色。

特別說明:id在整個html文檔中應該是唯一的,但是下面的文檔中有兩個元素的id是相同的,但是還是實現了我們想要的效果,不過在大家實際操作中要杜絕這種現象。 

<!DOCTYPE html>
<html>
<head>
<meta charset=" utf-8">
<meta name="author" content="http://ask.php.cn/" />
<title>php中文网</title>
<style type="text/css">
li#mytest{
  color:blue;
}
</style>
</head>
<body>
<div>
  <ul>
    <li id="mytest">php中文网欢迎您</li>
    <li>php中文网</li>
  </ul>
  <p>php中文网欢迎您</p>
</div>
</body>
</html>

程式碼能夠把id為mytest的li元素中的文字顏色設定為藍色。


繼續學習
||
<!DOCTYPE html> <html> <head> <meta charset=" utf-8"> <meta name="author" content="http://ask.php.cn/" /> <title>php中文网</title> <style type="text/css"> li#mytest{ color:blue; } </style> </head> <body> <div> <ul> <li id="mytest">php中文网欢迎您</li> <li>php中文网</li> </ul> <p>php中文网欢迎您</p> </div> </body> </html>