糯麦 NurMai

400-158-5662

糯麦科技

/

新闻资讯

/

技术讨论

/

常用的CSS元素选择器

常用的CSS元素选择器

原创 新闻资讯

于 2023-05-21 13:36:01 发布

17216 浏览

CSS样式选择器是指用来选择CSS样式的HTML元素的特殊元素。CSS样式选择器通常使用CSS选择器字符串来指定,例如 p 选择所有的段落元素,div 选择所有的 div 元素等等。

CSS选择器字符串由两部分组成:

选择器:用来指定要选择的元素。例如,p 选择所有的段落元素,div 选择所有的 div 元素等等。

属性:用来指定要应用于该元素的CSS属性。例如,color: red; 指定文本颜色为红色。


常用的元素选择器有哪些?

1.通配符选择器* { },选中页面中的所有的元素(会影响浏览器的性能):

2.标签名选择器元素名 { },选中页面中所有的指定标签

3.id选择器#id { },选中具有指定id的元素(不建议用id写样式)

4.类名选择器.class { },.加class类名的选择器

5.分组选择器选择器1,选择器2,....,选择器n { },几个选择器选中的元素 共用一套样式

6.交集选择器选择器1选择器2{ },两者之中相同的


常用的关系选择器有哪些?

1.子代选择器:父元素>子元素{ }

2.后代选择器(空格隔开):祖先元素 后代元素{ }

3.相邻选择器:+ 选中某个元素之后的 相邻下一个元素

4.兄弟选择器:~ 选中某个元素之后的 其他的兄弟元素


常用的属性选择器有哪些?

[name] 具有name属性的元素 

[att="val"] 具有att属性且属性值完全等于val的元素(一个字符都不能少,包括空格) 

[att~="val"] 具有att属性, 且多个用空格隔开的属性值里面, 其中一个等于val的元素

[att^="val"] 具有att属性, 且属性值的整个字符串, 以val开头

[att$="val"] 具有att属性, 且属性值的整个字符串, 以val结尾 

[att*="val"]  具有att属性, 且属性值的整个字符串, 含有val字符 

[att|="val"] 具有att属性, 且属性值的整个字符串, 以val开头用-连接其他字符,  或者属性值只有val 


常用的伪类选择器有哪些?

1.:root 只选中HTML元素 

2.:focus 元素获取焦点时的样式 

3.:not(css选择器) 选择不含有某个选择器的元素

4.:first-child 选中第一个子元素

5.:first-of-type 选中第一个指定元素

6.:last-child 选中最后一个子元素

7.:last-of-type 选中最后一个指定的元素

8.:nth-child(n) 选中第n个元素

9.:nth-of-type(n) 选中第n个指定的元素(nth-child() 和 :nth-of-type() 可以选择奇数和偶数;odd 选中奇数个元素;even 选中偶数个元素;2n 选中偶数个元素;2n-1 选中奇数个元素)

10.:only-child 选中唯一一个的子元素 

11.:only-of-type 选中唯一的指定元素 

12.:empty 选中没有任何子元素(元素里面不能有任何的内容)的空元素

13.:checked 选中页面中被选中的单选框或复选框

14.:enabled 选中页面中, 处于可用(没有被禁用)的元素

15.:disabled 选中页面中 处于禁用状态的元素

16.:target 选中被激活的锚点


常用的伪元素选择器有哪些?

概念:在 CSS 中允许使用伪元素来添加一些选择器的特殊效果。

1.:first-letter 给第一个字符添加特殊样式

2.:first-line 给第一行添加样式

3.:before 在内容的前面 插入伪元素(理解成span元素)

4.:after 在内容之后, 插入伪元素(理解成span元素)

其中:before和:after一定要与content:一起使用content:内容, content 可以未空, 但必须要有用来存放 只有装饰作用, 没有交互作用的小图标。


常用子元素选择器实例

:nth-child(odd)  //奇数
:nth-child(even) //偶数
:first-child  //第一个
:last-child  //最后一个
:nth-last-child(3)  //最后3个
:nth-child(n)  //第n个
:nth-child(2n)  //2的倍数,等同于偶数,如:2、4、6...
:nth-child(2n-1)  //2的倍数 - 1,等同于奇数,如:1、3、5...
:nth-child(3n+1)// a表示周期的长度,n是计数器(从 0 开始),b是偏移值,如:1、4、7...
:nth-child(n+3)  //大于等于3
:nth-child(-n+3)  //小于等于3
:nth-child(n + 2):nth-child(-n + 5)  //大于等于2且小于等于5,如:2、3、4、5
:not(:nth-child(n))  //不等于n
:not(:first-child):not(:last-child)  //不等于1和最后一个

以上就是糯麦为大家总结的CSS中的相关元素选择器相关知识,对于前端来说需理解并且熟练使用相关选择器的操作和用途,至于在实际项目中,同样的效果可以使用多种方法进行实现,如何选择最优的方式进行开发,则需要在不断的经验中进行总结和提炼,预祝每个前端同学都能做出自己想要的效果。

CSS

前端

样式选择器

阅读排行

  • 1. 几行代码就能实现Html大转盘抽奖

    大转盘抽奖是网络互动营销的一种常见形式,其通过简单易懂的界面设计,让用户在游戏中体验到乐趣,同时也能增加商家与用户之间的互动。本文将详细介绍如何使用HTML,CSS和JavaScript来实现大转盘抽奖的功能。

    查看详情
  • 2. 浙江省同区域公司地址变更详细流程

    提前准备好所有需要的资料,包含:房屋租赁合同、房产证、营业执照正副本、代理人身份证正反面、承诺书(由于我们公司其中一区域已有注册另外一公司,所以必须需要承诺书)

    查看详情
  • 3. 微信支付商户申请接入流程

    微信支付,是微信向有出售物品/提供服务需求的商家提供推广销售、支付收款、经营分析的整套解决方案,包括多种支付方式,如JSAPI支付、小程序支付、APP支付H5支付等支付方式接入。

    查看详情
  • 4. 阿里云域名ICP网络备案流程

    根据《互联网信息服务管理办法》以及《非经营性互联网信息服务备案管理办法》,国家对非经营性互联网信息服务实行备案制度,对经营性互联网信息服务实行许可制度。

    查看详情
  • 5. 微信小程序申请注册流程

    微信小程序注册流程与微信公众号较为相似,同时微信小程序支持通过已认证的微信公众号进行注册申请,无需进行单独认证即可使用,同一个已认证微信公众号可同时绑定注册多个小程序。

    查看详情