CSS 7.5 选择器-子元素、相邻兄弟和普通兄弟选择器
来源:互联网 发布:监控平台软件 编辑:程序博客网 时间:2024/06/04 08:12
CSS 7.5 选择器-子元素、相邻兄弟和普通兄弟选择器
1.子元素选择器。选择作为某元素的子元素的元素。
格式:父元素 > 子元素 {声明}
例如:
h1 > strong { color:red;}
HTML中:
<h1>·············<strong>···</strong>·············</h1> //可以匹配
<h1>····<em>···<strong>···</strong>···</em>····</h1> //不可以匹配
注1:与后代选择器的区别在于,子元素选择器两个元素只能是父子关系,而后代选择器只要是后代就行了。在上例中,<strong>是<em>的儿子,是<h1>的孙子。
注2:若<h1>中有多个<strong>,全部选择。例如
<h1>···<strong>···</strong>···<strong>··</strong>···</h1> //可以匹配
2.相邻兄弟选择器。选择有相同父元素的两个挨着的元素的后一个元素。
格式:元素1 + 元素2 {声明}
例如1:
h1 + p { color:red;}
HTML中:
<h1>······</h1>
<p>·······</p> //可以匹配
<a>······</a>
<p>·······</p> //不可以匹配
例如2:
li + li { color:red;}
HTML中:
<ul>
<li>······</li>
<li>······</li> //可以匹配,上一个<li>的兄弟
<li>······</li> //可以匹配,上一个<li>的兄弟
</ul>
3.普通兄弟选择器。选择有相同父元素的两个元素中,第一个元素后所有的第二个元素。
格式:元素1 ~ 元素2 { color:red;}
例如:
h1 ~ p { color:red;}
HTML中:
<h1>······</h1>
<p>·······</p> //可以匹配
<a>······</a>
<p>·······</p> //可以匹配
<h2>······<p>···</p>······</h2> //不可以匹配
4.不论是后代选择器,子元素选择器,相邻兄弟选择器还是普通兄弟选择器,
选择的都是:最后面的(挨着花括号的)元素。
5.选择器可以组合使用,例如:
div.maincontent h1 + p > a:link
- CSS 7.5 选择器-子元素、相邻兄弟和普通兄弟选择器
- CSS相邻兄弟选择器和普通相邻兄弟选择器
- CSS后代选择器、子元素选择器、相邻兄弟选择器
- css相邻兄弟元素选择器
- CSS选择器:属性选择器+后代选择器+子元素选择器+相邻兄弟选择器+伪类+伪元素
- CSS 相邻兄弟选择器
- CSS 相邻兄弟选择器
- CSS 相邻兄弟选择器
- 后代、子元素、相邻兄弟选择器
- CSS 后代选择器 CSS 子元素选择器 CSS 相邻兄弟选择器
- css 派生选择器+子选择器+相邻兄弟选择器
- css中相邻兄弟选择器
- 兄弟选择器和相邻选择器按正序控制兄弟元素和相邻元素的样式
- 相邻选择器、兄弟选择器
- 多类、属性、后代、子元素、相邻兄弟选择器
- 相邻兄弟选择器(+)
- 相邻兄弟选择器(+)
- 选择器之相邻兄弟选择器
- oj第九周练习大帆玩英雄联盟
- CSS 7.4 选择器-后代选择器
- ajax跨域请求问题
- Android性能优化之电量篇
- 设计模式之 代理模式
- CSS 7.5 选择器-子元素、相邻兄弟和普通兄弟选择器
- ecshop SQL注入漏洞 admin/shopinfo.php ecshop SQL注入漏洞
- 那些常见的问题
- easeui 自定义消息布局
- 升级到windows 10后,vmware workstation 的桥接模式不能上网
- CSS 7.6 伪类
- 深入理解Java的接口和抽象类
- js判断用户设备
- 网络分层