属性选择器:root,not,empty,target

在CSS2中引入了一些属性选择器,而CSS3在CSS2的基础上对属性选择器进行了扩展,新增了3个属性选择器,使得属性选择器有了通配符的概念,这三个属性选择器与CSS2的属性选择器共同构成了CSS功能强大的属性选择器。如下表所示:

CSS3属性选择器

(一)结构伪类选择器-root

:root选择器,从字面上我们就可以很清楚的理解是根选择器,他的意思就是匹配元素E所在文档的根元素。在HTML文档中,根元素始终是<html>。

(二)结构伪类选择器-not

:not选择器称为否定选择器,和jQuery中的:not选择器一模一样,可以选择某个元素之外的所有元素。就拿form元素来说,比如说你想给表单中除submit按钮之外的input元素添加红色边框,CSS代码可以写成:(特别注意没有空格!!!)

form {

width: 200px;

margin: 20px auto;

}

div {

margin-bottom: 20px;

}

input:not([type="submit"]){

border:1px solid red;

}

演示结果:

演示结果

(三)结构性伪类选择器——empty

:empty选择器表示的就是空。用来选择没有任何内容的元素,这里没有内容值得是一点内容都没有,哪怕是一个空格。

(四)结构伪类选择器——target

URL带有后面跟有锚名称#,指向文档内某个具体的元素。这个被链接的元素就是目标元素(target element).

:target选择器称为目标选择器,可用于选取当前活动的目标元素。

示例展示

演示结果:

分析:

1、具体来说,触发元素的URL中的标志符通常会包含一个#号,后面带有一个标志符名称,上面代码中是:#brand

2、:target就是用来匹配id为“brand”的元素(id="brand"的元素),上面代码中是那个div元素。

多个url(多个target)处理:

就像上面的例子,#brand与后面的id="brand"是对应的,当同一个页面上有很多的url的时候你可以取不同的名字,只要#号后对的名称与id=""中的名称对应就可以了。

如下面例子:

上面的代码可以对不同的target对象设置不同的样式。





Text Input:

Password Input:

Text Input:

Password Input:Text Input:

Password Input:

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
【社区内容提示】社区部分内容疑似由AI辅助生成,浏览时请结合常识与多方信息审慎甄别。
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

相关阅读更多精彩内容

  • Spring Cloud为开发人员提供了快速构建分布式系统中一些常见模式的工具(例如配置管理,服务发现,断路器,智...
    卡卡罗2017阅读 135,997评论 19 139
  • (1). 阴影模糊半径与阴影扩展半径的区别:阴影模糊半径:此参数可选,其值只能是为正值,如果其值为0时,表示阴影不...
    Leisure_blogs阅读 5,426评论 0 6
  • 第6章 征服CSS3选择器 属性选择器 在HTML中,通过各种各样的属性可以给元素增加很多附加的信息。例如,通过i...
    阿振_sc阅读 3,214评论 0 1
  • 问答题47 /72 常见浏览器兼容性问题与解决方案? 参考答案 (1)浏览器兼容问题一:不同浏览器的标签默认的外补...
    _Yfling阅读 14,692评论 1 92
  • 许是搁置久了的笔墨,抬起,竟不知落下首字应是何。耳麦里循环播放还是莫文蔚的阴天,是啊,阴天最能将一个人的内心烘...
    周大勋阅读 1,814评论 0 1

友情链接更多精彩内容