同级兄弟元素之间的CSS进行控制

临近兄弟:用 + 表示,只匹配该元素后边的第一个同级元素。

普通兄弟:用 ~ 表示,匹配该元素后边的所有同级元素。

例子:

  <style>
    div#aa p{
      font-size:14px;
      color:#000;
    }
    div#aa p.on{
      color:#f00;
    }
    div#aa p.on ~span{
      color:#00f;
    }
    div#aa p.on +span{
      font-weight:bold;
    }
  </style>

  <div id="aa">
    <p class="on">sdf</p>
    <span>sdf</span>
    <span>sdf</span>
  </div>

//当把p的class设为on的时候,span的样式也跟着改变。

  

时间: 2024-10-22 18:18:47

同级兄弟元素之间的CSS进行控制的相关文章

兄弟选择器和相邻选择器按正序控制兄弟元素和相邻元素的样式

在做兄弟元素 和 相邻元素的 移入移出控制显示与否的功能的时候,发现了一个问题,具体代码如下: <html><head> <style type="text/css">    div{       width:100px;       height:100px;       border:1px solid blue;       display:inline-block;    } #left:hover,#right:hover{       b

前端学习 -- Css -- 兄弟元素选择器

为一个元素后边的元素设置css样式: 语法:前一个 + 后一个. 作用:可以选中一个元素后紧挨着的指定的兄弟元素. 为一个元素后边的所有相同元素设置css样式: 语法:前一个 ~ 后边所有. <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <style type="text/css"> h1 +

3种纯css方法控制元素隐藏显示

1.通过hover,也是最常用的方式.此方法要求按钮与被控制元素必须有层级关系.(兼容低端浏览器常用) <div class="nav-btn"> <h2>按钮</h2> <ul class="nav-box"> <li><a href="#">菜单1</a></li> <li><a href="#">菜单2

CSS基础知识(2)三种样式表的写法,块、行内、行内块元素之间的转换

margin: 0 auto /*可以让盒子居中*/1.三种样式表的书写方法 (1)内嵌式写法 特点:样式只作用于当前文件,没有真正实现结构表现分离. <head> <style type="text/css"> 样式表写法 </style></head> (2)外链式写法 特点:作用范围是当前站点,谁调用谁生效,范围广,真正实现结构表现分离. <link rel="stylesheet" href="

1定位与 2一些小标签的使用 3版心作用 4元素之间的转换 5项目准备

1定位的使用: 1固定定位(position:fixed) 2绝对定位(position:absolute) 3相对定位(position:resitive) 4静态定位(position:static)默认 脱标 脱标 不脱标 不脱标 模式转换(inline-block) 模式转换(inline-block) 模式不转换(占据原来在标准流里的位置) 模式不转换 相对浏览器定位 父盒子无定位(static):相对浏览器 父盒子有定位(除是static): 相对父盒子 相对原来位子定位 没有作用

jQuery使用(四):DOM操作之查找兄弟元素和父级元素

查找兄弟元素 向下查找兄弟元素 next() nextAll() nextUntil() 向上查找兄弟元素 prev() prevAll() prevUntil() 查找所有兄弟元素 siblings()  1.1.1.next()方法用来查找下一个兄弟元素,可以传参也可以不传参.参数可以是任意jQuery选择器,表示如果下一个元素如果是指定的元素就选定.当没有选中指定的元素时,jQuery链式调用还是保持原来的jQuery对象. <!-- next --> <button>点我&

JQuery获取子孩子和兄弟元素的方法

这里说的获取当前元素的子孩子和兄弟元素的方法,另外还有遍历和指定的具体要求: 01.html代码: <!DOCTYPE html> <html> <head> <title>测试jquery</title> <meta charset="utf-8"/> <link rel="stylesheet" type="text/css" href="01.css&q

jQuery如何获取当前元素的兄弟元素

jQuery如何获取当前元素的兄弟元素:在实际应用中,有时候要获得当前元素的兄弟元素,下面就通过一段实例代码简单介绍一下如何获取当前元素的兄弟元素.实例代码如下: <!DOCTYPE html> <html> <head> <meta charset=" utf-8"> <meta name="author" content="http://www.softwhy.com/" /> &l

使用jquery获取指定li元素后面的所有兄弟元素

使用jquery获取指定li元素后面的所有兄弟元素:如果我们已经获取了一个li元素,那么如何获取此li元素后面的所有的兄弟元素,下面就通过代码实例做一下简单介绍.代码如下: <!DOCTYPE html> <html> <head> <meta charset=" utf-8"> <meta name="author" content="http://www.softwhy.com/" /&g