组合选择符深入了解：

一、组合符是通过简单的选择符组合起来使用的选择符

在 CSS3 中包含了四种组合方式:

后代选择器(以空格分隔) 0个，1个，多个
子元素选择器(以大于号分隔） 0个，1个，多个
相邻兄弟选择器（以加号分隔） 0个，1个
普通兄弟选择器（以破折号分隔） 0个，1个，多个

1、后代选择器（俗着说：后代后代就是他的所有子孙元素）

例如：div p

  <style>div {width: 500px;height: 100px;border: 1px solid red;}div p{color: red;}</style>
</head><body><div><p>我是liuxmoo！</p><span><p>你好呀</p></span></div><p>我是谁？？我不在div里面，不是它的后代,我不会边红色</p>
</body>

结果展示：

2、子元素选择器（俗着说：子元素，就是他的儿子女儿们，并不包括孙子孙女们）

例如：div>p

  <style>div {width: 500px;height: 100px;border: 1px solid red;}div>p {color: red;}</style>
</head><body><div><p>我是liuxmoo！</p><span><p>这是孙子不变色</p></span></div><p>我不在div里面，我不会变红色</p>
</body>

结果：

3、相邻兄弟选择器（俗着说：兄弟兄弟，就是有同一个父亲（父元素），相邻兄弟那就是该元素后面紧跟在一起的某个兄弟元素）

例如：div+p

  <style>div {width: 500px;height: 100px;border: 1px solid red;}div+p {color: red;}</style>
</head><body><div><p>我是liuxmoo！</p><span><p>这是孙子</p></span></div><p>与div有相同的父亲，body，而且是紧跟在div后面的兄弟，变色</p><p>与div有相同的父亲，body，但是不是紧跟着的兄弟，不变色</p>
</body>

如果紧跟着的不是选择的元素，那就是这个选择符选择不到元素，

  <style>div {width: 500px;height: 100px;border: 1px solid red;}div+p {color: red;}</style>
</head><body><div><p>我是liuxmoo！</p><span><p>这是孙子</p></span></div><span>与div有相同的父亲，body，但是不是p元素，不变色啊</p><p>与div有相同的父亲，body，也是p元素，但是不是紧跟着的兄弟，不变色</p>
</body>

结果：

4、后续兄弟选择器（俗着说：兄弟兄弟，就是有同一个父亲（父元素），后续兄弟：在这个元素后面出现的所有某个兄弟元素）

例如：div~p

  <style>div {width: 500px;height: 100px;border: 1px solid red;}div~p {color: red;}</style>
</head><body><p>与div有相同的父亲，body，但是是前面出现的兄弟元素，不变色</p><div><p>我是liuxmoo！</p><span><p>这是孙子</p></span></div><p>与div有相同的父亲，body，并且是div的后面出现的兄弟元素，变色</p><p>与div有相同的父亲，body，并且是div的后面出现的兄弟元素，变色</p>
</body>

结果展示：

组合选择符深入了解相关推荐

CSS3——对齐组合选择符伪类伪元素导航栏下拉菜单
水平&垂直对齐元素居中对齐 .center {margin: auto;width: 50%;border: 3px solid green;padding: 10px; } 文本居中对齐 ...
教你玩转CSS 组合选择符
目录后代选择器子元素选择器相邻兄弟选择器后续兄弟选择器 CSS组合选择符包括各种简单选择符的组合方式. 在 CSS3 中包含了四种组合方式: 后代选择器(以空格分隔) 子元素选择器(以大于号分 ...
html5后代选择符,css选择符有哪些？哪些属性可以继承？
属性的名字是一个合法的标识符,它们是CSS语法中的关键字.一种属性规定了格式修饰的一个方面.CSS选择器用于选择你想要的元素的样式的模式. css选择符有哪些?哪些属性可以继承?下面我们来看一下css ...
[你必须知道的css系列]第一回：丰富的利器终结篇：选择符的组合关系及选择符总结...
介绍了这么多选择符,其实选择符的使用最大的优势不是单枪匹马奋斗,而应该是针对不同的页面结构组合成各种方阵.其主要方式体现在针对性使用类选择符或者 ID选择符.选择符群组及选择符组合这3种方式. 一.针 ...
html:(29):伪选择符和分组选择符
伪类选择符更有趣的是伪类选择符,为什么叫做伪类选择符,它允许给html不存在的标签(标签的某种状态)设置样式,比如说我们给html中一个标签元素的鼠标滑过的状态来设置字体颜色: a:hover{co ...
[css选择器]总结：IE6不支持的CSS选择符
转载地址:https://www.wenjiwu.com/doc/zvsbii.html.此文最后也给出了原文地址,但是我点击过去发现是什么赌博彩票的地址,360也弹出小心的提示,所以这里只给出了我转 ...
分段管理机制（段描述符，描述符表，段选择符）
逻辑地址-=>线性地址-=>物理地址前面我们提到了当使用80x86微处理器时,有三种不同的地址: 逻辑地址(logical address):包含在机器语言指令中用来指定一个操作数或一条 ...
好程序员web前端CSS选择符（选择器）:表示要定义样式的对象
好程序员web前端CSS选择符(选择器):表示要定义样式的对象 1) 元素选择符/类型选择符(element选择器 ) 如:div{width:100px; height:100px; backgro ...
[你必须知道的css系列]第一回：丰富的利器2：CSS选择符之子选择符、相邻选择符...
对了,接下来要讲的属性选择符,相邻选择符,子对象选择符可能大家稍微有点陌生了,这当然也是有原因的,因为IE6及以下的浏览器并不支持这几个选择符,而大多数从事这方面工作的技术人员,多数时候还是主要考虑 ...
css通配选择符用什么表示,css的选择符
元素选择符 Element Selectors* E E#id E.class 关系选择符 Relationship SelectorsE F E>F E+F E~F属性选择符 Attribut ...

组合选择符深入了解

组合选择符深入了解：

一、组合符是通过简单的选择符组合起来使用的选择符

1、后代选择器（俗着说：后代后代就是他的所有子孙元素）

2、子元素选择器（俗着说：子元素，就是他的儿子女儿们，并不包括孙子孙女们）

3、相邻兄弟选择器（俗着说：兄弟兄弟，就是有同一个父亲（父元素），相邻兄弟那就是该元素后面紧跟在一起的某个兄弟元素）

4、后续兄弟选择器（俗着说：兄弟兄弟，就是有同一个父亲（父元素），后续兄弟：在这个元素后面出现的所有某个兄弟元素）

组合选择符深入了解相关推荐

最新文章

热门文章

组合选择符 深入了解

组合选择符 深入了解：

一、组合符是通过简单的选择符组合起来使用的 选择符

1、后代选择器（俗着说：后代后代就是他的所有子孙元素）

2、子元素选择器（俗着说：子元素，就是他的儿子女儿们，并 不包括孙子孙女们）

3、相邻兄弟选择器（俗着说：兄弟兄弟，就是有同一个父亲（父元素）， 相邻兄弟那就是该元素后面紧跟在一起的某个兄弟元素）

4、后续兄弟选择器（俗着说：兄弟兄弟，就是有同一个父亲（父元素）， 后续兄弟：在这个元素后面出现的 所有某个兄弟元素）

组合选择符 深入了解相关推荐

最新文章

热门文章

组合选择符深入了解

组合选择符深入了解：

一、组合符是通过简单的选择符组合起来使用的选择符

2、子元素选择器（俗着说：子元素，就是他的儿子女儿们，并不包括孙子孙女们）

3、相邻兄弟选择器（俗着说：兄弟兄弟，就是有同一个父亲（父元素），相邻兄弟那就是该元素后面紧跟在一起的某个兄弟元素）

4、后续兄弟选择器（俗着说：兄弟兄弟，就是有同一个父亲（父元素），后续兄弟：在这个元素后面出现的所有某个兄弟元素）

组合选择符深入了解相关推荐