二、CSS选择器

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>