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

本文详细介绍了CSS的基本和高级选择器,包括ID选择器、类选择器、标签选择器、行内样式、内部样式和外部样式。此外,还讲解了结构伪类选择器的使用,如nth-child(),用于设置奇偶行和特定行的样式。同时,提到了属性选择器在选取特定属性的元素时的作用。内容还包括层次选择器和结构伪类选择器的实例,帮助读者更好地理解和应用CSS选择器。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

我们每个人都意识到了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)来控制。

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://开头

# 播妞福利

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

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

(左右滑动查看更多)

- 推荐阅读 -

B站超高赞回答:有了这个迹象,工资再高也要辞职!

2021-05-24

速查!2020年平均工资出炉,这个行业最香:177544元!

2021-05-21

InvoZone发布:2021年,薪酬最高的5种编程语言

2021-05-12

点个在看,播妞爱你们呦

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值