常用选择器回顾
ID选择器
- 使用“#”开头来表示id选择器
- id选择器的值和html中某个元素的id值相同
- html的元素id不必带#
- id是唯一的,不能被多个标签使用
#c1{
内容
}
<div id='c1'></div>
类选择器(用的最多)
特点:差异化表示不同的标签,可以让多个标签的都使用同一个标签
- 类名用“.”开头,标签使用class属性来调用。
- 一个类可以被多个标签使用,一个标签也能使用多个类。
- 多个类名要使用空格分割且类名不要使用纯数字,或者中文以及标签名来命名类名
.c1{
内容
}
<div id='c1'></div>
标签选择器
特点:能快速将同一类型的标签都选择出来,但是不能差异化选择
div{
内容
}
<div>xxx</div>
li{
内容
}
<ul>
<li>内容</li>
</ul>
# 以此类推
属性选择器
- 属性名
- 属性名=属性值
- 属性名^= (以某某开头的)
- 属性名$=属性值 (以某某结尾的)
- 属性名*=属性值 (包含某某)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>中国移动</title>
<style>
input[type='text'] {
border: 1px solid red;
}
.v1[xx="456"]{
color: gold;
}
</style>
</head>
<body>
<input type="text">
<input type="text">
<div class="v1" xx="123">测试</div>
<div class="v1" xx="456">测试</div>
<div class="v1" xx="789">测试</div>
</body>
</html>
加一个边框border: 1px solid
后代选择器
- 后代选择器较为精准格式为==.+自定义标签+空格+需要改变的标签==,如
.yy li{ color: aquamarine;}
- 相当于精确命名来缩小范围
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>中国移动</title>
<style>
.yy li{
color: aquamarine;
}
</style>
</head>
<body>
<div class="yy">
<ui>
<li>日本</li>
<li>韩国</li>
<li>非洲</li>
<li>印度</li>
</ui>
</div>
<div></div>
<div>足球</div>
<div>羽毛球</div>
</body>
</html>
覆盖及嵌套
- 关于多覆盖的问题
- 如果是不重复的关系则叠加
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>中国移动</title>
<style>
.c2{
color: red;
border: 1px solid gold;
}
.c3{
font-size: 28px;
}
</style>
</head>
<div class="c2 c3">中国移动</div>
<body>
</body>
</html>
如果是有重复的话则会被后一个覆盖(写的时候没关系,和定义的时候才有关系)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>中国移动</title>
<style>
.c2{
color: red;
border: 1px solid gold;
}
.c3{
font-size: 28px;
color: aqua;
}
</style>
</head>
<div class="c2 c3">中国移动</div>
<body>
</body>
</html>
补充,如果想后面的不要覆盖的话,直接在后面加个!important;**
.c2{
color: red; !important;
border: 1px solid gold;
}
.c3{
font-size: 28px;
color: aqua;
}
-
嵌套选择器
.important .warning
注意里面有空格
这种表示只有满足层次关系最里层的选择器所对应的标签才会应用样式
如:
/*只有这样 定义的.important .warning里面的内容才会生效 */ <div class="header"> <div class="menu">左边</div> </div>
.important.warning
里面没有空格
这种表示只有满足一起使用的时候,选择器所对应的标签才会应用样式
如:
<div class="header menu"></div>
往期回顾
1.【快速开发网站】
2.【浏览器能识别的标签1】
3.【浏览器能识别的标签2】
4.【浏览器能识别的标签3】
5.【浏览器能识别的标签4】
6.【案例1:用户注册】
7.【案例2:用户注册改进】
8.【快速了解 CSS】
9.【常用选择器概念讲解】