1、选择器优先级：
行间选择器>ID选择器>类选择器>标签选择器
web前端：http://www.ujiuye.com/
2、选择器书写规范：
行间选择器：
ID选择器：
<style>
#div1{
width: 100px;
height: 100px;
background-color: red;
}
</style>
一般写在style标签中，以#+ID名称{}的格式进行书写，ID是当前页面唯一的。
类选择器：
<style>
.div1{
width: 100px;
height: 100px;
}
.bgc{
background-color: pink;
}
</style>
类选择器可以是多个class加在同一个元素上以.+class名称{}的格式进行书写。
标签选择器：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style>
div{
width: 100px;
height: 100px;
background-color: gray;
}
</style>
</head>
<body>
<div>1</div>
<div>2</div>
</body>
</html>
适用于当前页面上所有标签为XXX的元素。以标签名{}的格式进行书写。
群组选择器：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style>
div, p, h1{
width: 100px;
height: 100px;
background-color: gray;
}
</style>
</head>
<body>
<div>1</div>
<p>2</p>
<h1>3</h1>
</body>
</html>
用逗号分隔，被逗号分隔的元素（选择器）全部执行统一的代码片段。
包含选择器：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style>
.div1 div{
width: 100px;
height: 100px;
background-color: pink;
}
</style>
</head>
<body>
<div class="div1">
<p>这是一个p标签</p>
<div>div</div>
</div>
</body>
</html>
目标父级元素+空格+目标元素空格 空格代表=下一级(语法)
通配符：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style>
body *{
height: 50px;
margin: 10px;
border: 1px solid red;
}
</style>
</head>
<body>
<div>
div
<p>div>p</p>
</div>
<h1>h1</h1>
<p>p</p>
</body>
</html>
* 通配符找到页面上符合规则的所有元素。一般不建议使用。
更多Web前端知识尽在优就业IT培训：http://www.ujiuye.com/