1.派生选择器
派生选择器，允许你根据文档的上下文关系，来确定某个标签的样式。
1 <DOCTYPE html> 2 <html> 3 <meta http-equiv="Content-Type" content="text/html" charset="utf-8"/> 4 <head> 5 <title>HTML框架</title> 6 <style type="text/css"> 7 li strong 8 { 9 font-size:20px; 10 color:#FF9999; 11 font-style:italic; 12 } 13 </style> 14 </head> 15 <body> 16 <P><strong>我是Strong标签里面的内容</strong></p> 17 <ol> 18 <li><strong>我是Li标签里面的Strong标签里面的内容</strong></li> 19 </ol> 20 </body> 21 </html>
2.ID选择器
ID选择器，可以为标有特定id的HTML元素指定特定的样式。
ID选择器，以“#”来定义。
下面的两个 id 选择器，第一个可以定义元素的颜色为红色，第二个定义元素的颜色为绿色：
#red{color:red;}#green{color:green;}
注意：id 属性只能在每个 HTML 文档中出现一次。想知道原因吗，请参阅 XHTML:网站重构。
1 <DOCTYPE html> 2 <html> 3 <meta http-equiv="Content-Type" content="text/html" charset="utf-8"/> 4 <head> 5 <title>HTML框架</title> 6 <style type="text/css"> 7 方法一； 8 div #myPage 9 { 10 color:#FF9999; 11 font-size:30px; 12 font-style:italic; 13 } 14 方法二： 15 #myPage 16 { 17 color:#FF9999; 18 font-size:30px; 19 font-style:italic; 20 } 21 22 </style> 23 </head> 24 <body> 25 <div> 26 <p id="myPage">我是段落标签，在div标签里面的<p> 27 </div> 28 </body> 29 </html>
3.CSS类选择器
在CSS中，类选择器以一个点号显示：
.center{text-align:center}
注意：类名的第一个字符不能使用数字！它无法在 Mozilla 或 Firefox 中起作用。
和 id 一样，class 也可被用作派生选择器：
1 <DOCTYPE html> 2 <html> 3 <meta http-equiv="Content-Type" content="text/html" charset="utf-8"/> 4 <head> 5 <title>HTML框架</title> 6 <style type="text/css"> 7 .myClass 8 { 9 background-color:#DD6666; 10 } 11 12 div .myP 13 { 14 background-color:#CCCCCC; 15 } 16 17 18 </style> 19 </head> 20 <body> 21 <div class="myClass"> 22 武汉软件工程职业学院 23 </div> 24 <div> 25 <p class="myP">我是段落标签的内容</p> 26 </div> 27 </body> 28 </html>
类名第一个字符是数字的情况下，在火狐浏览器中:
4,CSS属性选择器
对带有指定属性的HTML元素设置样式，可以为指定属性的HTML元素设置样式，而不限于class和id属性
1 <DOCTYPE html> 2 <html> 3 <meta http-equiv="Content-Type" content="text/html" charset="utf-8"/> 4 <head> 5 <title>HTML框架</title> 6 <style type="text/css"> 7 [class] 8 { 9 background-color:#FF9999; 10 } 11 12 13 14 </style> 15 </head> 16 <body> 17 <div class="myClass"> 18 武汉软件工程职业学院 19 </div> 20 <div> 21 <p class="11myP">我是段落标签的内容</p> 22 </div> 23 </body> 24 </html>
属性和值选择器：
1 <DOCTYPE html> 2 <html> 3 <meta http-equiv="Content-Type" content="text/html" charset="utf-8"/> 4 <head> 5 <title>HTML框架</title> 6 <style type="text/css"> 7 [class] 8 { 9 background-color:#FF9999; 10 } 11 [class=myClass] 12 { 13 border:3px solid #000000; 14 } 15 16 17 18 19 20 </style> 21 </head> 22 <body> 23 <div class="myClass"> 24 武汉软件工程职业学院 25 </div> 26 <div> 27 <p class="11myP">我是段落标签的内容</p> 28 </div> 29 </body> 30 </html>
效果图：
属性和值选择器--多个值
1 <DOCTYPE html> 2 <html> 3 <meta http-equiv="Content-Type" content="text/html" charset="utf-8"/> 4 <head> 5 <title>HTML框架</title> 6 <style type="text/css"> 7 8 9 [name~=hello] 10 { 11 border:5px solid red; 12 } 13 14 15 16 </style> 17 </head> 18 <body> 19 <div class="myClass" name="hello world" > 20 武汉软件工程职业学院 21 </div> 22 <div> 23 <p class="11myP" name="CSS hello" >我是段落标签的内容</p> 24 </div> 25 </body> 26 </html>
效果图：
