css设置兄弟元素样式-兄弟选择器

有一种选择器就叫兄弟元素选择器，分为临近兄弟和普通兄弟。

临近兄弟（相邻）：用＋表示，只匹配该元素后边的第一个同级元素。
普通兄弟：用～表示，匹配该元素后边的所有同级元素。

1.相邻兄弟元素

<p class="print_pdf"></p>
<span>打印</span>
/* CSS相邻兄弟选择器，控制打印span标签样式 */
p.print_pdf + span { position:relative;top:-4px;}

2.普通兄弟元素

<p class="print_pdf"></p>
<p class="num">123</p>
<span>打印</span>
/* CSS普通兄弟选择器，控制打印span标签样式 */
p.print_pdf ~ span { position:relative;top:-4px;}

注意：

(1)+和~都不会影响元素前面的兄弟节点的样式

(2)+只会影响对应的后面第一个(相邻的)兄弟节点样式；而~则影响对应的后面的所有兄弟节点样式

css设置兄弟元素样式-兄弟选择器相关推荐

元素的样式设置元素类样式的操作开关灯效果获取兄弟元素当前元素的兄弟元素样式
元素的样式设置 <!DOCTYPE html> <html lang="en"> <head><meta charset="UT ...
css设置流光文字样式
css设置流光文字样式主要属性:-webkit-background-clip:text 表示元素的背景保留在前景内容中(文字) 和其形状大小相同 -webkit-text-fill-color:t ...
javafx css样式_使用CSS设置JavaFX饼图样式
javafx css样式渲染图表时, JavaFX默认提供某些颜色. 但是,在某些情况下,您想自定义这些颜色. 在此博客文章中,我将使用一个示例来更改JavaFX饼图的颜色,该示例打算在今天下午在2 ...
使用CSS设置JavaFX饼图样式
渲染图表时, JavaFX默认提供某些颜色. 但是,在某些情况下,您想自定义这些颜色. 在此博客文章中,我将使用一个示例来更改JavaFX饼图的颜色,该示例打算在今天下午在RMOUG Training ...
CSS设置链接的样式
链接是从一个网页到另一个网页的连接,CSS可通过不同属性以各种不同方式来设置链接的样式.下面本篇文章就来给大家介绍一下CSS设置链接的样式的方法,希望对大家有所帮助. 在讨论CSS属性之前,先了解链接 ...
html兄弟选择器怎么用,兄弟选择器 - 选择后面相邻的所有兄弟元素 - css3普通选择器...
兄弟选择器版本:CSS3 定义和用法E~F用于选择第一个元素之后所有的兄弟级的元素.只作用于同级元素. 这两个元素必须具有相同的父元素.F不必紧跟E. 语法:E~F{sRules} 选择E元素后面的 ...
jquery 添加点击添加class样式移除兄弟元素样式
<ul class="nav nav-tabs margin-top" id="before_click"> <li ><a hr ...
html添加样式js,前端-JS设置html元素样式
在前面的[<前端-获取或者修改div内容>]和[<前端-JavaScript获取和设置input的值>]中,我们说的都是改变内容了,这篇博客我们来说一下设置html元素的样式. ...
css设置滚动条的样式
1. webkit下面的CSS设置滚动条主要有下面7个属性 ::-webkit-scrollbar 滚动条整体部分,可以设置宽度啥的 ::-webkit-scrollbar-button 滚动条两端 ...

css设置兄弟元素样式-兄弟选择器

1.相邻兄弟元素

2.普通兄弟元素

css设置兄弟元素样式-兄弟选择器相关推荐

最新文章

热门文章