选择器的种类及应用

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

一、交集选择器

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

            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; )

       定位是通配符选择器，它会匹配页面中所有的元素

       在边线框内移动图片时，谨记原则    右正左负（右"+" 左"-")

好了，今天的学习就先到这吧，咱们下次再见！谢谢你们的浏览。