1.1 基本选择器
1.1.1 id选择器
1)作用：
根据指定的id名称，在当前界面中找到对应的唯一一个的标签，然后设置属性
2)格式
id 名称{
属性:值
}
3)注意点
1、在企业开发中如果仅仅只是为了设置样式，通常不会使用id，在前端开发中id通常是留给js使用的
2、每个标签都可以设置唯一一个id，id就相当于人/标签的身份证，因此在同一界面内id绝不能重复
3、引用id一定要加#
4、id的命名只能由字符、数字、下划线组成，且不能以数字开头，更不能是html关键字如p，a，img等
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> #p1 { color: burlywood; } </style> </head> <body> <p id="p1">就是1</p> <p id="p2">就是2</p> </body> </html>
1.2 类选择器
1)根据指定的类名称，在当前界面中找到对应的标签，然后设置属性
2)格式：
.类名称{
属性值：值
}
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> .p1 { color: yellow; } </style> </head> <body> <p class="p1">就是1</p> <p class="p2">就是2</p> </body> </html>
1.3 标签选择器
1)作用: 根据指定的标签名称，在当前界面中找到所有该名称的标签，然后设置属性
2)格式
标签名称 {
属性：值;
}
3)注意点:
1、只要是HTML的标签都能当做标签选择器
2、标签选择器选中的是当前界面中的所有标签,而不能单独选中某一标签
3、标签选择器，无论嵌套多少层都能选中
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>标签选择器</title> <style type="text/css"> p { color: red; } </style> </head> <body> <p>这什么</p> <ul> <li> <ul> <li> <ul> <li> <p>这颗心叫做七巧玲珑心，男人吃了会流泪，女人吃了会怀孕</p> </li> </ul> </li> </ul> </li> </ul> </body> </html>
1.4 通配符选择器
1、作用:选择所有的标签
2、格式
* {
属性：值；
}
3、注意点
1、在企业开发中一般不会使用通配符选择器
理由是：
由于通配符选择器是设置界面上所有的标签的属性，
所以在设置之前会遍历所有的标签
如果当前界面上的标签比较多，那么性能就会比较差
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>通配符选择器</title> <style type="text/css"> * { color: red; } </style> </head> <body> <h1 >我是标题</h1> <p >我是段落</p> <a href="#">我是超链接</a> </body> </html>
第2章 后代选择器、子元素选择器
2.1 作用
1)作用: 找到指定标签的所有后代（儿子，孙子，重孙子、、、）标签，设置属性
2)格式:
标签名1 xxx {
属性：值;
}
3)注意:
1、后代选择器必须用空格隔开
2、后代不仅仅是儿子，也包括孙子、重孙子
3、后代选择器不仅仅可以使用标签名称，还可以使用其他选择器比如id或class
4、后代选择器可以通过空格一直延续下去
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> div p { color: red; } #id1 li p { font-size: 50px; } </style> </head> <body> <div id="id1" class="part1"> <p>我是div下的段落2</p> <p>我是div下的段落2</p> <ul> <li class="aaa"> <p class="ccc">我是ul</p> <p class="ddd">我是ul</p> <a href="">点我啊1</a> </li> <li> <a href="">点我啊2</a> </li> </ul> </div> </body> </html>
2.3 子元素选择器
1） 作用：找到制定标签的所有特定的直接子元素，然后设置属性 2)格式： 标签名1>标签名2 { 属性：值; } 3)注意： 1、子元素选择器之间需要用>符号链接，并且不能有空格 比如div >p会找div标签的所有后代标签，标签名为">p" 2、子元素选择器只会查找儿子，不会查找其他嵌套的标签 3、子元素选择器不仅可以用标签名称，还可以使用其他选择器,比如id或class 4、子元素选择器可以通过>符号一直延续下去
第3章 兄弟选择器
3.1 相邻兄弟选择器，CSS2退出
1)、作用：给指定选择器后面紧跟的那个选择器选中的标签设置属性
2)、格式
选择器1+选择器2 {
属性：值;
}
3.2 通用选择器，CSS3推出
1）作用：给指定选择器后面的所有选择器中的所有标签设置属性
2)格式：
选择器1~选择器2 {
属性：值;
}
3)注意点：
1、通用兄弟选择器必须用~来链接
2、通用兄弟选择器选中的是指选择器后面的某个选择器选中的所有标签
无论有没有被隔开，都可以被选中
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> h1+p{ font-size: 30px; } h1~p{ color: red; } </style> </head> <body> <h1>我是标题1</h1> <a href="">有了这个标签，p就不再是紧跟h1标签了，但通用兄弟选择器仍能选中</a> <p>我是段落</p> <p>我是段落</p> <p>我是段落</p> <p>我是段落</p> <p>我是段落</p> <p>我是段落</p> <p>我是段落</p> <p>我是段落</p> <p>我是段落</p> <p>我是段落</p> <p>我是段落</p> <h1>我是标题2</h1> <p>我是段落</p> </body> </html>
第4章 交集选择器与并集选择器
#1、作用：给所有选择器选中的标签中，相交的那部分标签设置属性
#2、格式：
选择器1选择器2 {
属性：值;
}
#3、注意：
1、选择器与选择器之间没有任何链接符号
2、选择器可以使用标签名称、id、class
3、交集选择器在企业开发中并不多见，了解即可
因为：p.part1 完全可以用.part1取代
#1、作用：给所有选择器选中的标签中，相交的那部分标签设置属性 #2、格式： 选择器1选择器2 { 属性：值; } #3、注意： 1、选择器与选择器之间没有任何链接符号 2、选择器可以使用标签名称、id、class 3、交集选择器在企业开发中并不多见，了解即可 因为：p.part1 完全可以用.part1取代
4.3 并集选择器
1)作用：给所有满足条件的标签设置属性
2)格式：
选择器1,选择器2 {
属性：值;
}
3)注意：
1、选择器与选择器之间必须用逗号来链接
2、选择器可以使用标签名称、id、class
并集选择器第5章 属性选择器
1)作用：根据指定的属性名称找到对应的标签，然后设置属性
该选择器，最常用于input标签
2)格式与具体用法：
[属性名]
其他选择器[属性名]
[属性名=值]
[属性名^=值]
[属性名$=值]
[属性名*=值]
例1：找到所有包含id属性的标签
[id]
例2：找到所有包含id属性的p标签
p[id]
例3：找到所有class属性值为part1的p标签
p[class="part1"]
例4：找到所有href属性值以https开头的a标签
a[href^="https"]
例5：找到所有src属性值以png结果的img标签
img[src$="png"]
例6：找到所有class属性值中包含part2的标签
[class*="part"]
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>后代选择器</title> <style type="text/css"> [id] { color: red; } p[id] { font-size: 30px; } p[class="part1"] { color: green; } a[href^="https"] { font-size: 50px; } img[src$="png"] { 100px; } [class*="part"] { text-decoration: line-through; } </style> </head> <body> <h1 id="id1">哈哈啊</h1> <p id="id2">我是段落</p> <p class="part1">我是段落</p> <p class="xxx part2 yyy">我是段落</p> <a href="#">我是我</a> <a href="http://www.baidu.com">http://www.baidu.com</a> <a href="https://www.baidu.com">https://www.baidu.com</a> <img src="1.png" alt=""> <img src="2.jpg" alt=""> <p>我是段落</p> <p>我是段落</p> </body> </html>
第6章 伪类选择器
伪元素选择符是指对同一个HTML元素不同状态的一种定义方式。例如对于<a>标签的正常状态、访问状态、选中状态、光标移到超链接文本上的状态，就可以使用伪元素选择器来定义。
a:link {color: #FF0000; text-decoration: none} /* 未访问的链接 */
a:visited {color: #00FF00; text-decoration: none} /* 已访问的链接 */
a:hover {color: #FF00FF; text-decoration: underline} /* 鼠标在链接上 */
a:active {color: #0000FF; text-decoration: underline} /* 激活链接 */