自学前端总结3（自用）-css选择器

最新推荐文章于 2024-11-04 17:05:06 发布

渴望看海的少年

最新推荐文章于 2024-11-04 17:05:06 发布

阅读量168

点赞数

分类专栏：前端基础文章标签：前端 css

本文链接：https://blog.csdn.net/DespairA/article/details/119009449

版权

前端基础专栏收录该内容

23 篇文章 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>css-2</title>
    <!-- 笔记
块级元素:独占一行,高度宽度外边距内边距,都可以控制,宽度默认是父级元素的百分之百,是一个盒子可以放置行内元素或者块级元素
行内元素:相邻的在同一行,一行可以多个,高宽设置无效,行内元素只能容纳文本或者其他行内元素
行内块元素:少部分特殊的标签.同时具有块级效果和行内效果的元素
注意:将行内元素转换为块级元素,使用display:block;将块级元素转换为行内元素，使用display:inline;
转行内块，display:inline-block;
-->
    <style>
      /* 后代选择器,ol li {} 会将所有的li都选出来*/
      ol li {
        color: red;
      }
      /*子选择器，div>p{},只会选择div子层中的子元素，而在子层+子层的元素不受影响*/
      .nav1 > a {
        color: #ff0000;
      }
      /*- 并集选择器 div，p,a,{color:red;},类名可以用任何形式进行链接，*/
      /*伪类选择器
      一、超链接选择器，顺序link,visited,action,hover
      a:link{color:#ff0000};--设置未被访问过的链接的样式
      a:visited{};--设置被点击过以后的链接
      a:action{};--鼠标按下没弹起
      a:hover{color:#ff0000};--设置鼠标经过的链接

      二、focus选择器，把获得光标的表单元素选取出来,进行修改样式
      input:focus{background:red;}
      */
      .nav2 a:link {
        color: #333;
        text-decoration: none;
      }
      .nav2 a:hover {
        color: #ff0000;
      }
    </style>
  </head>
  <body>
    <!-- 后代选择器 -->
    <ol>
      <li>这是ol里面的li</li>
      <li>这是ol里面的li</li>
      <li>这是ol里面的li</li>
      <li>这是ol里面的li</li>
      <li>这是ol里面的li</li>
    </ol>
    <ul>
      <li>这是ul里面的li</li>
      <li>这是ul里面的li</li>
      <li>这是ul里面的li</li>
      <li>这是ul里面的li</li>
    </ul>
    <!-- 子选择器 -->
    <div class="nav1">
      子选择1
      <p>
        子选择2
        <a
          >孙子1
          <p>孙子2</p>
        </a>
      </p>
      <p>子选择3</p>
      <a>子选择4</a>
    </div>
    <!-- 伪类选择器 -->
    <div class="nav2">
      <a href="#">这是一个链接</a>
    </div>
  </body>
</html>