HTML连载20-并集选择器&兄弟选择器
一、并集选择器
1.作用:给所有的选择器选中的标签设置属性。
2.格式:
选择器1,选择器2{ 属性:值; }
3.例如:
.abc1,#abc2{ color:red; } .......省略代码....... <p class="abc1">并集1</p> <p id="abc2">并集2</p>
4.注:支持多个标签取并集,中间用逗号连接就行。上一节中交集选择器也可以取多个交集
二、兄弟选择器
1.相邻兄弟选择器
(1)定义:给指定选择器后面紧跟的那个选择器选中的标签设置属性。
(2)格式:
标签1+标签2{ 属性:值; }
(3)例子:
h1+p{ color:red; .......省略代码....... <h1>我是标题1</h1> <p>我是段落1</p> <p>我是段落2</p> <p>我是段落3</p> <h1>我是标题2</h1> <p>我是标题5</p> <p>我是标题6</p> <p>我是标题7</p>
(4)注意点:相邻兄弟选择器只能选中紧跟后面的那个标签;
如果选择多个,也就是多个选择器用加号相邻,则最后一个会生效,前提是按顺序写,别跳过标签,例如
h1+p+p+p+a{ color:red; } .......省略代码....... <h1>我是标题1</h1> <p>我是段落1</p> <p>我是段落2</p> <p>我是段落3</p>
2.通用兄弟选择器
(1)定义:给指定选择器后面的所有选择器选中的所有标签设置属性。
(2)格式:
选择器1~选择器2{ 属性:值; }
(3)举例:
h2~p{ color:blue; } .......省略代码....... <h2>我是标题3</h2> <a href="#">我来阻挡1</a> <p>我是段落8</p> <p>我是段落9</p> <p>我是段落10</p> <a href="#">我来阻挡2</a>
(4)注:后面的p标签全都生效了,即使有其他标签阻挡也没事
三、源码:
d75_union_selectord76_brother_selector
地址:
https://github.com/ruigege66/HTML_learning/tree/master
2.CSDN:https://blog.csdn.net/weixin_44630050(心悦君兮君不知-睿)
3.博客园:https://www.cnblogs.com/ruigege0000/
4.欢迎关注微信公众号:傅里叶变换,后台回复“礼包”获取Java大数据学习视频礼包
HTML连载20-并集选择器&兄弟选择器的更多相关文章
- css选择器 兄弟选择器 相邻兄弟选择器 子元素选择器
1.兄弟选择器: ~ 该选择器会选择当前元素之后的所有相邻指定元素(具有相同父元素的兄弟元素): .p ~ li{ color: blue; } <div> <p class=&qu ...
- 盒子总结,文本属性操作,reset操作,高级选择器,高级选择器优先级,边界圆角(了解),a标签的四大伪类,背景图片操作,背景图片之精灵图
盒子总结 ''' block: 设置宽高 1.没有设置宽,宽自适应父级的宽(子级的border+padding+width=父级的width) 2.没有设置高,高由内容撑开 设置了宽高 一定采用设置的 ...
- H5C3--属性选择器、兄弟选择器、伪类选择器
属性选择器 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF ...
- CSS 相邻兄弟选择器
相邻兄弟选择器(Adjacent sibling selector)可选择紧接在另一元素后的元素,且二者有相同父元素. 选择相邻兄弟 如果需要选择紧接在另一个元素后的元素,而且二者有相同的父元素,可以 ...
- CSS相邻兄弟选择器
相邻兄弟选择器定义:选择紧接在另一个元素后的元素,而且两者有着相同的父元素. 代码一:<body> <h1>This is a heading.</h1> < ...
- CSS后代选择器,子选择器和相邻兄弟选择器
平时在代码练习中,经常用到后代选择器,子选择器也会用到,这里做个总结: 1,后代选择器和子选择器区别: ①写法不一样:后代选择器的标识为:空格 如:ul li{width:150px;} [ul和li ...
- 兄弟选择器 E + F
兄弟选择器在IE7下支持会有bug,特记于此 如果兄弟选择器有Html注释,兄弟选择器在IE7下会失效 代码如下 E + Fp + p{color:red} <p class="te ...
- web CSS的知识- 关于后代选择器,子选择器,兄弟选择器的使用
1. 后代选择器官方解释:后代选择器可以选择作为某元素后代的元素.理解:选择某一标签的后代中,所有的此标签标记例:ul em {color:red;}就是选择,h1标签后代中中,所有的em.代码如下: ...
- CSS后代选择器、子元素选择器、相邻兄弟选择器区别与详解
派生选择器用的很多,派生选择器具体包括为后代选择器.子元素选择器.相邻兄弟选择器,我们来理解一下他们之间的具体用法与区别. 1.css后代选择器语法:h1 em {color:red;} 表示的是从h ...
随机推荐
- Mac下vim安装taglist
1 安装taglist taglist 的安装非常简单.从vim官网的这个链接 http://www.vim.org/scripts/script.php?script_id=273,就可以下载到ta ...
- Day02stu
⦁ 环境搭建之接口测试工具Jmeter搭建 1) 什么是Jmeter? Jmeter是一个接口测试工具,基于Java开发,是是Apche公司使用Java平台开发的一款测试工具. 运行环境需要配置:JD ...
- Linux网络——查看网络连接情况的命令
Linux网络——查看网络连接情况的命令 摘要:本文主要学习了Linux中用来查看网络连接情况的命令. hostname命令 hostname命令用于显示和设置系统的主机名称,设置只是临时生效,永久生 ...
- Python【day 17-2】面向对象-成员
'''''' ''' 1.简述面向对象三大特性并用示例解释说明?[背写] 1.封装 狭义的封装:把一组属性封装到一个对象,创建对象的时候 广义的封装:代码块,函数.对象.类.模块-py文件都是封装 把 ...
- FCC---Make Motion More Natural Using a Bezier Curve--- juggling movement
This challenge animates an element to replicate the movement of a ball being juggled. Prior challeng ...
- 比较好用的移动端适配的两种方案及flexible和px2rem-loader在webpack下的配置
移动端适配,目前自己常用的两种 方案,参考以下两篇好文 方案一:使用lib-flexible包 https://www.w3cplus.com/mobile/lib-flexible-for-html ...
- JavaScriptCore
在移动的混合开发中经常用到OC与JS的交互,就涉及iOS中的JavaScriptCore类,下面终结如下 JavaScriptCore中的类 在项目中引入JavaScriptCore后,链到头文件中, ...
- nRF24L01+如何检测信道被占用-RSSI寄存器实战分享
检测信道占用的需求场景 在使用nRF24L01模块做一对多或多对一的组网通信中,大家都会担心一个问题就是在发送的时候,希望不要有其他的模块也进行发送,因为这样就会使无线信号发生碰撞,信道被堵塞,造成通 ...
- Troubleshooting ORA-01555/ORA-01628/ORA-30036 During Export and Import (Doc ID 1579437.1)
Troubleshooting ORA-01555/ORA-01628/ORA-30036 During Export and Import (Doc ID 1579437.1) APPLIES TO ...
- 2019徐州网络赛 H.function
题意: 先有\(n=p_1^{k_1}p_2^{k_2}\cdots p_m^{k_m}\),定义\(f(n)=k_1+k_2+\cdots+k_m\). 现在计算 \[ \sum_{i=1}^nf( ...