1.元素选择器:通过标签名可直接选取到元素。
div{} | p{} | ul{} | ... |
2.类选择器:通过class类选取到元素,可以选取到多个元素,只要给想要添加这种类名的元素添加上class类,就可以不用反复写相关的样式
.className |
记住要添加点号"."
3.id选择器:通过id选取到元素,id是独特的,就跟我们的身份证一样,一人一个,不能重复。
#idName |
要以"#"开头
4.通配符选择器:直接以***基本选择器代码总结:开头,通常用于清除默认样式,比如网页的内外边距。
5.并集选择器:并集选择器,意如其名,就是并在一起。
例如:.box,.box1{}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
<style>
.box,.box1 {
color: pink;
}
</style>
</head>
<body>
<div class="box">并集选择器1</div>
<div class="box1">并集选择器2</div>
</body>
</html>
样式:
注:使用并集选择器时别忘了","。
6.交集选择器:交集,相交的元素。
例如:div.box{}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
<style>
div.box {
color: pink;
}
</style>
</head>
<body>
<div class="box">交集选择器</div>
</body>
</html>
样式:
注:使用交集选择器时别记混了,是div+.盒子的class。
7.后代选择器:后代选择器我们需要用空格隔开,选取到全部的后代
例如:div span{}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
<style>
.box span {
color: pink;
}
</style>
</head>
<body>
<div class="box">
<span>我是老大</span>
<div>
<span>我是老二</span>
<div>
<span>我是老三</span>
</div>
</div>
</div>
</body>
</html>
样式:
注:使用后代选择器时别记混了,不用+"."。
8.子代选择器:选取到父级元素的子元素,是亲儿子,不包括后代
例如:div>span{}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
<style>
.box>span {
color: pink;
}
</style>
</head>
<body>
<div class="box">
<span>子代选择器</span>
<span>子代选择器</span>
<span>子代选择器</span>
</div>
</body>
</html>
样式:
注:使用子代选择器时别记混了,用的是">"。
9.相邻兄弟选择器:使用+号,选取到的是下一个兄弟。
例如:div+div{ }
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
<style>
.box+div{
color: pink;
}
</style>
</head>
<body>
<div>我是你上一级兄弟</div>
<div class="box">我是你哥</div>
<div>我是你亲兄弟</div>
</body>
</html>
样式:
注:使用兄弟选择器时别记混了,用的是"+",选取的是下一个而不是上面的。
10.全部兄弟选择器:使用~可以选取到全部兄弟,也是从下一个开始。
例如:div~div{ }
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
<style>
.box~div{
color: pink;
}
</style>
</head>
<body>
<div>我是你上一级兄弟</div>
<div class="box">我是你哥</div>
<div>我是你亲兄弟</div>
<div>我也是你亲兄弟</div>
</body>
</html>
样式:
注:使用全部兄弟选择器时别记混了,用的是"~",选取的是下一个而不是上面的。
11.使用伪类选择器[常用的三种::first-child :last-child :nth-child(n)]
:first-child选取到第一个元素
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
<style>
.box:first-child {
color: pink;
}
</style>
</head>
<body>
<div class="box">1</div>
<div class="box">2</div>
<div class="box">3</div>
</body>
</html>
样式:
:last-child选取到最后一个元素
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
<style>
.box span:last-child {
color: pink;
}
</style>
</head>
<body>
<div class="box">
<span>1</span>
<span>2</span>
<span>3</span>
</div>
</body>
</html>
样式:
:nth-child(n) 选择第n个元素,从1开始
even或2n 选中偶数位的元素
odd或2n+1 选中奇数位得到元素
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
<style>
.box span:nth-child(1) {
color: pink;
}
.box span:nth-child(2n+2) {
color: green;
}
</style>
</head>
<body>
<div class="box">
<span>1</span>
<span>2</span>
<span>3</span>
<span>4</span>
</div>
</body>
</html>
样式:
注:使用伪类选择器时,前面+":"
12.属性选择器(介绍4种)
可以通过元素属性选取到属性
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
<style>
input[name=inp]{
border: 10px solid pink;
}
/* 选取到以i开头的元素 */
input[name^=i]{
border: 10px solid green;
}
/* 选取以p结尾的元素 */
input[name$=p]{
border: 10px solid blue;
}
/* 选取含有n的元素 */
input[name*=n]{
border: 10px solid black;
}
</style>
</head>
<body>
<input type="text" name="inp">
<input type="text" name="inp">
<input type="text" name="inp">
</body>
</html>
--以上皆为个人课后总结,以上有不对的地方,希望大家可以指出,感谢大家!