标签选择器
标签选择器是指用HTML标签名作为选择器，可以把某一类标签全部选择出来，然后为页面中某一类标签指定统一的CSS样式。
比如：将所有的p标签选出来，颜色设置为红色。
p {color:red;}
优点是能快速为页面中同类型的标签统一样式，缺点是不能设计差异化样式。
类选择器
类选择器使用.（英文点号）进行标识，后面紧跟类名（我们自定义的）。
比如有如下标签：
<p class='redClass'></p>
使用类选择器选择标签：
.redClass {color:red;}
- 类选择器可以为元素对象定义单独或相同的样式，可以选择一个或者多个标签
- 长名称可以使用中横线或者驼峰来为选择器命名。
- 尽量不要纯数字、中文、下划线等命名，尽量使用英文字母来表示。
为什么CSS不推荐使用下划线?
- 浏览器兼容问题 (比如使用"下划线tips"的选择器命名，在IE6是无效的)
- 能良好区分JavaScript变量命名（JS变量命名用"下划线"）
注意：
我们可以给标签指定多个类名，从而达到给这个标签设置更多属性的目的。各个类名中间用空格隔开，多类名在后期布局比较复杂的情况下，还是较多使用的。
<div class="pink fontWeight font20">亚瑟</div>
id选择器
id选择器使用#进行标识，后面紧跟id名，比如选择如下标签：
<p id="only"> </p>
使用id选择器：
#only {color:red;}
元素的id值是唯一的，只能对应于文档中某一个具体的元素。
W3C标准规定，在同一个页面内，不允许有相同名字的id对象出现，但是允许相同名字的class。
通配符选择器
通配符选择器用*号表示，意思就是选择所有的标签，它是所有选择器中作用范围最广的，能匹配页面中所有的元素。
例如下面的代码，使用通配符选择器定义CSS样式，清除所有HTML标记的默认边距。
* {
margin: 0; /* 清除外边距*/
padding: 0; /* 清除内边距*/
}
通配符选择器会匹配页面所有的元素，降低页面响应速度，不建议随便使用。
后代选择器
后代选择器用来选择元素的子孙后代，其写法就是把外层标签写在前面，内层标签写在后面，中间用空格分隔，先写父亲爷爷，再写儿子孙子。
比如选择.redClass类里面的h3标签:
.redClass h3 {color:red;}
当标签发生嵌套时，内层标签就成为外层标签的后代，子孙后代都可以这么选择，或者说它能选择任何包含在内的标签。
子元素选择器
子元素选择器只能选择某元素的子元素(亲儿子)，这里的子指的是亲儿子不包含孙子重孙子之类。
其写法就是把父级标签写在前面，子级标签写在后面，中间跟一个 > 进行连接：
.redClass > h3 {color:red;}
交集选择器
交集选择器由两个选择器构成，其中第一个为标签选择器，第二个为类选择器，找到的标签必须满足既有标签一的特点，也有标签二的特点，两个选择器之间不能有空格，也就是没有符号。
交集选择器是 既...又 的意思，如，选择添加了.redClass类名的p标签：
p.redClass {color:red;}
用的相对来说比较少，不太建议使用。
并集选择器
如果某些标签定义相同的样式，就可以利用并集选择器，并集选择器是通过 , 连接而成的，所有被连接的选择器都会执行后面样式，通常用于集体声明。
任何形式的选择器，都可以作为并集选择器的一部分。
比如：.one类、 p、#test 这三个选择器选中的标签都会执行颜色为红色：
.one, p, #test {color:red;}
结构伪类选择器
结构伪类选择器的本质就是选中第几个子元素，格式如下：
代码演示：
ul li:first-child {
background-color: lightseagreen;
}
ul li:last-child {
background-color: lightcoral;
}
/* 匹配 ul 中第三个 li */
ul li:nth-child(3) {
background-color: aqua;
}
-
n 可以是数字，如果 n 是数字，就是选中第 n 个，这里的 n 从 1 开始。
-
n 可以是公式，如果 n 是公式，则公式里的 n 从 0 开始计算，当是第 0 个元素或者超出了元素的个数会被忽略，常见的公式如下：
- n 可以是关键字，常见的关键字有
even偶数、odd奇数。
示例代码：
<style>
/* 偶数 */
ul li:nth-child(even) {
background-color: aquamarine;
}
/* 奇数 */
ul li:nth-child(odd) {
background-color: blueviolet;
}
/* 匹配 ul 中的所有 li */
ul li:nth-child(n) {
background-color: lightcoral;
}
/* 偶数 */
ul li:nth-child(2n) {
background-color: lightskyblue;
}
/* 奇数 */
ul li:nth-child(2n + 1) {
background-color: lightsalmon;
}
/* 选择第 0 5 10 15... */
ul li:nth-child(5n) {
background-color: orangered;
}
/* 从第5个开始往后选择 */
ul li:nth-child(n + 5) {
background-color: peru;
}
/* -n + 5 前五个 */
ul li:nth-child(-n + 5) {
background-color: tan;
}
</style>
补充：E:nth-child(n) 和 :nth-child(n) 的区别
E:nth-child(n) 选择父元素里面的第n个子元素，并且是 E 类型
:nth-child(n) 选择父元素里面的第n个子元素，不管是什么类型
代码演示：
<style>
/* 选中 div 中的第2个子元素 */
div :nth-child(2) {
background-color: lightpink;
}
/* 选中 div 中的第2个子元素，并且元素是 p */
div p:nth-child(2) {
background-color: lightpink;
}
</style>
链接伪类选择器
链接伪类选择器用于向某些选择器添加特殊的效果，比如给a标签添加特殊效果。都是利用交集选择器实现，如下：
a:link {未访问的链接}
a:visited {已访问的链接}
a:hover {鼠标移动到链接上}
a:active {选定的链接}
写的时候，他们的顺序尽量不要颠倒，按照 lvha 的顺序，否则可能引起错误，实际工作开发中，我们很少写全四个状态，一般我们写法如下：
a { /* a是标签选择器 所有的链接 */
font-weight: 700;
font-size: 16px;
color: gray;
}
a:hover { /* a:hover 是链接伪类选择器 鼠标经过 */
color: red; /* 鼠标经过的时候，由原来的灰色变成了红色 */
}
伪元素选择器
① E::before 和 E::after
在E元素内部的开始位置（before）和结束位置（after）创建一个元素，该元素为行内元素（inline），且必须要结合content属性使用，否则伪元素就不起作用，创建出来的元素在 Dom 中查找不到，所以称为伪元素。
- 项目中伪元素的使用情况：一般是一个带有文字的标签添加一个其他伪元素（一般是横/竖线、箭头、方框、放大镜等）。
- ":" 与 "::" 区别在于区分伪类和伪元素。
示例代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<style>
div::before { /* 在div内部前面插入 “俺” */
content: "俺";
}
div::after {
content: "18岁"; /* 在div内部后面插入 “18岁” */
}
</style>
</head>
<body>
<div>今年</div> /* 今年 */
</body>
</html>
效果如下：
伪元素案例：鼠标经过显示边框
div 里面有个 img，鼠标经过 div，为 div 添加伪元素边框，效果图如下：
代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<style>
div {
width: 296px;
height: 180px;
margin: 20px auto;
position: relative; /* 父相 */
}
div:hover::before { /* 鼠标经过之后，在div内部的前面插入一个伪元素 */
content: "";
width: 100%;
height: 100%;
border: 10px solid rgba(255, 255, 255, .3);
display: block; /* 伪元素属于行内元素，要转换 */
position: absolute; /* 要伪元素不占位，就用绝对定位,不然的话，伪元素在上面，图片在下面 */
top: 0;
left: 0;
box-sizing: border-box; /* 把padding 和 border 都算入 width 里面 */
}
</style>
</head>
<body>
<div>
<img src="images/mi.jpg" height="180" width="296" alt="">
</div>
</body>
</html>
② E::first-letter、E::first-line、E::selection
-
E::first-letter 选择文本的第一个单词或字（如中文、日文、韩文等）
-
E::first-line 选择文本第一行
-
E::selection 鼠标选中文本的样式
示例代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<style>
/* .demo 类选择器
:first-child 伪类选择器
::first-letter 伪元素选择器 */
p::first-letter { /* ① 选择第1个字 */
color: red;
font-size: 50px;
}
p::first-line { /* ② 选择第1行 */
color: green;
}
p::selection { /* ③ 当我们选中文字的时候，可以变化的样式(只能是字体颜色与背景颜色) */
color: pink;
font-size: 50px;
background-color: blue;
}
</style>
</head>
<body>
<p>英语词汇，一般指即兴的、随性的随意的发挥，例如HIPHOP说唱中的freestyle就是即兴说唱的意思。2017年6 月，因吴亦凡屡次提起而火遍网络。
吴亦凡爆红的freestyle，其实是嘻哈选手的基本功，也是《中国有嘻哈》节目中的一个环节名称。
发展经过编辑
从吴亦凡口里说出来，freestyle就变得很魔性了，因为他见人都会问一句，你有freestyle吗？两个选手难以选择，还是这句，“你们有freestyle吗”？
</p>
</body>
</html>
效果图如下：
属性选择器
属性选择器用于选取带有某些特殊属性的标签，用[]，如下：
a[title] { /* ① 选择具有 title 属性的 a 元素 */
color: red;
}
input[type=text] { /* ② 选择具有 type 属性，并且属性值是 text 的 input 元素 */
color: red;
}
div[class^=font] { /* ③ 匹配具有 class 属性，并且属性值以 font 开头的 div 元素 */
color: pink;
}
div[class$=footer] { /* ④ 匹配具有 class 属性，并且属性值以 footer 结尾的 div 元素 */
color: skyblue;
}
div[class*=tao] { /* ⑤ 匹配具有 class 属性，并且属性值中含有 tao 的 div 元素 */
color: green;
}
[class*=tao] { /* ⑥ 匹配具有 class 属性，并且属性值中含有 tao 的任意元素 */
color: green;
}
/* 属性选择器,选择disabled为true的button,如果没有disabled,不选中 */
.login_btn button[disabled] {
background-color: #8bda81;
}
网友评论