为了账号安全,请及时绑定邮箱和手机立即绑定

CSS3的一些容易忽视特性

标签:
CSS3
选择器
  • 兄弟选择器
  • 属性选择器
  • 伪类选择器
  • 伪元素选择器

兄弟选择器分
1、相邻兄弟选择器
相邻兄弟:当前元素 后面的 紧紧挨着的元素可称为相邻元素
2、通用兄弟选择器
作用:匹配某元素后所有的并且满足指定选择器的兄弟元素


属性选择器
1、 [id] : 匹配所有 附带 id 属性的元素
[class] : 匹配所有 附带 class属性的元素
div[style] : 匹配所有附带 style 属性的div元素
问题:获取页面所有的文本框元素
input[type="text"]
2、div[id][class] : 即附带 id属性又附带class属性的div元素
3、element[attr=val]
匹配attr属性值为val的element元素
input[type=password]
匹配type属性值为password的input元素

4、element[class~=val]
    作用:匹配 class属性值是以空格隔开的单词列表,并且val是单词列        表中的一个单词‘ <div class="lf border"></div>
    div[class~=border]

5、element[attr^=val]
匹配 element元素 attr 属性以val开始的元素
6、element[attr$=val]
匹配 的是 attr属性以val作为结尾的element元素
7、element[attr*=val]
attr属性之中 包含 val 字符的 element元素


伪类选择器
1、目标伪类状态
1、:enabled
匹配每个已启用元素
2、:disabled
匹配每个被禁用的元素
以上两个选择器,用于表单元素中
3、:checked
匹配每个被选中的input元素(限于 radio 和 checkbox)


伪元素选择器
1、:first-letter 或 ::first-letter
匹配指定元素的第一个字符
2、:first-line 或 ::first-line
匹配指定元素的首行
3、::selection
: 与 ::的区别
CSS2.0 中 伪元素选择器和伪类选择器全部都使用相同的标识 :
CSS3.0 中 伪类选择器使用 : ,而伪元素选择器一律使用 ::

点击查看更多内容
28人点赞

若觉得本文不错,就分享一下吧!

评论

作者其他优质文章

正在加载中
Web前端工程师
手记
粉丝
8
获赞与收藏
131

关注作者,订阅最新文章

阅读免费教程

感谢您的支持,我会继续努力的~
扫码打赏,你说多少就多少
赞赏金额会直接到老师账户
支付方式
打开微信扫一扫,即可进行扫码打赏哦
今天注册有机会得

100积分直接送

付费专栏免费学

大额优惠券免费领

立即参与 放弃机会
意见反馈 帮助中心 APP下载
官方微信

举报

0/150
提交
取消