CSS中的选择器问题一文便知
目录
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>
效果：
