1 介绍
什么是选择器：如果要使用css对HTML页面中的元素实现一对一，一对多或者多对一的控制，这就需要用到CSS选择器。
HTML页面中的元素就是通过CSS选择器进行控制的。
2 常用三种选择器
2.1 标签选择器
p{
color: red;
}
2.2 id选择器
id:(唯一性)
id命名：数字、字母、下划线、中划线（-），不能用数字开头
#p_1{
font-size: 30px;
color: yellowgreen;
}
2.3 class选择器
.p_2{
font-weight: bold;
color: yellow;}
2.4 *通配符选择器
3 常用选择器的优先级：
id 选择器>class 选择器>标签选择器
测试代码：
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <style> /*通用选择器 *代表该页面中的所有的元素 */ /**{ color: red; background-color: black; }*/ /*元素选择器*/--> div{ width: 200px; height: 200px; /*背景颜色*/ background-color: blue; /*边框的粗细 边框的风格 边框的颜色 */ border: 1px solid red; } /*ID选择器 #id的名称 id的名称保证唯一 * ID的命名： 数字、字母、下划线、中划线组成，不能用数字开头 * */ #div1{ background-color: green; } /*class类选择器*/ .div_1{ background-color: pink; } </style> </head> <body> <!--<div class="div_1">1</div>--> <div>2</div> <!--<div class="div_1">3</div>--> <p>你好</p> </body> </html>
效果：
最后总结一下，十大选择器与伪元素的权重情况：
选择器 |
表达式或示例 |
说明 |
权重 |
ID选择器 |
#aaa |
|
100 |
类选择器 |
.aaa |
|
10 |
标签选择器 |
h1 |
元素的tagName |
1 |
属性选择器 |
[title] |
|
10 |
相邻选择器 |
selecter + selecter |
拆分为两个选择器再计算 |
|
兄长选择器 |
selecter ~ selecter |
拆分为两个选择器再计算 |
|
亲子选择器 |
selecter > selecter |
拆分为两个选择器再计算 |
|
后代选择器 |
selecter selecter |
拆分为两个选择器再计算 |
|
通配符选择器 |
* |
|
0 |
各种伪类选择器 |
如:link， :visited， :hover， :active， :target， :root， :not等 |
10 |
|
各种伪元素 |
如::first-letter,::first-line,::after,::before,::selection |
1 |
|
4 CSS 中其他选择器
4.1 后代选择器
只要包含该标签对象即可
div span{
font-size: 27px;
font-family: 宋体;
color: red;
}
4.2 子选择器 直系子标签
div>span{
color: red;
}
4.39 +兄弟选择器 只会改变下面相邻的元素对象
#p_1+p{
color: green;
}
4.4 ~兄弟选择器 后面所有的兄弟对象都会改变
#p_1~p{
color: red;font-size: 30px;
}
4.5 伪类选择器
a:hover{
color: red;
}
测试代码：
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <style> /*后代选择器 只要包含该标签对象即可 */ /*div span{ font-size: 27px; font-family: 宋体; color: red; }*/ /*子选择器 直系子标签*/ /* div>span{ color: red; } */ /*兄弟选择器 只会改变下面相邻的元素对象*/ /*#p_1+p{ color: green; }*/ /*兄弟选择器 后面所有的兄弟对象都会改变*/ #p_1~p{ color: red; font-size: 30px; } /*伪类选择器*/ a:hover{ color: red; } </style> </head> <body> <div> <span>csdn</span> <p> <span>csdn123</span> </p> </div> <span>csdn</span> <hr /> <p id="p_1">我们不一样</p> <p>我们不一样</p> <p>我们不一样</p> <hr /> <a href="">京东网址</a> </body> </html>
效果：
