H5CSS3第一课——CSS选择器

最新推荐文章于 2024-06-23 20:25:37 发布

pumpkin_truck

最新推荐文章于 2024-06-23 20:25:37 发布

阅读量412

点赞数 1

文章标签： css css3 前端

本文链接：https://blog.csdn.net/pumpkin_truck/article/details/128762458

版权

                   hello,时隔一年多，我再次回归了，在之前的公司因为保密协议过于严格，所以一直没敢写博客，还是挺想念博客生活的呢，接下来的日子我将继续学习了。
          因为现在是在专科里面带的H5CSS3和c语言课程，所以接下来写的内容可能就更适合初学者，有写错的地方还请大家多多指教。

CSS选择器

CSS中的选择器的种类非常多，并且在CSS3中也新增了一些选择器，使选择器的功能更强大，具体如下。
在这里插入图片描述

在这里插入图片描述
`这个比较简单就，不截图结果图了

  *{
        padding: 0;
        margin: 0;
      }
      p{
        font-size: 12px;
        color: brown;
      }

在这里插入图片描述

    input[value] {
        color: brown;
      }
      input[type="password"] {
        background-color: plum;
      }

 <!-- 属性选择器 -->
    <input type="text" value="请输入" />
    <input type="text" />
    <input type="password" name="" id="" />

结果图：
在这里插入图片描述

在这里插入图片描述

   <!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>css选择器</title>
    <style>
      .p1,
      .p2 {
        font-weight: 700;
      }
      .contain > li {
        background-color: bisque;
        list-style: none;
      }
      /* 后代 */
      .ohh1 b {
        color: red;
      }
      /* 子代 */
      .ohh > i > b {
        color: brown;
      }
      /* 相邻 */
      h1 + p {
        color: rgb(102, 93, 96);
        background-color: blue;
      }
      h2 ~ p {
        color: rgb(238, 188, 205);
        background-color: rgb(36, 36, 88);
      }
    </style>
    <!-- <link rel="stylesheet" href="./css/style.css"> -->
  </head>
  <body>
    <p style="color: aquamarine; font-size: 24px">hello</p>
    <div class="box">1111</div>
    <!-- 属性选择器 -->
    <input type="text" value="请输入" />
    <input type="text" />
    <input type="password" name="" id="" />
    <!-- 并集选择器 -->
    <div class="p1">最美中国</div>
    <div class="p2">我是谁</div>
    <!-- 子代选择器 -->
    <div class="contain">
      <li>锄禾日当午</li>
    </div>
    <div class="ohh">ohh<i>旱地<b>123</b>干旱2</i></div>
    <!-- 后代 -->
    <div class="ohh1">ohh1<i>旱地<b>123</b>干旱2</i></div>
    <!-- 兄弟选择器 -->
    <p>1111</p>
    <h1>wwww</h1>
    <p>1111</p>
    <p>1111</p>
    <h2>dddd</h2>
    <p>2222</p>
    <p>2222</p>
    <p>2222</p>
  </body>
</html>

结果图有点乱，但是一个一个截图实在是太麻烦了，将就看看吧
在这里插入图片描述

在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        :root{
            background-color: beige;
        }
   ::first-line{
    background-color: brown;
}
::first-letter{
    color: blue;
}
h1::before{
    content: "sasasas";
}
h1::after{
    content: "wwwwws";
    color: yellow;
}
.container p:first-child{
font-style: italic;
color: azure;
}
.container p:last-child{
font-style: italic;
color: rgb(18, 94, 94);
}
.container p:only-child{
background-color: blueviolet;
color: rgb(63, 24, 24);
}
.container :only-of-type{
background-color: rgb(212, 65, 151);
color: rgb(134, 16, 16);
}
.container p:nth-of-type(2){
    font-weight: 800;
    color: green;
}
a:link{
    background-color: blue;
}
a:visited{
    background-color: aqua;
}
a:hover{
    background-color: blanchedalmond;
}
a:active{
    background-color: blueviolet;
}
input:checked{
    width: 20px;
    height: 20px;
}
    </style>
</head>
<body>
    <div class="box">
        <p>sasasasasasadsssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssss
            sdaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa
            daaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa
        </p>
        <p>sasasasasas</p>
        <p>sasasasasas</p>
        <a href="#">fdfdfdfdfdfvf</a>
        <h1>1111</h1>
    </div>
    <div class="container">
        <p>白日依山尽</p>
        <p>黄河入海流</p>
        <li>sasas</li>
        <p>欲穷千里目</p>
        <p>更上一层楼</p>
    </div>
    <div class="container">
        <p>白日依山尽</p>
    </div>
    <a href="http://www.baidu.com">111111111111</a>
    <input type="checkbox">
</body>
</html>

截图如下：
在这里插入图片描述
本节小练习：

代码如下：

<!DOCTYPE html>
<html>

<head>

    <meta charset="UTF-8">

    <title>选择器的使用</title>
</head>
<style type="text/css">
    /* 设置导航栏样式 */
    nav {
        width: 300px
    }

    /* 设置导航栏中的每一项的样式 */
    li {
        background-color: rgba(0, 0, 0,
                0.4);
        height: 35px;
        line-height: 35px;
        overflow: hidden
    }

    /* 设置偶数行背景颜色透明度为0.9 */
    li:nth-of-type(2n) {
        background-color: rgba(0, 0, 0, 0.5)
    }

    /* 鼠标悬停时背景颜色为#0099E5 */
    li:hover {
        background: #0099E5
    }

    /* 设置超链接的样式 */
    a {
        text-decoration: none;
        display: block;
        color: #fff;
        height: 35px;
        padding: 0 38px
    }
</style>

<body>
    <nav>

        <ul>

            <li>
                <a href="#">JavaEE教程</a>
            </li>

            <li>
                <a href="#">Android教程</a>
            </li>

            <li>
                <a href="#">PHP教程</a>
            </li>

            <li>
                <a href="#">UI设计教程</a>
            </li>

            <li>
                <a href="#">iOS教程</a>
            </li>

            <li>
                <a href="#">Web前端教程</a>
            </li>

            <li>
                <a href="#">C/C++教程</a>
            </li>
        </ul>
    </nav>
</body>

</html>

pumpkin_truck

关注

1
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
H5CSS3第一课——CSS选择器

CSS中的选择器的种类非常多，并且在CSS3中也新增了一些选择器，使选择器的功能更强大，具体如下。结果图有点乱，但是一个一个截图实在是太麻烦了，将就看看吧。/* 鼠标悬停时背景颜色为#0099E5 *//* 设置偶数行背景颜色透明度为0.9 *//* 设置导航栏中的每一项的样式 */`这个比较简单就，不截图结果图了。/* 设置超链接的样式 *//* 设置导航栏样式 */
复制链接

扫一扫