各种选择器

Baste · 发表于 2022-6-27 13:15

上周的选择器学完了，之前只学了标签选择器、类选择器、id选择器、后代选择器和子选择器。现在后面的几个选择器也学了，还学了个定位。这次学的选择器是交集选择器、并集选择器、相邻和通用兄弟选择器，最后就是伪类选择器，伪类选择器又分了first-child、hover、befor and after几种类型。下面来说说学习的内容。
交集选择器：
实例：
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>交集选择器</title></head><body><style> div.box { color: red }</style><div class="box"> 电影和游戏</div><div> 看电视</div></body></html>结果：

并集选择器：
实例：
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title> <style>div,.box{ color: red} </style></head><body><div>风里雨里</div><div class="box">标签的使用</div></body></html>结果：

相邻和通用兄弟选择器：
实例：
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title>  <style>div+p{ color: red} </style></head><body><p>静香思</p><div>窗前明月光</div><p>疑是地上霜</p><hr><style>div~p{ color: red}</style><p>静香思</p><div>窗前明月光</div><p>疑是地上霜</p><p>举头望明月</p><p>低头思故乡</p></body></html>结果：

伪类选择器之first-child：
实例：
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title> <style> ul>li{list-style:none } li:first-child{color: red} li:last-child{color: blue} li:nth-child(3){color: hotpink} </style></head><body><ul> <li>北京</li> <li>上海</li> <li>南京</li> <li>重庆</li></ul></body></html>结果：

伪类选择器之hover：
实例：
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title> <style> .box{ width: 200px; height: 200px; border: 1px solid #000000; } .box:hover{ cursor:pointer; background-color: blue; } </style></head><body><div class="box"></div></body></html>结果：

伪类选择器之before and after：
实例：
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title> <style> .box{ width: 200px; height: 200px; border: 1px solid #000000; position: relative;} .box:before { content: ""; width: 10px; height: 10px; border-top: 3px solid red; border-left: 3px solid red; position: absolute; left: -1px; top: -1px; } .box:after { content: ""; width: 10px; height: 10px; border-right: 3px solid red; border-bottom: 3px solid red; position: absolute; right: -1px; bottom: -1px; } </style></head><body><div class="box">电影</div></body></html>结果：

定位：
实例：
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title> <style> *{ padding: 0; margin: 0; } .top{ width: 100%; height: 30px; background-color: violet; position: relative; display: block; } .center{ width: 500px; height: 100px; background-color: tomato; position: absolute; left: 50%; top: 50%; transform: translate(-50%,-50%); } .bottom{ width: 100%; height: 30px; background-color: turquoise; position: fixed; left:10px; bottom:10px; } body{ height: 2000px; } </style></head><body><div class="top"></div><div class="center"></div><div class="bottom"></div></body></html>结果：

现在css的选择器就全部学完了。

		自动登录	找回密码
密码			立即注册

各种选择器

本帖子中包含更多资源