1.通配符选择器
* =>表示选中页面中所有元素 （ 如下，页面所有标签中的文字都是蓝色）
<style>
* {
color: blue;
}
</style><div>这是div中的文字</div>
<p>这是p中的文字</p>
<a href="#">这是a中的文字</a>
<h1>这是h1中的文字</h1>2.子元素选择器（亲儿子选择器）
> =>选中直接子元素 （如下，ul>li设置li的文字颜色，不会改变p标签中的元素）
<style>
p {
color: green;
}
ul>li {
color: red;
}
</style><ul>
<li>
这里是小li是ul的直接子元素（亲儿子）
<p>这里是p，是li的直接子元素</p>
</li>
</ul>3.后代选择器（儿子，孙子）
父子元素之间以空格隔开
（将2中的style部分的代码修改成如下） （p的颜色也会被修改）
p {
color: green;
}
ul li {
color: red;
}
ul li p {
color: red;
}4.并集选择器-----可以同时选择多组标签
不同标签之间用逗号隔开
<style>
div,p,a {
color: pink;
}
</style><div>这是div中的文字</div>
<p>这是p中的文字</p>
<a href="#">这是a中的文字</a>5.伪类选择器
任何标签都可用，以下以a标签举例（如果是div做鼠标经过----div:houer{})
<style>
a:link {
/*未被访问的链接*/
color: red;
}
a:visited {
/* 已经被访问的链接 */
color: green;
}
a:hover {
/* 鼠标经过 */
color: yellow;
}
a:active {
/* 鼠标按下未弹起 */
color: blue;
}
</style><a href="#">这是一个链接</a>未点击时：
点击后：
鼠标经过：
鼠标按下未弹起：
6.伪类选择器
用于选取获得焦点的表单元素 =>一般情况<input>标签会用到
<style>
input:focus {
background-color: skyblue;
}
</style><input type="text">打开页面时：
将光标定到输入框时：
7.CSS3新增属性选择器
-
例div[value]{} ---- 有value这个属性的div
-
div[value] { color: pink; }<div value="name">这是有value属性的div</div> <div>普通的div</div> -
例input[type=text]{} ---- type是text的input
-
input[type=text] { background-color: aqua; }type为text的<input type="text"> type为password的<input type="password"> -
例div[class^=icon]{} ---- class是以icon开头的div
-
div[class^=icon] { color: red; }<div class="icon1">icon1</div> <div class="icon2">icon2</div> <div class="icon3">icon3</div> <div class="icon4">icon4</div> -
例div[class$=data]{} ---- class是以data结尾的div
-
div[class$=data] { color: red; }<div class="1data">1data</div> <div class="2data">2data</div> <div class="3data">3data</div> <div class="4data">4data</div> -
例div[class*=icon]{} ---- class中含icon字段的div
-
div[class*=icon] { color: red; }<div class="icon">icon</div> <div class="1icon">1icon</div> <div class="icon2">icon2</div> <div class="ic3on">ic3on</div>
8.CSS3新增结构伪类选择器
-
E:first-child 匹配父元素中的第一个子元素E
-
li:first-child { color: blue; }<ul> <li>我是ul的第1个孩子</li> <li>我是ul的第2个孩子</li> <li>我是ul的第3个孩子</li> <li>我是ul的第4个孩子</li> <li>我是ul的第5个孩子</li> <li>我是ul的第6个孩子</li> </ul> -
E:last-child 匹配父元素中的最后一个子元素E
-
li:last-child { color: blue; }<ul> <li>我是ul的第1个孩子</li> <li>我是ul的第2个孩子</li> <li>我是ul的第3个孩子</li> <li>我是ul的第4个孩子</li> <li>我是ul的第5个孩子</li> <li>我是ul的第6个孩子</li> </ul> -
E:nth-child(n) 匹配父元素中的第n个子元素E
-
n可以是数字：
li:nth-child(3) { color: blue; }body部分的代码同前两种一样
n可以是关键字：even偶数，odd奇数
li:nth-child(odd) { color: blue; }body部分的代码同前两种一样
n可以是表达式，此时n会从0开始，每次加一，直到n-1
li:nth-child(5n) { /*表示5的倍数*/ color: blue; }body部分的代码同前两种一样
li:nth-child(-n+3) { /*表示选中前三个*/ color: blue; }body部分的代码同前两种一样
-
E:first-of-type 匹配父元素中指定类型的第一个子元素E
div:first-of-type {
color: blue;
}<section>
<p>这是p元素</p>
<div>我是section的第一个div孩子</div>
<div>我是section的第二个div孩子</div>
</section>
它和first-child的区别是：当使用它时会先找到指定类型的标签，再找first第一个
而后者是先找到第一个子元素，如果类型不符合，则无效果
如下：将第一段代码修改成使用first-child （结果没有任何的效果）
div:first-child {
color: blue;
}
-
E:last-of-type 匹配父元素中指定类型的最后一个子元素E
div:last-of-type {
color: blue;
}<section>
<p>这是p元素</p>
<div>我是section的第一个div孩子</div>
<div>我是section的第二个div孩子</div>
<p>这是p元素</p>
</section>
与last-child的区别同上类似
-
E:nth-of-type(n) 匹配父元素中指定类型的第n个子元素E
div:nth-of-type(2) {
color: blue;
}<section>
<p>这是p元素</p>
<div>我是section的第一个div孩子</div>
<div>我是section的第二个div孩子</div>
<p>这是p元素</p>
</section>与nth-child的区别同上类似，用法大体相同
9.CSS3新增伪元素选择器
-
::before 在元素内部的前面插入内容
div::before {
/*使用时记得把地址换成自己的图片地址*/
content: url(../image/奔跑.jpg);
} <div>这是一个div</div>
-
::after 在元素内部的后面插入内容
div::after {
content: url(../image/奔跑.jpg);
}<div>这是一个div</div>
特点：
- 会创建一个元素（行内）
- 在文档树中找不到
- 必须有content属性
感受：知识点真的很广很杂很难记，加油！！！