一、并集选择器

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-并集选择器&兄弟选择器的更多相关文章

  1. css选择器 兄弟选择器 相邻兄弟选择器 子元素选择器

    1.兄弟选择器: ~ 该选择器会选择当前元素之后的所有相邻指定元素(具有相同父元素的兄弟元素): .p ~ li{ color: blue; } <div> <p class=&qu ...

  2. 盒子总结,文本属性操作,reset操作,高级选择器,高级选择器优先级,边界圆角(了解),a标签的四大伪类,背景图片操作,背景图片之精灵图

    盒子总结 ''' block: 设置宽高 1.没有设置宽,宽自适应父级的宽(子级的border+padding+width=父级的width) 2.没有设置高,高由内容撑开 设置了宽高 一定采用设置的 ...

  3. H5C3--属性选择器、兄弟选择器、伪类选择器

    属性选择器 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF ...

  4. CSS 相邻兄弟选择器

    相邻兄弟选择器(Adjacent sibling selector)可选择紧接在另一元素后的元素,且二者有相同父元素. 选择相邻兄弟 如果需要选择紧接在另一个元素后的元素,而且二者有相同的父元素,可以 ...

  5. CSS相邻兄弟选择器

    相邻兄弟选择器定义:选择紧接在另一个元素后的元素,而且两者有着相同的父元素. 代码一:<body> <h1>This is a heading.</h1> < ...

  6. CSS后代选择器,子选择器和相邻兄弟选择器

    平时在代码练习中,经常用到后代选择器,子选择器也会用到,这里做个总结: 1,后代选择器和子选择器区别: ①写法不一样:后代选择器的标识为:空格 如:ul li{width:150px;} [ul和li ...

  7. 兄弟选择器 E + F

    兄弟选择器在IE7下支持会有bug,特记于此 如果兄弟选择器有Html注释,兄弟选择器在IE7下会失效  代码如下 E + Fp + p{color:red} <p class="te ...

  8. web CSS的知识- 关于后代选择器,子选择器,兄弟选择器的使用

    1. 后代选择器官方解释:后代选择器可以选择作为某元素后代的元素.理解:选择某一标签的后代中,所有的此标签标记例:ul em {color:red;}就是选择,h1标签后代中中,所有的em.代码如下: ...

  9. CSS后代选择器、子元素选择器、相邻兄弟选择器区别与详解

    派生选择器用的很多,派生选择器具体包括为后代选择器.子元素选择器.相邻兄弟选择器,我们来理解一下他们之间的具体用法与区别. 1.css后代选择器语法:h1 em {color:red;} 表示的是从h ...

随机推荐

  1. Mac下vim安装taglist

    1 安装taglist taglist 的安装非常简单.从vim官网的这个链接 http://www.vim.org/scripts/script.php?script_id=273,就可以下载到ta ...

  2. Day02stu

    ⦁ 环境搭建之接口测试工具Jmeter搭建 1) 什么是Jmeter? Jmeter是一个接口测试工具,基于Java开发,是是Apche公司使用Java平台开发的一款测试工具. 运行环境需要配置:JD ...

  3. Linux网络——查看网络连接情况的命令

    Linux网络——查看网络连接情况的命令 摘要:本文主要学习了Linux中用来查看网络连接情况的命令. hostname命令 hostname命令用于显示和设置系统的主机名称,设置只是临时生效,永久生 ...

  4. Python【day 17-2】面向对象-成员

    '''''' ''' 1.简述面向对象三大特性并用示例解释说明?[背写] 1.封装 狭义的封装:把一组属性封装到一个对象,创建对象的时候 广义的封装:代码块,函数.对象.类.模块-py文件都是封装 把 ...

  5. 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 ...

  6. 比较好用的移动端适配的两种方案及flexible和px2rem-loader在webpack下的配置

    移动端适配,目前自己常用的两种 方案,参考以下两篇好文 方案一:使用lib-flexible包 https://www.w3cplus.com/mobile/lib-flexible-for-html ...

  7. JavaScriptCore

    在移动的混合开发中经常用到OC与JS的交互,就涉及iOS中的JavaScriptCore类,下面终结如下 JavaScriptCore中的类 在项目中引入JavaScriptCore后,链到头文件中, ...

  8. nRF24L01+如何检测信道被占用-RSSI寄存器实战分享

    检测信道占用的需求场景 在使用nRF24L01模块做一对多或多对一的组网通信中,大家都会担心一个问题就是在发送的时候,希望不要有其他的模块也进行发送,因为这样就会使无线信号发生碰撞,信道被堵塞,造成通 ...

  9. 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 ...

  10. 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( ...