博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
03-高级选择器
阅读量:7143 次
发布时间:2019-06-29

本文共 924 字,大约阅读时间需要 3 分钟。

高级选择器分为:后代选择器、子代选择器、并集选择器、交集选择器

后代选择器

使用空格表示后代选择器。顾名思义,父元素的后代(包括儿子,孙子,重孙子)

.container p{    color: red;        }.container .item p{    color: yellow;}
View Code

 

子代选择器

使用>表示子代选择器。比如div>p,仅仅表示的是当前div元素选中的子代(不包含孙子....)元素p。

.container>p{     color: yellowgreen; }

 

并集选择器

多个选择器之间使用逗号隔开。表示选中的页面中的多个标签。一些共性的元素,可以使用并集选择器

/*并集选择器*/h3,a{    color: #008000;    text-decoration: none;                }
View Code

 

比如像百度首页使用并集选择器。

body,h1,h2,h3,h4,h5,h6,hr,p,blockquote,dl,dt,dd,ul,ol,li,pre,form,fieldset,legend,button,input,textarea,th,td {      margin: 0;      padding: 0   }/*使用此并集选择器选中页面中所有的标签,页面布局的时候会使用*/
View Code

 

交集选择器

使用.表示交集选择器。第一个标签必须是标签选择器,第二个标签必须是类选择器 语法:div.active

比如有一个<h4 class='active'></h4>这样的标签。

那么

h4{    width: 100px;    font-size: 14px;}.active{    color: red;    text-decoration: underline;}/* 交集选择器 */h4.active{    background: #00BFFF;}
View Code

 

它表示两者选中之后元素共有的特性。

转载于:https://www.cnblogs.com/bai-max/p/9082965.html

你可能感兴趣的文章
Nagios报Error: Could not read object configuration data!解决方法
查看>>
Web 服务编程,REST 与 SOAP 为什么选择 REST
查看>>
lamp环境下phpwind,wordpress,discuz论坛的搭建全过程
查看>>
Maven更新包数度慢
查看>>
linux shell 判断 if 脚本
查看>>
软件设计是怎样炼成的(7)——细节决定成败(详细设计)
查看>>
UVA11300 Spreading the Wealth
查看>>
C的一种老写法,没怎么理解,大家看看
查看>>
Linux系统安装如何给磁盘分区
查看>>
TOMCAT日常调整的手记.
查看>>
我的友情链接
查看>>
配置功能: WiFi无线网络配置代理
查看>>
备份服务器为什么不稳定的原因?
查看>>
我的友情链接
查看>>
转载-------我当网络包租公的日子
查看>>
linux下的公式编辑器
查看>>
网卡初始化一般操作
查看>>
linux 实现自动挂载
查看>>
材料采购科目解释
查看>>
系统丢失boot.ini启动文件怎么办?
查看>>