一. 标签选择器
根据标签名选择元素。语法：标签名{}
p{
color:red;
}
/*将该样式应用到所有的p标签*/
二. 类选择器
根据class属性选择元素。语法：.className{}
注意，class属性的值可重复
.jia{
color:red;
}
/*将该样式应用到所有class名为jia的元素*/
三. ID选择器
根据id属性的值选择元素。语法：#idName{}
注意，id属性的值不可重复
#jia{
color:red;
}
/*将该样式应用到id名为jia的元素*/
四. 通用选择器
通用选择器，可以同时选中页面中的所有元素。语法：*{}
*{
color:red;
}
/*将该样式所有元素*/
五. 复合选择器
复合选择器（交集），可以同时使用多个选择器，这样可以选择同时满足多个选择器的元素
语法：选择器1选择器2{} ，注意两个选择器是紧挨着的，下面的p.zj是因为class的选择器是.zj
选择器一必须是标签选择器，第二个必须是类选择器或者ID选择器；这两个选择器之间不能有空格。
<!DOCTYPE html>
<html>
<head>
<title> 标题 </title>
<meta charset='UTF-8'/>
<style>
p.zj{
color:red;
}
</style>
</head>
<body>
<p class = "zj">
段落一
</p>
<p>
段落二
</p>
</body>
</html>
六. 群组选择器
群组选择器（并集），可以同时使用多个选择器，多个选择器将被同时应用指定的样式。
语法：选择器1,选择器2,选择器3{}
<!DOCTYPE html>
<html>
<head>
<title> 标题 </title>
<meta charset='UTF-8'/>
<style >
p,.zj,#jia{
color:red;
}
</style>
</head>
<body>
<p class = "zj">
段落一
</p>
<p id ="jia">
段落二
</p>
<p >
段落三
</p>
<div>
段落四
</div>
</body>
</html>
七. 标签之间的关系
-
祖先元素：直接或间接包含后代元素的元素
-
后代元素：直接或间接被祖先元素包含的元素
-
父元素：直接包含子元素的元素
-
子元素：直接被父元素包含的元素
-
兄弟元素：拥有相同父元素的元素
<!DOCTYPE html> <html> <head> <title> 标题 </title> <meta charset='UTF-8'/> </head> <body> <div> <span> <p> </p> </span> </div> <hr /> </body> </html>
body标签是div、span、p、hr 标签的祖先元素
div、span、p、hr 标签是body的后代元素
body是div的父元素，div是span的父元素，span是p的父元素
div是body的子元素，span是div的子元素，p是span是子元素
head 和 body 标签是兄弟元素，hr和div也是兄弟元素
八. 后代选择器
后代选择器可以根据标签之间的关系，为处在元素内部的后代元素设置样式
语法：祖先元素 后代元素 后代元素{}
<!DOCTYPE html>
<html>
<head>
<title> 标题 </title>
<meta charset='UTF-8'/>
<style >
div span{
color:blue;
}
</style>
</head>
<body>
<div>
<span>
张甲博客
</span>
</div>
<br />
<span>
张甲博客
</span>
</body>
</html>
九. 子元素选择器
子元素选择器可以给一个元素的子元素设置样式
语法：父元素>子元素{}
<!DOCTYPE html>
<html>
<head>
<title> 标题 </title>
<meta charset='UTF-8'/>
<style >
div>p{
color:blue;
}
</style>
</head>
<body>
<div>
<p>
张甲博客
</p>
</div>
<div>
<span>
<p>
张甲博客
</p>
</span>
</div>
<p>
张甲博客
</p>
</body>
</html>
十. 兄弟选择器
除了根据祖先父子关系，还可以根据兄弟关系查找元素
语法：
查找后面一个兄弟元素 ：兄弟元素+兄弟元素{}
<!DOCTYPE html>
<html>
<head>
<title> 标题 </title>
<meta charset='UTF-8'/>
<style >
div+p{
color:blue;
}
</style>
</head>
<body>
<div>
张甲博客
</div>
<p>
张甲博客
</p>
<p>
张甲博客
</p>
</body>
</html>
查找后边所有的兄弟元素 ： 兄弟元素~兄弟元素{}
<!DOCTYPE html>
<html>
<head>
<title> 标题 </title>
<meta charset='UTF-8'/>
<style >
div~p{
color:blue;
}
</style>
</head>
<body>
<div>
张甲博客
</div>
<p>
张甲博客
</p>
<p>
张甲博客
</p>
</body>
</html>
十一. 伪类和伪元素
有时候，需要选择本身没有标签，但是仍然易于识别的网页部位，比如段落首行或鼠标滑过的连接。CSS为他们提供一些选择器：伪类和伪元素
1. 链接
正常链接(未访问过的）
a:link {
color:red;
}
访问过的链接（历史记录里存在的，且只能定义字体颜色）
a:visited {
color:green;
}
鼠标悬浮的链接
a:hover {
color:yellow;
}
正在点击的链接
a:active {
color:pink;
}
2. 其他伪类
<!DOCTYPE html>
<html>
<head>
<title> 标题 </title>
<meta charset='UTF-8'/>
<style type="text/css">
/* 获取获取焦点:focus */
input:focus {
background-color:red;
}
/* 选中的元素::selection */
p::selection {
color:yellow;
background-color:blue;
}
</style>
</head>
<body>
<input type="text" />
<p>哈哈哈哈<p>
</body>
</html>
请登录之后再进行评论