相信大家对元素应该是不陌生的,当我们页面中,我们想要布局,给元素添加样式的时候,我们应该怎么获取到指定元素呢?
优先级:ID 选择器 > 类选择器 > 标签选择器 > 通配符
1.元素选择器
通过标签名可直接选取到元素
例如:div{},p{},ul{}等等
2.类选择器
通过class类选取到元素,可以选取到多个元素,只要给想要添加这种类名的元素添加上class类,就可以不用反复写相关的样式
例如:.className 记住要添加点号(.)
3.id选择器
通过id选取到元素,id是独特的,就跟我们的身份证一样,一人一个,不能重复
例如:#idName
记住以#开头
4.通配符选择器
直接以***基本选择器代码总结:开头,通常用于清除默认样式,比如网页的内外边距
元素选择器~通配符选择器代码总结:
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>基本选择器总结</title><style>/* 第一种,元素选择器 *//* div {color: red;} *//* ................. *//* 第二种,类选择器 *//* .box {color: red;} *//* ................ *//* 第三种,id选择器 *//* #box {color: red;} *//* ............ *//* 第四种,通配符选择器 *//* * {margin: 0;padding: 0;} */</style>
</head>
<body><!-- 第一种元素选择器 --><!-- <div>元素选择器</div> --><!-- .................. --><!-- 第二种类选择器 --><!-- <div class="box">类选择器</div><div class="box">类选择器</div> --><!-- 第三种id选择器 --><!-- <div id="box">id选择器</div> -->
</body>
</html>
5.并集选择器
并集选择器,顾名思义,就是并在一起
例如:.box,.box1
使用逗号隔开,通常用于有相同样式的情况
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title></title><style>.box,.box1 {color: red;}</style>
</head>
<body><div class="box">我是需要并集选择器</div><div class="box1">我也需要并集选择器</div>
</body>
</html>
6.交集选择器
交集,相交的元素
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title></title><style>div.box {color: red;}</style>
</head>
<body><div class="box">交集选择器</div>
</body>
</html>
7.后代选择器
后代选择器我们需要用空格隔开,选取到全部的后代
例如:div span{ }
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title></title><style>.box span {color: red;}</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: red;}</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: red;}</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: red;}</style>
</head>
<body><div>我是你上一级兄弟</div><div class="box">我是你哥</div><div>我是你亲兄弟</div><div>我也是你亲兄弟</div>
</body>
</html>
11.伪类选择器(常用的3种)
1.:first-child选取到第一个元素
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title></title><style>.box:first-child {color: red;}</style>
</head>
<body><div class="box">1</div><div class="box">2</div><div class="box">3</div>
</body>
</html>
2.:last-child选取到最后一个元素
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title></title><style>.box span:last-child {color: red;}</style>
</head>
<body><div class="box"><span>1</span><span>2</span><span>3</span></div>
</body>
</html>
3.: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: red;}.box span:nth-child(2n+2) {color: pink;}</style>
</head>
<body><div class="box"><span>1</span><span>2</span><span>3</span><span>4</span></div>
</body>
</html>
十二、属性选择器(介绍4种)
可以通过元素属性选取到属性
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title></title><style>input[name=inp]{border: 10px solid #000;}/* 选取到以i开头的元素 */input[name^=i]{border: 10px solid red;}/* 选取以p结尾的元素 */input[name$=p]{border: 10px solid pink;}/* 选取含有n的元素 */input[name*=n]{border: 10px solid hotpink;}</style>
</head>
<body><input type="text" name="inp"><input type="text" name="inp"><input type="text" name="inp">
</body>
</html>
感谢大家的阅读,如有不对的地方,可以向我提出,感谢大家!