各种选择器

最新推荐文章于 2023-03-31 05:06:39 发布

柳飞飘絮

最新推荐文章于 2023-03-31 05:06:39 发布

阅读量581

点赞数

文章标签： css css3 html

本文链接：https://blog.csdn.net/liuyijunyyds/article/details/121832390

版权

上周的选择器学完了，之前只学了标签选择器、类选择器、id选择器、后代选择器和子选择器。现在后面的几个选择器也学了，还学了个定位。这次学的选择器是交集选择器、并集选择器、相邻和通用兄弟选择器，最后就是伪类选择器，伪类选择器又分了first-child、hover、befor and after几种类型。下面来说说学习的内容。

交集选择器：

实例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>交集选择器</title>
</head>
<body>
<style>
    div.box
    {
        color: red
    }
</style>
<div class="box">
    电影和游戏
</div>
<div>
    看电视
</div>
</body>
</html>

结果：

并集选择器：

实例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
div,.box
{
    color: red
}
    </style>
</head>
<body>
<div>风里雨里</div>
<div class="box">标签的 使用</div>
</body>
</html>

结果：

相邻和通用兄弟选择器：

实例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <!--相邻兄弟选择器-->
  <style>
div+p
{
    color: red
}
  </style>
</head>
<body>
<p>静香思</p>
<div>窗前明月光</div>
<p>疑是地上霜</p>
<hr>
<!--通用兄弟选择器-->
<style>
div~p
{
    color: red
}
</style>
<p>静香思</p>
<div>窗前明月光</div>
<p>疑是地上霜</p>
<p>举头望明月</p>
<p>低头思故乡</p>
</body>
</html>

结果：

伪类选择器之first-child：

实例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
  <style>
      ul>li{list-style:none }
      li:first-child{color: red}
      li:last-child{color: blue}
      li:nth-child(3){color: hotpink}
  </style>
</head>
<body>
<ul>
  <li>北京</li>
  <li>上海</li>
  <li>南京</li>
  <li>重庆</li>
</ul>
</body>
</html>

结果：

伪类选择器之hover：

实例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .box{
            width: 200px;
            height: 200px;
            border: 1px solid #000000;
        }
        .box:hover{
            cursor:pointer;
            background-color: blue;
        }
    </style>
</head>
<body>
<div class="box"></div>
</body>
</html>

结果：

伪类选择器之before and after：

实例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .box{
            width: 200px;
            height: 200px;
            border: 1px solid #000000;
            position: relative;}
       .box:before {
            content: "";
            width: 10px;
            height: 10px;
            border-top: 3px solid red;
            border-left: 3px solid red;
            position: absolute;
            left: -1px;
            top: -1px;
        }
        .box:after {
            content: "";
            width: 10px;
            height: 10px;
            border-right: 3px solid red;
            border-bottom: 3px solid red;
            position: absolute;
            right: -1px;
            bottom: -1px;
        }
    </style>
</head>
<body>
<div class="box">电影</div>
</body>
</html>

结果：

定位：

实例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        *{
            padding: 0;
            margin: 0;
        }
      .top{
          width: 100%;
          height: 30px;
          background-color: violet;
          position: relative;
          display: block;
      }
        .center{
            width: 500px;
            height: 100px;
            background-color: tomato;
            position: absolute;
            left: 50%;
            top: 50%;
            transform: translate(-50%,-50%);
        }
         .bottom{
             width: 100%;
            height: 30px;
            background-color: turquoise;
            position: fixed;
            left:10px;
            bottom:10px;
        }
         body{
             height: 2000px;
         }
    </style>
</head>
<body>
<div class="top"></div>
<div class="center"></div>
<div class="bottom"></div>
</body>
</html>

结果：

现在css的选择器就全部学完了。

柳飞飘絮

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
各种选择器

上周的选择器学完了，之前只学了标签选择器、类选择器、id选择器、后代选择器和子选择器。现在后面的几个选择器也学了，还学了个定位。这次学的选择器是交集选择器、并集选择器、相邻和通用兄弟选择器，最后就是伪类选择器，伪类选择器又分了first-child、hover、befor and after几种类型。下面来说说学习的内容。交集选择器：实例：<!DOCTYPE html><html lang="en"><head> <meta ...
复制链接

扫一扫