在CSS中给元素添加样式的时候,你是不是还是只会用类选择器:点(.),然后HTML里面重要不重要的标签里面全是密密麻麻的”class = xxx”;醒醒吧,不累么,手不累心也累了吧,这名字取一个也要想好久该取啥名吧。
下面给大家整理了一些选择器,记得搜藏点赞哦~
1、标签选择器
以标签名开头,选择所有div元素
![](https://img.haomeiwen.com/i18104852/7fed9c794d32d621.png)
2、类选择器
给标签取class名,以点(.)加class名开头,选择所有该class名的元素
![](https://img.haomeiwen.com/i18104852/179afcd32805430d.png)
![](https://img.haomeiwen.com/i18104852/93dc5fead2c91e7d.png)
3、id选择器
给标签取id名,以#加id名开头,具有唯一性,选择”id = ‘wrap’”的元素
![](https://img.haomeiwen.com/i18104852/2ae7ae3725ebd3e5.png)
![](https://img.haomeiwen.com/i18104852/6a3564fb0485f5a2.png)
4、子选择器
以>隔开父子级元素,(模块名>模块名,修饰>前模块内的子模块)
![](https://img.haomeiwen.com/i18104852/16479f146f11951d.png)
![](https://img.haomeiwen.com/i18104852/74b115c70257bc91.png)
5、包含选择器
以空格隔开包含关系的元素,(模块名模块名,修饰空格前模块内所有该模块)
![](https://img.haomeiwen.com/i18104852/9d105c549dff1aa0.png)
![](https://img.haomeiwen.com/i18104852/e9643c1ac4c97020.png)
6、兄弟选择器
以~隔开兄弟关系的元素(模块名~模块名 修饰~前模块往下的所有兄弟模块)
![](https://img.haomeiwen.com/i18104852/b56932b26c759236.png)
![](https://img.haomeiwen.com/i18104852/99036eea1f6c80e3.png)
7、相邻选择器
以+隔开相邻关系的元素(模块名+模块名 修饰加号前模块往下的相邻的模块 只一个)
![](https://img.haomeiwen.com/i18104852/a8fc64ec539e6cfb.png)
![](https://img.haomeiwen.com/i18104852/921a2168e55fdbdb.png)
8、全局选择器
以*开头(星号标在大括号前,修饰了包含body所有的标签)
![](https://img.haomeiwen.com/i18104852/a15d1edc32dec071.png)
![](https://img.haomeiwen.com/i18104852/dad0da7c9077dbdf.png)
9、群选择器
以,分隔(逗号分隔开需要修饰的模块名)
![](https://img.haomeiwen.com/i18104852/2acfa6f72db6f274.png)
![](https://img.haomeiwen.com/i18104852/03054f3ad7bfa6a7.png)
10、属性选择器
[] ([type=text]修饰属性为type=text的模块)
![](https://img.haomeiwen.com/i18104852/9857fcbe3b6ff353.png)
![](https://img.haomeiwen.com/i18104852/807c420ed5f13346.png)
11、伪类选择器
![](https://img.haomeiwen.com/i18104852/f70c79d510011f19.png)
(1) li:first-child{} (修饰第一个li)
![](https://img.haomeiwen.com/i18104852/fcd88cc8ea72acab.png)
(2) li:last-child{} (修饰最后一个li)
![](https://img.haomeiwen.com/i18104852/7579e7eece1c425e.png)
(3) li:nth-child{} (修饰第()个li)
![](https://img.haomeiwen.com/i18104852/691f981f6a2ce322.png)
(4) li:not(){} (不修饰第()个li,括号里面可以填以上的选择器)
![](https://img.haomeiwen.com/i18104852/0c5e9d130d7b057b.png)
关注获取更多福利~~~
网友评论