HTML&CSS的选择器归纳

最新推荐文章于 2024-07-06 20:00:00 发布

ohayo吧嗒吧嗒

最新推荐文章于 2024-07-06 20:00:00 发布

阅读量214

点赞数

文章标签： css html

本文链接：https://blog.csdn.net/qq_73704466/article/details/131647558

版权

文章介绍了HTML的各种选择器类型，包括元素选择器、类选择器、ID选择器、属性选择器等，并通过示例展示了它们在CSS中的应用，如伪类选择器`:hover`、`:active`等，以及如何使用这些选择器进行网页布局和交互设计。此外，还提供了初学者模仿网页制作的代码示例，涉及网页元素的布局和样式调整。

摘要由CSDN通过智能技术生成

HTML选择器类型：

元素选择器：通过HTML元素的名称选择元素。例如，p选择所有<p>元素。
类选择器：通过指定元素的类名选择元素。例如，.blog-post选择所有具有blog-post类的元素。
ID选择器：通过指定元素的ID选择元素。例如，#header选择具有header ID的元素。
属性选择器：通过指定元素的属性选择元素。例如，[href]选择具有href属性的元素。
后代选择器：通过指定元素的后代选择元素。例如，div p选择所有<p>元素，其父元素是<div>。
相邻兄弟选择器：通过指定元素的相邻兄弟选择元素。例如，h1 + p选择紧接在<h1>元素后的<p>元素。
伪类选择器：通过指定元素的状态或位置选择元素。例如，:hover选择鼠标悬停在元素上的状态。

<!DOCTYPE html> <html>

<head>

<title>我的博客</title>

<link rel="stylesheet" type="text/css" href="style.css"> </head>

<body> <header id="header"> <h1>我的博客</h1> </header>

<div class="blog-post">

<h2>标题</h2> <p>内容...</p> </div>

<div class="blog-post">

<h2>另一个标题</h2>

<p>另一个内容...</p> </div>

</body>

</html>

/* 元素选择器 */

h1 { color: #333; }

/* 类选择器 */

.blog-post { margin-bottom: 20px; }

/* ID选择器 */

#header { background-color: #f2f2f2; }

/* 后代选择器 */

div p { font-size: 14px; }

/* 相邻兄弟选择器 */

h2 + p { font-weight: bold; }

/* 伪类选择器 */

0.blog-post:hover { background-color: #eaeaea; }

在伪类选择器中还会存在这些伪类选择器

:active - 元素被激活时（例如，鼠标按下时）应用的样式。
:focus - 元素获得焦点时应用的样式（通常用于表单元素）。
:visited - 选择已访问链接的样式。
:link - 选择未访问链接的样式。
:first-child - 选择父元素的第一个子元素。
:last-child - 选择父元素的最后一个子元素。
:nth-child(n) - 选择父元素的第n个子元素。
:nth-of-type(n) - 选择父元素的第n个指定类型的子元素。
:nth-last-child(n) - 选择父元素的倒数第n个子元素。
:nth-last-of-type(n) - 选择父元素的倒数第n个指定类型的子元素。
:first-of-type - 选择父元素的第一个指定类型的子元素。
:last-of-type - 选择父元素的最后一个指定类型的子元素

以下是本人初学web几日模仿mi官网的代码

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>小米</title>
</head>
<body>
  <style>
  *{
    margin: 0px;
    padding: 0px;
    
  }
  li{
    list-style: none;

  }
  img{
    vertical-align: top;
    border: none;
  }
  a{
    text-decoration: none;
    color: #333;
  }
  </style>
  <div class="grandf" >
    <div class="father">
    <span> <img src="../images/下载.jpg " width="50px" height="50px"></span>
     
        <div class="fathers"><a href="#">小米手机&nbsp; Redmid手机 &nbsp; 电视&nbsp; 笔记本&nbsp; 平板&nbsp; 家电&nbsp; 路由器&nbsp; 服务中心&nbsp; 社区</a></div>
        <input value="搜索" maxlength="200">
      <div class="son">
        <br/>
        <div class="left">
           <a href="#"><ul >
                <li>手机</li>
                <li>电脑</li>
                <li>家电</li>
                <li>pad</li>
                <li>出行</li>
                <li>耳机</li>
                <li>健康</li>
                <li>生活</li>
                <li>智能</li>
              </ul></a>
        </div>
        <div class="right">
<img src="../images/s.png" width="800px" height="500px">
        </div>
      </div>
      </div>
      </div>
  <style>
    .grandf{
      position: relative;
      width: 1500px;
      height: 1000px;
      display: flex;
      margin: auto;
      background-color: white;
    }
    .father{
      display: inline-block;
      position: absolute;
      width: 1000px;
      height: 100px;
      background-color: aliceblue;
    }
    .fathers{
      background-color: beige;
      height: 10px;
      width: 655px;
      position: absolute;
      display:inline-block;
      font-size: 20px;
      right: 275px;
      bottom: 75px;
      justify-content: space-between;
      justify-content: space-around;

    }
    
 .left{
   display: flex;
  background-color:rgb(226, 224, 224);
  width: 200px;
  height: 500px;
  
}
 .right{
   display: flex;
background-color: aquamarine;
width: 800px;
height: 500px;
}
.son{
  display: flex;
}
.left ul {
  text-decoration: none;
  position: absolute;
  font-size: 40px;
  left: 20px;
  
}
.father input{
  display: inline-block;
width: 250px;
height: 30px;
position: absolute;
bottom: 55px;
right: 0px;
}
ul li::after{
color:black;
content: "          >";

}
.son ul{
  text-align: left;
  
}

  </style>
</body>
</html>

效果图如下还不是很会

运用一些hover的伪类选择器可以实现以下的趣味图片

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        a {
            display: inline-block;
            text-decoration: none;
            width: 120px;
            height: 58px;
            text-align: center;
            line-height: 54px;
            color: #3f3f3f;
        }

        .one {
            background-image:url(../images/bg1.png);
        }

        .two {
            background-image: url(../images/bg2.png);
        }

        .three {
            position: relative;
            background-image: url(../images/bg3.png);
        }

        .three img {
            display: none;
            position: absolute;
            bottom: -130px;
            left: 0;

        }

        .four {
            background-image: url(../images/bg4.png);
        }

        .one:hover {
            background-image: url(../images/bg5.png);
            color: white;
        }

        .two:hover {
            background-image: url(../images/bg6.png);
            color: white;
        }

        .three:hover {
            background-image: url(../images/bg7.png);
            color: white;
        }

        .three:hover img {
            display: block;
        }

        .four:hover {
            background-image: url(../images/bg8.png);
            color: white;
        }
    </style>

</head>

<body>
    <a href="#" class="one">五彩导航</a>
    <a href="#" class="two">五彩导航</a>
    <a href="#" class="three">
        五彩导航
        <img src="../images/code.jpg" alt="">
    </a>
    <a href="#" class="four">五彩导航</a>

</body>

</html>

附上学习时期的笔记