其他选择器

最新推荐文章于 2023-03-05 22:47:11 发布

star103301

最新推荐文章于 2023-03-05 22:47:11 发布

阅读量376

点赞数

文章标签： css css3 html

本文链接：https://blog.csdn.net/star103301/article/details/121839444

版权

又是学习的一天，这已经是我第七次课啦~

一、首先，学习的是交集选择器和并集选择器。区别两者，交集选择器是选择两个选择器共同拥有的内容，而并集选择器是可以指定多个。

交集选择器和并集选择器的不同点示例：

交集

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

并集

<style>
    div,p.box{
        color: #2f4bff;
    }
</style>

二、其次，学习的是相邻兄弟选择器和通用的兄弟选择器。

两者的不同点示例：

相邻兄弟选择器

<style>
    div+p{
        color:red;
    }
</style>

通用的兄弟选择器

<style>
    div~p{
        color:red;
    }
</style>

三、然后，学习的是伪类选择器，伪类选择器分三种，伪类选择器之hover,伪类选择器之first-child,伪类选择器之before and after。

伪类选择器之hover示例：

<head>
    <meta charset="UTF-8">
    <title>伪类选择器之hover</title>
  <style>
      .box{
          width: 100px;
          height: 100px;
          border: 1px solid blue;
      }
      .box:hover{
          cursor: pointer;
          background-color: #2f4bff;
      }
  </style>
</head>
<body>
<!-- 需求：当鼠标移到div上时，背景颜色变为红色，同时鼠标指针变为小手形状 -->
<!--
伪类选择器都是以:开头的选择器。
:hover 表示鼠标移到元素上时会自动触发的效果。
伪类选择器需要配合其它选择器一起使用。
-->
<p><div class="box">交集选择器</div></p>
<div class="box">带有样式的</div>
<p class="box">样式</p>
<p>其他样式</p>
<p>没有样式</p>

</body>
</html>

伪类选择器之first-child示例：

<head>
    <meta charset="UTF-8">
    <title>伪类选择器之first-child</title>
    <style>
        ul>li {
            list-style: none; /*去掉li前面的小圆点*/
        }
        li:first-child {
            color: red;
        }
        li:last-child {
            color: blue;
        }
        /*li:first-child + li {
            color: green;
        }*/
        li:nth-child(3) {
            color: green;
        }
    </style>


</head>
<body>
<!-- 需求：选择第一个li元素，选择最后一个li元素 -->
<!-- 使用 :first-child 伪类选择器来获取第一个子节点 -->
<!-- 使用 :last-child 伪类选择器来获取最后一个子节点 -->
<!-- 需求：选择第二个li元素 -->
<!-- 使用 :nth-child(n) 伪类选择器来获取指定n对应位置的子节点，n是一个大于0的整数 -->
<ul>
    <li>北京</li>
    <li>天津</li>
    <li>上海</li>
    <li>重庆</li>
</ul>


</body>
</html>

伪类选择器之before and after示例：

<head>
    <meta charset="UTF-8">
    <title>伪类选择器之first-child</title>
    <style>
        ul>li {
            list-style: none; /*去掉li前面的小圆点*/
        }
        li:first-child {
            color: red;
        }
        li:last-child {
            color: blue;
        }
        /*li:first-child + li {
            color: green;
        }*/
        li:nth-child(3) {
            color: green;
        }
    </style>


</head>
<body>
<!-- 需求：选择第一个li元素，选择最后一个li元素 -->
<!-- 使用 :first-child 伪类选择器来获取第一个子节点 -->
<!-- 使用 :last-child 伪类选择器来获取最后一个子节点 -->
<!-- 需求：选择第二个li元素 -->
<!-- 使用 :nth-child(n) 伪类选择器来获取指定n对应位置的子节点，n是一个大于0的整数 -->
<ul>
    <li>北京</li>
    <li>天津</li>
    <li>上海</li>
    <li>重庆</li>
</ul>


</body>
</html>

四、最后学习的是定位，

示例：

<head>
    <meta charset="UTF-8">
    <title>定位</title>
    <style>
        /*通配符选择器，它会匹配页面中所有的元素*/
        *{
            padding: 0;
            margin: 0;
        }
        /*#box {
           width: 100%;
           height: 20px;
           background-color: gray;
       }*/
        .top{
            width: 100%;
            height: 20px;
            background-color:red;
            position: relative;
            display: block; /*none表示隐藏，block表示显示*/

        }
        .center{
            width: 500px;
            height: 100px;
            background-color: blue;
            position: absolute;
            left:50%;
            top:50%;
            transform: translate(-50%, -50%);/*称这个元素本身的宽度和高度的一半 CSS3*/

        .bottom{
                width: 100%;
                height: 30px;
                background-color: green;
                position: fixed;
                left: 10px;
                bottom:10px;
        }
                .body{
                    height: 2000px;
                }

    </style>
</head>
<body>
<!--<div id="box">第一个</div>-->
<div class="top"></div>
<div class="center"></div>
<div class="bottom"></div>

</body>
</html>

这就是今天所学的全部内容了~