复合选择器

最新推荐文章于 2024-08-17 23:02:19 发布

一份蛋炒饭

最新推荐文章于 2024-08-17 23:02:19 发布

阅读量85

点赞数

分类专栏： HTML 学习文章标签： css html5

本文链接：https://blog.csdn.net/weixin_52019215/article/details/114502109

版权

HTML 同时被 2 个专栏收录

17 篇文章 0 订阅

订阅专栏

学习

9 篇文章 0 订阅

订阅专栏

本文详细介绍了HTML的基本结构和CSS选择器的使用，包括后代选择器、交集选择器、伪类选择器等。通过示例展示了如何通过CSS实现元素的样式控制，如颜色、背景、行高和链接状态。同时，文章还探讨了行内元素、行内块元素的特性及其在布局中的应用。

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

<!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>
</head>
<body>
      <!-- 复合选择器 -->
      <!-- 后代选择器
               后代选择器前面可以是如何基础选择器 之间用空格隔开
    -->
    <!-- div>(div>img)+p*2 -->
    <div>
        <div><img src="" alt=""></div>
        <p></p>
        <p></p>
    </div>
    <div id="app"></div>
    <div class="app"></div>
    <ul class="nav"></ul>
    <ul id="name"></ul>
    <!-- ul>li.item$$${链接$}*2 -->
  <ul>
      <li class="items001">链接01</li>
      <li class="items002">链接02</li>
      <li class="items003">链接03</li>
  </ul>
  用&ensp;户&ensp;名：<input type="text" name="username" autocomplete="off"/><br />
  密&emsp;&emsp;码：<input type="password" name="pwd" /><br />
  确认密码：<input type="password" name="repwd" />

  <style>
      input:focus {
          display: inline-block;
          color: pink;
          background-color: yellow;
      }
      /* 交集选择器应用场景:在多个相同标签中选择具有某些类的标签 */
      /* 众多div中选择带有info类的元素 */
      div.info {
          color: blue;
      }
  </style>
   <div class="info">div中的提示信息</div>
   <div>我就是一个div</div>
   <p class="info">段落中的提示信息</p>
   

   <!-- 开发时不要在文本类元素中添加其他元素，专注于文本存放（h1~h6、p）。 -->

   <p>
       <div>this is a paragraph</div>
   </p>
   <!-- p里面方div,在浏览器接续后:::
   <p>

   </p>
   <div>this is a paragraph</div>
   <p></p> -->

   <!-- 行内元素 -->
   <!-- 行内元素之间可能有间隙, -->
   <!-- 行内元素默认宽度是内容宽度(内容撑开) -->
   <!-- 只能容纳文本或其他行内元素 -->
   <!-- 链接里面不要放链接了,如果放了会跳转到里面的url -->
   <!-- <a href="./01 后代选择器.html"><a href="./02 子代选择器.html">asdasd</a></a> -->
   <!-- 特殊情况的链接可以存放块元素 -->
   <!-- <a href="./03 并集选择器.html" target="_block"><img src="../images/bdlogo.gif" alt=""></a> -->

   <!-- 行内块元素inline-block -->
   <!-- inline-block 特点:
                          一行显示,彼此之间可能有间隙(inline特点)
                          默认宽度就是本身内容的宽度(inline特点)
                          可以设置宽度 高度 内间距 边框 外边距(block特点)
                           -->
   <!-- img input td是 inline-block -->

   <!-- 链接伪类选择器 -->
   <!-- 顺序不可变lvha -->
   <style>
    /* a:link  未被成功访问的链接(判断标准是a链接的href) */
    a:link {
        color: #ccc;
        text-decoration: none;
    }
    /* a:visited  访问过的(点击过的) 刷新还是不变 */
    /* a:visited 中只能设置颜色,其他属性被浏览器显示,设置无效 */
    a:visited {
        color: #369;
        /* 无作用 */
        /* text-decoration: none; */
    }
    /* a:hover  鼠标经过 hover可以写在任意元素身上 */
    a:hover {
        color: pink;
    }

    /* a:active 选中的 */
    a:active {
        color: purple;
    }
    </style>
    <a href="#">fun man</a>
    <a href="http://xxxxxxxxxx.com" target="_block"> no can</a>
        
    
    <!-- line-height -->
    <!-- 行高等于高度,文字水平居中 -->
    <!-- 行高小于行高,文字偏上 -->
    <!-- 行高大于行高,文字偏下 -->
    <!-- 原理：行高的上下空隙会平均分配 -->

    <!-- background-image -->
    <!-- 应用场景:
                logo
                装饰图片
                超大图片
                精灵图（雪碧图） -->
        <!-- background-image: none;没有背景 -->
        background-image: url();
        <div class="pic"></div>
        <style>
            .pic {
                 width: 200px;
                 height: 200px;
                background-image: url(../images/bg5.png),
                             url(../images/icon.png)
                
            }
        </style>

        <!-- background -->
        <!-- background-position: center left;
                  如果是预定义的方位,不分x与y,浏览器按照方位词判断位置 -->
        <!-- background-position:20px 20px;
             background-position:center 40px;
                  如果出现精确值,则第一个一定是x,第二个是y           -->
        <!-- background的复合写法
                  background:skyblue url(../images/logo.jpg) no-repeat fixed center 12px;
                  background:color image repeat attachment position; -->

            <!-- 下面几种给父元素加,可以解决外边距塌陷(子盒子个垂直方向的外边距,父盒子也会一起下来) -->
                  <!-- /* float: left; */
                  /* border: 1px solid; */
                  /* position: absolute; */
                  /* display: inline-block; */
                  /* display: table-cell; */
                  /* overflow: hidden; */
                  /* overflow: auto; */ -->


</body>
</html>

一份蛋炒饭

关注

0
点赞
踩
0

收藏

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

<!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>Doc
复制链接

扫一扫

专栏目录