常用的CSS元素选择器
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. 微信小程序申请注册流程
微信小程序注册流程与微信公众号较为相似,同时微信小程序支持通过已认证的微信公众号进行注册申请,无需进行单独认证即可使用,同一个已认证微信公众号可同时绑定注册多个小程序。
查看详情