兄弟选择器jQuery

转载

mob6454cc73e9a6 2024-12-12 11:41:32

文章标签 兄弟选择器jQuery css 选择器伪类选择器子节点 文章分类 jQuery 前端开发

今天我们来学习关于选择器的相关知识。

一、交集选择器

交集选择器是选择两个选择器共同拥有的内容，例；

div.box {

color: red;

}

二、并集选择器

并集选择器是选择所有指定的选择器的内容，可以指定多个，它们之间用英文逗号隔开，例；

<style>
            div,.box,p {
                          color: red;
                            }
        </style>

三、相邻兄弟选择器

兄弟选择器，只会选择它之后并紧挨着它的，

需求：选择 div 相邻的 p 标签，例；

<p>静夜思</p>
<div>
<p>床前明月光，</p>
<p>疑是地上霜。</p>
<p>举头望明月，</p>
<p>低头思故乡。</p>
</div>
<p>李白</p>
<p>唐朝</p>

如果赋有颜色，这里只会标注出李白。

四、通用兄弟选择器

仍然只会选择其后的所有指定的兄弟标签，需求：选择 div 所有的兄弟标签，例；

<style>
              div~p {
                            color: red;
                         }
        </style>
<p>静夜思</p>
<div>
<p>床前明月光，</p>
<p>疑是地上霜。</p>
<p>举头望明月，</p>
<p>低头思故乡。</p>
</div>
<p>李白</p>
<p>唐朝</p>

这里的李白和唐朝都会变成红色

五、伪类选择器

1.伪类选择器之hover

伪类选择器都是以:开头的选择器

伪类选择器需要配合其他选择器一起使用。 hover 表示鼠标移到元素上时会自动触发的效果。

<style>
            .box {
                        width: 100px;
                        heght: 100px;
                        border: 1px   solid  #000000;
                     }
             .box:hover {
                        cursor: pointer;
                        background-color:red;
                      }
      </style>
  <div class="box"></div>

2.伪类选择器之first-child

需求：选择第一个 li 元素

使用 first-child 伪类选择器来获取第一个子节点；使用 last-child 伪类选择器来获取最后一个子节点。

需求：选择第二个 li 元素

使用 nth-child(n) 伪类选择器来获取指定 n 对应位置的子节点，n 是一个大于0 的整数。例；

<style>
                 ul>li {
                         list-style: none;                            (此处用于消除li 前面的小圆点）
                 }
          li:first-child: {
                       color: red;
           }
          li:last-child: {
                      color: blue;
          }
          li:nth-child(3): {
                      color: pink;
          }
</style>
<ul>
         <li>北京</li>
         <li>天津</li>
         <li>上海</li>
         <li>重庆</li>
</ul>

所以北京、重庆、上海分别对应的颜色为红色、蓝色、粉色。

3.伪类选择器之before and after

边框定义的顺序为：上、右、下、左。

边框线的定义：

下边线：border-bottom

上边线：border-top

左边线：border-left

右边线：border-right

六、定位

定位分三类：绝对定位（ position: absolute；)

相对定位（ position: relative；)

固定定位（ position: fixed; )