选择器：会告诉浏览器，网页上的那些元素需要什么样的样式。
选择器都存在<html>--<head>--<style>中
元素选择器
根据标签的名字选取制定元素
语法：
标签名{}
列如:
background-color:red;
}
(选中页面中所有p标签，改变背景颜色)
类选择器
根据元素的class属性值选取指定元素
语法：
.classname{}
列如
.p2{
color: green;
} (存在于style中)
<p class="p2">哈哈，我是</p> （存在体标签中）
ID选择器
根据元素的id属性值选取指定元素
语法：
id{}
列如
abc{
color:green;
}
<p id="abc">娃哈哈</p>
复合选择器 （交集选择器）
同时使用多个选择器，选择同时满足多个选择器的元素
语法：
选择器1 .选择器2{}
列如
div.p{
color:red;
}
(满足div下属于p标签的颜色设置为红色)
通用选择器
同时选中页面中所有的元素
语法：
*{}
列入
*{
color:red;
}
(所有元素设置为红色)
祖先元素
直接或间接包含后代元素的元素
后代元素
直接或间接被祖先元素包含的元素
父元素
直接包含子元素的元素
子元素
直接被父元素包含的元素
兄弟元素
拥有相同父元素的元素
后代选择器
根据标签的关系，为处在元素内部的代元素设置样式
语法：
祖先 后代{}
列入
color:red;
}
(div父元素下的p元素颜色设置为红色)
伪类和伪元素
有时候需要选择本身没有标签，但是仍然能够轻易被识别的网页部位，CSS 为他们提供了此类选择器
给链接定义样式
正常连接（没有被访问过的网页）
a：link
访问过得链接
a:visited
鼠标划过的链接
a:hover
正在点击的链接
a:active
输入文本框
<input type="text">
获取焦点（输入点击文本框内时）
：focus
指定元素前
：before
指定元素后
：after
选中的元素
：：selection
网友评论