1.CSS派生选择器
概念：通过依据元素在其位置的上下文关系来定义样式。
实例：
<!--index.html--> <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <link href="mycss.css" type="text/css" rel="stylesheet"> </head> <body> <p><strong>p-label :hello css</strong></p> <ul> <li><strong>li-label :hello cess</strong></li> </ul> </body> </html>
/*mycss.css*/ li strong{ color: brown; } strong{ color: blue; }
运行结果：
2、id选择器
概念：
id选择器可以为标有id的HTML元素制定特定的样式
id选择器以“#”来定义
注：id选择器和派生选择器可以结合使用
实例：
<!--index02.html--> <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <link href="mycss02.css" type="text/css" rel="stylesheet"> </head> <body> <p id="pid">hello css <a href="http://www.baidu.com">baidu</a></p> <div id="divid"> this is a div style </div> </body> </html>
/*mycss02.css*/ #pid{ color: blue; } #pid a{ color: blueviolet; } #divid{ color: brown; }
运行结果：
3、CSS类选择器
概念：类选择器以一个点显示
class也可以用作派生选择器
<!--index.html--> <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <link href="mycss.css" type="text/css" rel="stylesheet"> </head> <body> <p class="p-class">this is a class style <a href="#">baidu</a></p> <div class="div-class"> Hello div！ </div> </body> </html>
/*mycss.css*/ .p-class{ color: blueviolet; } .p-class a{ color: darkcyan; } .div-class{ color: brown; }
运行结果：
4、属性选择器
概念：对带有指定属性的HTML样式设置样式
属性和值选择器
实例：
<!--index.html--> <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style type="text/css"> [title]{ color: blue; } [title=te]{ color: blueviolet; } </style> </head> <body> <p title="t">attribute selectors：属性选择器</p> <p title="te">attrubute and value selectors：属性和值选择器</p> </body> </html>
运行结果：
