前端必学：css有哪些基本选择器和高级选择器？

喜欢ヅ旅行 2022-10-16 07:26 161阅读 0赞

我们每个人都意识到了CSS的重要性，但是还有很多人不知道css有哪些基本选择器和高级选择器？下面我们来总结一下。

**css有哪些基本选择器和高级选择器？**

**ID选择器>类选择器>标签选择器**

**行内样式>内部样式>外部样式**

\*结构伪类选择器 一旦设置 不管在行内还是在后面重新设置，都没办法改变

\*结构伪类选择器设置奇偶行以及从第三行开始变色如何实现

nth-cild(2N+3)表示从第三行开始的奇数行

同理 nth-child(2N+4)表示从第四行开始的偶数行

nth-cild(2N+5)表示从第五行开始的奇数行

\*设置前三个：

p:nth-child(-n+3)\{

background-color: \#b3d4fc;

\*使用E F:nth-child(n)和E F:nth-of-type(n)的 关键点

E F:nth-child(n)在父级里从一个元素开始查找，不分类型

E F:nth-of-type(n)在父级里先看类型，再看位置

**注意：**child 跟子选择器没有关系，可以是子选择，也可以是后代选择 由层次选择器 (如table tr）来控制。

![1feffca7f391e321210209c370939ba2.png][]

**1.层次选择器**

table td 后代选择器 td包含在table里

div>p子选择器 p是div的子元素

p1+p p1后面一个兄弟p变化 是对p进行处理 p1不变 而且只是下面相邻的变化 上面相邻不变化

p1~p p1后面所有兄弟p变化 p1不变

**2.结构伪类选择器**

P:first-child 作为父元素的第一个子元素得元素 p

P:last-child 作为父元素的最后一个子元素得元素 p

P a :nth-child(n) p中第n个a元素 （even）（odd）

p:first-of-type 必须是p元素 不是子元素也行

p a:nth-of-type(n)

必须是a元素 不是a的子元素也行

**3.属性选择器**

a\[id\] a标签中含有id的

a\[id=111\] a标签中的id=111的

a\[href\*=http\] a标签中包含href属性 且都包含http

a\[href&=png\] a标签中包含href属性 且最后以png结尾

a\[href^=http://\] a标签中包含href属性且以http://开头

![d20033ccd1d98d7c5e68841bde87bdd9.gif][]

**\#**** 播妞福利**

扫码关注【黑马程序员视频库】公众号，发送“ **抽奖** ”两个字。幸运粉丝即可领取以下大奖。开奖日期：2021年5月28日12:00

![57d50bcb2022eaa3a53028ca341947b9.png][]

**????好礼清单????**

![8d550bd9e9d5cccf3ad8053c5558064c.png][]

![973f13743de39d93b5d568130dcbd32e.png][]

![7b7d5b0d0e340cd40391983b1d724b6f.png][]

（左右滑动查看更多）

![3f5953579afc24b3c0ac5c7042ab74a0.png][]

**- 推荐阅读 -**

[B站超高赞回答：有了这个迹象，工资再高也要辞职！][B]

[2021-05-24][B]

[![f43ec53bef3040b62016f94f37695f7f.png][] ][B]

[速查！2020年平均工资出炉，这个行业最香：177544元！][2020_177544]

[2021-05-21][2020_177544]

[![b44f51e77043d5a43792bf4dd419dd46.png][] ][2020_177544]

[InvoZone发布：2021年，薪酬最高的5种编程语言][InvoZone_2021_5]

[2021-05-12][InvoZone_2021_5]

[![cd038da1aa9169f2af107c359f83f343.png][] ][InvoZone_2021_5]

![fd5fdf492e566830c0fc0f07182f97d4.png][]

**点个在看，播妞爱你们呦**

[1feffca7f391e321210209c370939ba2.png]: /images/20221014/399e8209e2d347a59f902997a558c3ca.png
[d20033ccd1d98d7c5e68841bde87bdd9.gif]: /images/20221014/d486bb6a57bd486cb7b436b149c480fc.png
[57d50bcb2022eaa3a53028ca341947b9.png]: /images/20221014/a8fd6096d81d4c4bab4f7b4d0ad59779.png
[8d550bd9e9d5cccf3ad8053c5558064c.png]: /images/20221014/eee777b534734b688006661409a656b0.png
[973f13743de39d93b5d568130dcbd32e.png]: /images/20221014/d704edd815f04cc9a322cbeaed1223df.png
[7b7d5b0d0e340cd40391983b1d724b6f.png]: /images/20221014/f9532fee021f425bb7f644e234f3307d.png
[3f5953579afc24b3c0ac5c7042ab74a0.png]: /images/20221014/f4c3d58a2588442ab2f6aa86fdd8cab7.png
[B]: http://mp.weixin.qq.com/s?__biz=MzU0ODExNTc5MQ%3D%3D&chksm=fb4611b4cc3198a29dc0f31ccb44f14104b3021f811b46c0e46133fb52e3df23d443d38c408a&idx=1&mid=2247538068&scene=21&sn=333e65536f503949cfcb8c95eae575d1#wechat_redirect
[f43ec53bef3040b62016f94f37695f7f.png]: /images/20221014/fb80ee0cb0144923a46392a24d35c7ea.png
[2020_177544]: http://mp.weixin.qq.com/s?__biz=MzU0ODExNTc5MQ%3D%3D&chksm=fb46111ecc319808dc8de3ca7abf304e61c4d56006b9b82ace12edbd689d5a84ed019c200efe&idx=1&mid=2247537982&scene=21&sn=ea1e43acca2e0e53217e7abda92da258#wechat_redirect
[b44f51e77043d5a43792bf4dd419dd46.png]: /images/20221014/ef41900ec28447788d583ddfaa81332e.png
[InvoZone_2021_5]: http://mp.weixin.qq.com/s?__biz=MzU0ODExNTc5MQ%3D%3D&chksm=fb460b97cc318281e4c44ad1f6691b2cbc4dff54f00043cb704bdf7ac59b89d3ac7eb13efb6c&idx=1&mid=2247536567&scene=21&sn=fb7f734a1a59b52075e4fc6ea187149d#wechat_redirect
[cd038da1aa9169f2af107c359f83f343.png]: /images/20221014/1792a4d41e564767bc6b7c0c157dd668.png
[fd5fdf492e566830c0fc0f07182f97d4.png]: /images/20221014/92e38a49bfda415285b2de040cf4ec4f.png