一、CSS选择器之标签选择器(元素选择器)
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>选择器</title> <style type="text/css"> /** * 标签选择器 * 作用：通过元素选择器可以选择页面中的所有指定元素 * 语法：标签名{} */ p{ background-color: yellow; } </style> </head> <body> <h2>静夜思</h2> <p>床前明月光，</p> <p>疑是地上霜。</p> <p>举头望明月，</p> <p>低头思故乡。</p> </body> </html>
二、CSS选择器之id选择器
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>选择器</title>
<style type="text/css">
/**
* 标签选择器
* 作用：通过元素选择器可以选择页面中的所有指定元素
* 语法：标签名{}
*/
p{
background-color: yellow;
}
/**
* id选择器
* 作用：通过元素的id属性值来选择唯一的元素
* 语法：#id属性值{}
*/
#four{
background-color: aqua;
}
</style>
</head>
<body>
<h2>静夜思</h2>
<p>床前明月光，</p>
<p>疑是地上霜。</p>
<p>举头望明月，</p>
<p id="four">低头思故乡。</p>
</body>
</html>
三、CSS选择器之类选择器
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>选择器</title>
<style type="text/css">
/**
* 标签选择器
* 作用：通过元素选择器可以选择页面中的所有指定元素
* 语法：标签名{}
*/
p{
background-color: yellow;
}
/**
* id选择器
* 作用：通过元素的id属性值来选择唯一的元素
* 语法：#id属性值{}
*/
#four{
background-color: aqua;
}
/**
* 类选择器i
* 作用:通过元素的class属性值选中一组元素
* 语法：.class属性值{}
*/
.multi{
background-color: antiquewhite;
}
</style>
</head>
<body>
<h2>静夜思</h2>
<p class="multi">床前明月光，</p>
<p class="multi">疑是地上霜。</p>
<p class="multi">举头望明月，</p>
<p id="four">低头思故乡。</p>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>选择器</title>
<style type="text/css">
/**
* 标签选择器
* 作用：通过元素选择器可以选择页面中的所有指定元素
* 语法：标签名{}
*/
p{
background-color: yellow;
}
/**
* id选择器
* 作用：通过元素的id属性值来选择唯一的元素
* 语法：#id属性值{}
*/
#four{
background-color: aqua;
}
/**
* 类选择器
* 作用:通过元素的class属性值选中一组元素
* 语法：.class属性值{}
*/
.multi{
background-color: antiquewhite;
}
.hello{
font-weight: bold;
}
</style>
</head>
<body>
<h2>静夜思</h2>
<!--
时间：2016-12-04
描述：可以有多个选择器作用于同一个元素
-->
<p class="multi hello">床前明月光，</p>
<p class="multi">疑是地上霜。</p>
<p class="multi">举头望明月，</p>
<p id="four">低头思故乡。</p>
</body>
</html>
四、CSS选择器之分组选择器(并集选择器)
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>选择器</title>
<style type="text/css">
/**
* 分组选择器(并集选择器)
* 作用：通过选择器分组可以同时选中多个选择器对应的元素
* 语法:选择器1，选择器2，选择器3{}
*/
p,#four,.three{
background-color: aquamarine;
}
</style>
</head>
<body>
<h2>静夜思</h2>
<!--
时间：2016-12-04
描述：可以有多个选择器作用于同一个元素
-->
<p class="multi hello">床前明月光，</p>
<p class="multi">疑是地上霜。</p>
<p class="three">举头望明月，</p>
<p id="four">低头思故乡。</p>
</body>
</html>
五、CSS选择器之通配选择器
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>选择器</title>
<style type="text/css">
/**
* 通配选择器
* 选中页面中的所有元素
* 语法：*{}
*/
*{
background-color: red;
}
</style>
</head>
<body>
<h2>静夜思</h2>
<!--
时间：2016-12-04
描述：可以有多个选择器作用于同一个元素
-->
<p class="multi hello">床前明月光，</p>
<p class="multi">疑是地上霜。</p>
<p class="three">举头望明月，</p>
<p id="four">低头思故乡。</p>
</body>
</html>
六、CSS选择器之复合选择器（交集选择器）
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>选择器</title>
<style type="text/css">
/**
* 复合选择器（交集选择器）
* 作用：可以选中同时满足多个选择器的元素
* 语法：选择器1选择器2选择器3{}
*/
p.three{
background: yellow;
}
</style>
</head>
<body>
<h2>静夜思</h2>
<p class="multi hello">床前明月光，</p>
<p class="multi">疑是地上霜。</p>
<p class="three">举头望明月，</p>
<p id="four">低头思故乡。</p>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>选择器</title>
<style type="text/css">
/**
* 标签选择器
* 作用：通过元素选择器可以选择页面中的所有指定元素
* 语法：标签名{}
*/
p{
background-color: yellow;
}
/**
* id选择器
* 作用：通过元素的id属性值来选择唯一的元素
* 语法：#id属性值{}
*/
#four{
background-color: aqua;
}
/**
* 类选择器
* 作用:通过元素的class属性值选中一组元素
* 语法：.class属性值{}
*/
.multi{
background-color: antiquewhite;
}
.hello{
font-weight: bold;
}
.three{
font-family: "楷体";
}
/**
* 分组选择器(并集选择器)
* 作用：通过选择器分组可以同时选中多个选择器对应的元素
* 语法:选择器1，选择器2，选择器3{}
*/
p,#four,.three{
background-color: aquamarine;
}
/**
* 通配选择器
* 选中页面中的所有元素
* 语法：*{}
*/
*{
background-color: red;
}
/**
* 复合选择器（交集选择器）
* 作用：可以选中同时满足多个选择器的元素
* 语法：选择器1选择器2选择器3{}
*/
p.three{
background: yellow;
}
</style>
</head>
<body>
<h2>静夜思</h2>
<p class="multi hello">床前明月光，</p>
<p class="multi">疑是地上霜。</p>
<p class="three">举头望明月，</p>
<p id="four">低头思故乡。</p>
</body>
</html>
