CSS其他选择器--笔记回顾

最新推荐文章于 2024-08-30 15:33:13 发布
最新推荐文章于 2024-08-30 15:33:13 发布
阅读量327 收藏 1
点赞数
分类专栏： css文本和字体 css HTML 文章标签： css html html5
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_47000934/article/details/109274630
版权
css 同时被 3 个专栏收录
10 篇文章 2 订阅
订阅专栏
HTML
9 篇文章 0 订阅
订阅专栏
css文本和字体
5 篇文章 0 订阅
订阅专栏

CSS其他选择器--笔记回顾

1、属性选择器

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Document</title>
  <style>
    [title]{
      color: red;
    }

    /* 等于one */
    [title="one div元素"]{
      font-size: 25px;
    }

    /* 包含one */
    [title*="one"]{
      background-color: blue;
    }

    /* 以one开头 */
    [title^="one"]{
      background-color: red;
    }

    /* 以one结尾 */
    [title$="one"]{
      background-color: burlywood;
    }

    /* |= （等于0ne或者以one开头后面用连接符连接）*/
    /* ~=  （有one单词并有空格） */

  </style>
</head>
<body>
  <div title="one">我是div元素</div>
  <p title="p元素">我是p元素</p>
  <p title="p one">我是p元素</p>
  <p>我也是p元素</p>
  <span title="one span元素">我是span元素</span>
</body>
</html>

在这里插入图片描述

2、后代选择器(重要)

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Document</title>
  <style>
    /* 选中div下面的span元素（直接子元素和间接后代元素） */
    div span{
      color: purple;
    }

    div p span{
      color: yellow;
    }

    /* div>span div元素里面的span子元素（不包括间接子元素） */
    /* 只要符合，不管嵌套 */
    div > span{
      color: red;
    }
  </style>
</head>
<body>

  <span>文字内容1</span>
  
  <div>
    <span>文字内容2</span>
    <p>
      <span>文字内容3</span>
    </p>
    <div>
      <span>文字内容4</span>
    </div>
    <span>文字内容5</span>
  </div>

  <div>
    <a href="#">
      <span>文字内容6</span>
    </a>
  </div>
</body>
</html>

在这里插入图片描述

3、子代选择器

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Document</title>
</head>
<style>
  .box1 > span{
    font-size: 30px;
  }

  .box1 .title{
    background-color: red;
  }
</style>
</head>
<body>
<!-- span是行内元素 -->
<span>文字内容1</span>

<div class="box1">
  <span>文字内容2</span>
  <p>
    <span>文字内容3</span>
  </p>
  <div>
    <span>文字内容4</span>
  </div>
  <span class="title">文字内容5</span>
  <div class="title">hehehe</div>
</div>

<div>
  <a href="#">
    <span>文字内容6</span>
  </a>
</div>
</body>
</html>

在这里插入图片描述

4、相邻兄弟选择器

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Document</title>
  <style>
    /* div元素后面紧挨着的p元素（且div、p元素必须是兄弟关系） */
    div+p{
      color: yellow;
    }

    /* div元素后面的所有p元素（且div、p元素必须是兄弟关系） */
    /* div~p{
      color: rosybrown;
    } */
  </style>
</head>
<body>
  <p>文字内容0</p>
  <div>
    <p>文字内容1</p>
  </div>
  <p>文字内容2</p>
  <p>文字内容3</p>
  <div>文字内容4</div>
  <p>文字内容5</p>
</body>
</html>

在这里插入图片描述

5、全兄弟选择器

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Document</title>
  <style>
    /* div元素后面的p元素（且div、p元素必须是兄弟关系） */
    div~p{
      color: rosybrown;
    }
  </style>
</head>
<body>
  <p>文字内容0</p>
  <div>
    <p>文字内容1</p>
  </div>
  <p>文字内容2</p>
  <p>文字内容3</p>
  <div>文字内容4</div>
  <p>文字内容5</p>
  
</body>
</html>

在这里插入图片描述

6、交集选择器（重要）

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Document</title>
  <style>
    /* 交集选择器 */

    /* 同时符合2个条件的元素： div元素、class值有one*/
    /* 文字1和文字4变色 */
    div.one{
      color: red;
    }
    
    /* 所有同时符合3个条件的元素：div元素、class值有one、title属性值等于text */
    /* 文字2和文字4变色 */
    div.one[title="text"]{
      color: sandybrown;
    }
  </style>
</head>
<body>
  <div class="one">文字内容1</div>
  <div class="one" title="text">文字内容2</div>
  <span class="one">文字内容3</span>
  <div class="one" title="text">文字内容4</div>
  <div>文字内容5</div>
</body>
</html>

在这里插入图片描述

7、并集选择器（重要）

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Document</title>
  <style>
    /* 并集选择器 */
    /* 所有的div元素+所有class值有one的元素+所有title属性值等于text的元素 */
    div,.one,[title="text"]{
      color: red;
    }
  </style>
</head>
<body>
  <div>文字内容1</div>
  <span class="one">文字内容2</span>
  <p title="text">文字内容3</p>
  <strong class="one">文字内容4</strong>
  <a href="#" class="one">文字内容5</a>
  <div>文字内容6</div>
</body>
</html>

在这里插入图片描述

8、伪类_目标伪类

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Document</title>
  <style>
    /* 目标伪类->：target */
    :target{
      color: red;
    }
  </style>
</head>
<body>
  
  <a href="#title1">标题1</a>
  <a href="#title2">标题2</a>
  <a href="#title3">标题3</a>

  <h2 id="title1">标题1</h2>
  <p>内容1</p>
  <p>内容1</p>
  <p>内容1</p>
  <p>内容1</p>
  <p>内容1</p>
  <p>内容1</p>
  <p>内容1</p>
  <p>内容1</p>
  <p>内容1</p>
  <p>内容1</p>
  <p>内容1</p>
  <p>内容1</p>
  <p>内容1</p>
  <p>内容1</p>
  <p>内容1</p>
  <p>内容1</p>
  <p>内容1</p>
  <p>内容1</p>
  <p>内容1</p>
  <p>内容1</p>
  <p>内容1</p>
  <p>内容1</p>
  <p>内容1</p>
  <p>内容1</p>

  <h2 id="title2">标题2</h2>
  <p>内容2</p>
  <p>内容2</p>
  <p>内容2</p>
  <p>内容2</p>
  <p>内容2</p>
  <p>内容2</p>
  <p>内容2</p>
  <p>内容2</p>
  <p>内容2</p>
  <p>内容2</p>
  <p>内容2</p>
  <p>内容2</p>
  <p>内容2</p>
  <p>内容2</p>
  <p>内容2</p>
  <p>内容2</p>
  <p>内容2</p>
  <p>内容2</p>
  <p>内容2</p>
  <p>内容2</p>
  <p>内容2</p>
  <p>内容2</p>
  <p>内容2</p>
  <p>内容2</p>
  <p>内容2</p>
  <p>内容2</p>

  <h2 id="title3">标题3</h2>
  <p>内容3</p>
  <p>内容3</p>
  <p>内容3</p>
  <p>内容3</p>  
  <p>内容3</p>
  <p>内容3</p>
  <p>内容3</p>
  <p>内容3</p>
  <p>内容3</p>
  <p>内容3</p>
  <p>内容3</p>
  <p>内容3</p>
  <p>内容3</p>
  <p>内容3</p>
  <p>内容3</p>
  <p>内容3</p>
  <p>内容3</p>
  <p>内容3</p>
  <p>内容3</p>
  <p>内容3</p>
  <p>内容3</p>
  <p>内容3</p>
  <p>内容3</p>
  <p>内容3</p>
  <p>内容3</p>
  <p>内容3</p>
  <p>内容3</p>
  <p>内容3</p>
  <p>内容3</p>
  <p>内容3</p>
  
</body>
</html>

9、伪类_元素状态伪类

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Document</title>
  <style>
    button{
      /* background-color: red; */
    }
    
    /* button[disable]{
      color: red;
    } */
    /* 元素伪类实现*/
    :disable{
      color: red;
    }
  </style>
</head>
<body>
  <button>我是按钮</button>
  <!-- 不可交互按钮 -->
  <button disabled>我是按钮</button>
</body>
</html>

在这里插入图片描述

10、伪类_动态伪类

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Document</title>
  <style>
    /* 1.lv ha ->a元素上 */
    /* 顺序要求 */
    /* ：hover必须放在：link和：visited后面才能完全生效 */
    /* ：active必须放在：hover后面才能完全生效 */
    /* 记忆：女朋友看到lv包包，haha大笑 */

    /* 未访问状态 */
    a:link{
      color: red;
    }
    /* 已经访问过 */
    a:visited{
      color: green;
    }
    /* 鼠标放上去 */
    a:hover{
      color: blue;
    }
    /* 鼠标点击，未松开 */
    a:active{
      color: orange;
    }

    /* 2.hover/active应用到其他元素  */
    strong:hover{
      background-color: blueviolet;
    }
    strong:active{
      font-size: 40px;
    }

    /* 3.focus的使用 */
    input:focus{
      background-color: blueviolet;
    }
    a:focus{
      background-color: cadetblue;
    }
    /* 注意a元素也可以获取焦点，此时a的伪类顺序如下 */
    /* :link :visited :focus :hover :active */
    /* 记忆：女朋友看到lv包包后feng一样haha大笑 */

    /* 4.去掉a元素的焦点状态 */
    /* a:focus{
      /* 不是真正的去掉 
      outline: none;
    } */
  </style>
</head>
<body>
  <!-- 1. lv ha ->a元素上-->
  <!-- tabindex可以调整tab选中元素的顺序(真正去掉a元素的焦点状态) -->
  <a href="#" tabindex="-1">百度一下</a>

  <!-- 2.hover/active -->
  <strong>我是strong元素</strong>

  <!-- 3.focus -->
  <input type="text">
</body>
</html>

在这里插入图片描述

11、伪类_nth-child(数字)

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Document</title>
  <style>
    /* 第三个子类 */
    /* 注意：body是父元素 */
    :nth-child(3){
      color: yellow;
    }

    /* 交集选择器：1、必须是p元素 2、p元素是子元素中第三个元素 */
    p:nth-child(3){
      color: blue;
    }

  </style>
</head>
<body>
  <div>
    <p>文字内容1</p>
    <p>文字内容2</p>
    <p>文字内容3</p>
    <p>文字内容4</p>
    <p>文字内容5</p>
    <p>文字内容6</p>
    <p>文字内容7</p>
    <p>文字内容8</p>
  </div>
    <p>
      <span>span内容1</span>
      <span>span内容2</span>
      <span>span内容3</span>
      <span>span内容4</span>
      <span>span内容5</span>
    </p>

    <!-- 这个div是body的第三个子元素 -->
    <div>
      <strong>strong内容1</strong>
      <strong>strong内容2</strong>
    </div>
  
</body>
</html>

在这里插入图片描述

12、伪类_nth-child(n)

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Document</title>
  <style>
    /* n:自然数 0，1，2，3，4.... */

    /* :nth-child(n){
      color: red;
    } */

    /* p:nth-child(n){
      color: blue;
    } */

    /* 1.    2n：2，4，6，8..... */
    /* 2n->even */
    /* p:nth-child(2n){
      color: blue;
    } */
/* 
    p:nth-child(even){
      color: blue;
    } */

    /* 2.     2n+1:1,3,5,7... */
    /* 2n+1 ->odd */
    /* p:nth-child(2n+1){
      color: blue;
    } */

  /*   p:nth-child(odd){
      color: blue;
    } */

    /* 3.   3n:3,6,9.... */
    /*    3n+2:2,5,8.... */
    p:nth-child(3n){
      color: red;
    }

    /* 4.  负数：-n+5 */
    /* 重要：选中前5个！！！！ */
    p:nth-child(-n+5){
      color: blue;
    }


  </style>
</head>
<body>
  <div>
    <p>文字内容1</p>
    <p>文字内容2</p>
    <p>文字内容3</p>
    <p>文字内容4</p>
    <p>文字内容5</p>
    <p>文字内容6</p>
    <p>文字内容7</p>
    <p>文字内容8</p>
  </div>
    <!-- <p>
      <span>span内容1</span>
      <span>span内容2</span>
      <span>span内容3</span>
      <span>span内容4</span>
      <span>span内容5</span>
    </p> -->
  
</body>
</html><style>
    /* n:自然数 0，1，2，3，4.... */

    /* :nth-child(n){
      color: red;
    } */

    /* p:nth-child(n){
      color: blue;
    } */

    /* 1.    2n：2，4，6，8..... */
    /* 2n->even */
    p:nth-child(2n){
      /* color: blue; */
    }

    p:nth-child(even){
      /* color: blue; */
    }

    /* 2.     2n+1:1,3,5,7... */
    /* 2n+1 ->odd */
    p:nth-child(2n+1){
      /* color: blue; */
    }

    p:nth-child(odd){
      /* color: blue; */
    }

    /* 3.   3n:3,6,9.... */
    /*    3n+2:2,5,8.... */
    p:nth-child(3n){
      /* color: blue; */
    }

    /* 4.  负数：-n+5 */
    /* 重要：选中前5个！！！！ */
    p:nth-child(-n+5){
      color: blue;
    }


  </style>
</head>
<body>
  <div>
    <p>文字内容1</p>
    <p>文字内容2</p>
    <p>文字内容3</p>
    <p>文字内容4</p>
    <p>文字内容5</p>
    <p>文字内容6</p>
    <p>文字内容7</p>
    <p>文字内容8</p>
  </div>
    <!-- <p>
      <span>span内容1</span>
      <span>span内容2</span>
      <span>span内容3</span>
      <span>span内容4</span>
      <span>span内容5</span>
    </p> -->
  
</body>
</html>

在这里插入图片描述

13、伪类_nth-child-强调

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Document</title>
  <style>
    /* 交集选择器：
            *是一个p元素
            *p元素同时作为子元素的第一个    
     */
    p:nth-child(1){
      color: red;
    }

    /* 加空格表示后代（见后代选择器） 
            *选择p元素，但是后面是一个空格，选p的后代
            *选择后代的第一个子元素
    */
    p :nth-child(1){
      color: blue;
    }
  </style>
</head>
<body>
  <div>
    <p>文字内容1</p>
    <p>文字内容2</p>
  </div>

  <p>
    <span>span1</span>
    <span>span2</span>
  </p>
</body>
</html>

在这里插入图片描述

14、伪类_nth-child(数字)

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Document</title>
  <style>
    /* nth-child():正着数 */
    /* nth-last-child():倒着数 */

    /* 1.跟数字 */
    /* 倒数第3个 */
    /* p:nth-last-child(3){
      color: blue;
    } */

    /* 2.跟n */
    /* 从后往前数的奇数 */
    /* p:nth-child(2n+1){
      color: blue;
    } */
    /* 最后2个元素 */
    p:nth-last-child(-n+2){
      color: blue;
    }
  </style>
</head>
<body>
  <div>
    <p>文字内容1</p>
    <p>文字内容2</p>
    <p>文字内容3</p>
    <p>文字内容4</p>
    <p>文字内容5</p>
    <p>文字内容6</p>
    <p>文字内容7</p>
    <p>文字内容8</p>
    <p>文字内容9</p>
    <p>文字内容10</p>
  </div>
</body>
</html>

在这里插入图片描述

15、伪类_nth-of-type(数字)

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Document</title>
  <style>

    /* 没有符合要求的变色 */
    p:nth-child(3){
      color: blue;
    }

    /* 文字内容3变色 */
    /* 可忽略其他元素，只数自己的元素 */
    p:nth-of-type(3){
      color: blue;
    }
  </style>
</head>
<body>
  <div>
    <div>我是div元素</div>
    <p>文字内容1</p>
    <span>我是span元素</span>
    <p>文字内容2</p>
    <p>文字内容3</p>
    <p>文字内容4</p>
    <p>文字内容5</p>
    <p>文字内容6</p>
    <p>文字内容7</p>
    <p>文字内容8</p>
    <p>文字内容9</p>
    <p>文字内容10</p>
  </div>
</body>
</html>

在这里插入图片描述

16、伪类_nth-of-type(n)

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Document</title>
  <style>

    /* 文字内容2，4，6，8，10变色 */
    p:nth-of-type(2n){
      color: blue;
    }
  </style>
</head>
<body>
  <div>
    <div>我是div元素</div>
    <p>文字内容1</p>
    <span>我是span元素</span>
    <p>文字内容2</p>
    <p>文字内容3</p>
    <p>文字内容4</p>
    <p>文字内容5</p>
    <p>文字内容6</p>
    <p>文字内容7</p>
    <p>文字内容8</p>
    <p>文字内容9</p>
    <p>文字内容10</p>
  </div>
</body>
</html>

在这里插入图片描述

17、伪类_nth-lat-of-type

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Document</title>
  <style>
    /* 文字内容7变色 */
    p:nth-last-of-type(3){
      color: blue;
    }
  </style>
</head>
<body>
  <div>
    <div>我是div元素</div>
    <p>文字内容1</p>
    <span>我是span元素</span>
    <p>文字内容2</p>
    <p>文字内容3</p>
    <p>文字内容4</p>
    <p>文字内容5</p>
    <p>文字内容6</p>
    <p>文字内容7</p>
    <p>文字内容8</p>
    <p>文字内容9</p>
    <span>我是span元素</span>
    <p>文字内容10</p>
  </div>
</body>
</html>

在这里插入图片描述

18、伪类_only-child

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Document</title>
  <style>
    /* 1.only-child */
    /* 父元素中的唯一子元素 */
    /* 文字内容全部变色：body是html的唯一子元素 html是根元素 */
    /* only-child{
      color: blue;
    } */

    /* body :only-child{
      color: blue;
    } */

    /* 2.only-of-type */
    /* 父元素中的唯一该类型子元素 */
    body :only-of-type{
      color: blue;
    }
  </style>
</head>
<body>

  <div>
    <!-- p在此时唯一类型 -->
    <p>
      <!-- 继承父元素 -->
      <span>文字内容0</span>
      <span>文字内容1</span>
    </p>
    <!-- 不在唯一 -->
    <div>文字内容2</div>
    <div>文字内容div</div>
  </div>
  <div>
    <strong>文字内容3</strong>
    <a href="#">
      <span>文字内容4</span>
    </a>
  </div>

</body>
</html>

在这里插入图片描述

19、伪类_root

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Document</title>
  <style>
    /* html{
      rem设置字体
    } */

    /* :root{

    } */
  </style>
</head>
<body>
  
</body>
</html>

20、伪类_empty

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Document</title>
  <style>
    :empty{
      height: 20px;
      background-color: blue;
    }
  </style>
</head>
<body>
  <div>
    <p></p>
    <span>hahah</span>
  </div>
  <div>
    <strong>hehehe</strong>
    <a href="#">hihihi</a>
    <div></div>
  </div>
</body>
</html>

在这里插入图片描述

21、伪类_否定伪类_not

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Document</title>
  <style>
    /* 除了div之外，所有的元素 */
    /* 不能加空格 这种格式不经常写*/
    /* :not(html):not(body):not(div){
      color: blue;
    } */
    body :not(div){
      color: blue;
    }

    body :not(.text){
      color: burlywood;
    }
  </style>
</head>
<body>
  <div>文字内容1</div>
  <p>文字内容2</p>
  <span class="text">文字内容3</span>
  <div>文字内容4</div>
</body>
</html>

在这里插入图片描述

22、伪类_first-line-letter

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Document</title>
  <style>
    p{
      width: 400px;
      background-color: red;
    }

    p::first-letter{
      font-size: 50px;
    }
    /* 注意：只有下列属性可以应用在::first-letter伪元素 */
    /* 字体属性、margin属性、padding属性、border属性、颜色属性、背景属性 */
    /* text-decoration、text-transform、letter-spacing、word-spacing（适当时候）、line-height、float、vertical-align（只有当float是none时） */

    p::first-line{
      color: white;
    }
    /* 注意：只有下列属性可以应用在::first-line伪元素 */
    /* 字体属性、颜色属性、背景属性 */
    /* word-spacing、letter-spacing、text-decoration、text-transform、line-height */
  </style>
</head>
<body>
  <p>
    2019年12月份最新最全HTML+CSS教程，
    帮助你从入门前端开发。
    课程由coderwhy全新录制，绝对靠谱；
    获取资料添加微信：coderwhy003
  </p>
</body>
</html>

在这里插入图片描述

23、伪元素_before和after

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Document</title>
  <style>
    /* .number{
      color: red;
    } */

    span::before{
      /* 设置内容 */
      /* content: "1"; */
      content: url("./img/伪类.PNG");
      color: red;
      margin-right: 20px;
    }

    span::after{
      /* content不能省略 */
      /* content: ""; */
      content: "abc";
      /* color: rosybrown; */
      background-color: rosybrown;
      margin-left: 20px;
      /* 这俩不支持该属性，要先设置display */
      display: inline-block;
      width: 100px;
      height: 30px;

    }
  </style>
</head>
<body>
  <!-- <span class="number">1</span> -->
  <span>我是span元素</span>
</body>
</html>

在这里插入图片描述

Li敢敢
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
CSS学习笔记之选择器
深海沧澜的博客
04-24 355
1.选择器:在{}之前的部分就是“选择器”，“选择器”指明了{}中的“样式”的作用对象，也就是“样式”作用于网页中的哪些元素。 body{ font-size:12px; color:red; } body就是选择器 2.标签选择器其实就是html代码中的标签。如右侧代码编辑器中的&lt;html&gt;、&lt;body&gt;、&lt;h1&gt;、&lt;p&gt;、&...
【CSS学习笔记一】选择器
weixin_42561984的博客
07-23 174
本文的笔记均为自己总结自b站【狂神说Java】系列课程，感谢分享。
CSS的基本使用--笔记回顾
qq_47000934的博客
10-25 332
CSS的基本使用--笔记回顾1、CSS的引入_内联样式2、CSS引入文档样式表3、CSS外部样式表4、CSS选择器_通用选择器5、CSS选择器_元素选规器6、CSS选择器_类选择器7、CSS选择器_id选择器8、开发中结构和样式分离9、最常见的CSS属性10、颜色的设置方式 1、CSS的引入_内联样式 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title&gt
CSS的元素类型--笔记回顾
qq_47000934的博客
10-25 219
CSS的元素类型--笔记回顾1、块级元素和行内级元素2、块级元素的由来3、display的练习-邮箱列表4、display的练习-分页列表5、visibikity属性的使用 1、块级元素和行内级元素 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style> .box {
笔记.rar-自己的笔记，留一个备份
01-04
2. **CSS**: 选择器、布局（如盒模型、Flexbox和Grid）、响应式设计，以及CSS预处理器如Sass或Less的介绍。 3. **JavaScript**: 变量、数据类型、函数、对象、闭包、异步编程（回调、Promise、async/await），以及...
2020-1-18课堂笔记1
08-08
在今天的课堂笔记中，我们回顾了Vue.js框架中的一些核心指令和HTML5的新特性。首先，让我们详细讨论Vue中的指令： 1. **v-text**：这个指令用于在DOM中渲染纯文本，它会确保文本内容不会被解析为HTML，而是作为纯...
传智播客-PHP基础视频_html+css+js笔记
07-24
CSS3引入了更多的选择器、边框和背景效果、动画、多列布局以及媒体查询等新特性，使网页设计更为丰富和灵活。 【JavaScript基础】 JavaScript是一种轻量级的解释型编程语言，主要用于客户端的Web开发，实现页面交互...
【建议收藏】万字整理，一篇文章帮你掌握 Css 选择器
余光的博客
09-06 3706
【建议收藏】万字整理，一篇文章帮你掌握 Css 选择器 简介直观的 css 选择器，可以美化我们的代码，提高可读性，甚至对浏览器的 Css 解析也有帮助。本篇文章的灵感来自于CSS Diner——一个有趣的 css 选择器小游戏，借助下面的例子相信你一定能掌握 css 选择器的妙用，加油～ 全篇文章共22个例子，分别使用了 标签选择器 class id 伪元素 伪类 属性 篇幅较长，建议收藏 阅读指南 先贴出选择器字典，帮助大家回忆基本的选择器含义 阅读示例 阅读代码，并完成题目（仅思考选择器部
css笔记课程笔记2019，5，22
05-22
3、css的基本选择器（三种） ** 要对哪个标签里面的数据进行操作 （1）标签选择器 * 使用标签名作为选择器的名称 div { background-color:gray; color:white; } （2）class选择器 * 每个html标签都...
html知识点复习整理
qq_47000934的博客
12-19 2050
html复习1.完整的HTML结构2.h、p、strong元素3.code、br、hr元素4.字符实体（Character Entity）5.span元素6.div元素7.img元素8.常用图片格式9.a元素10.target11.iframe元素12.base元素13.锚点链接14.伪链接15.图片链接16.URL的格式17.URL常见的协议18.列表19.有序列表 – ol、li20.无序列表：ul、li21.定义列表：dl、dt、dd22.列表相关的CSS属性23.表格常用元素24.table常用元素
CSS知识点复习整理
qq_47000934的博客
12-19 1139
CSS知识点复习整理1.常用CSS属性2.CSS样式应用到元素上3.内联样式（inline style）4.文档样式表（document style sheet）5.外部样式表6.@import7.CSS选择器（selector）8.通用选择器（universal selector）9.元素选择器（type selectors）10.类选择器（class selectors）11.class注意点12.id选择器（id selectors）13.id注意点14.设置网页图标15.最常用的CSS属性16.CS
生成html5代码--笔记回顾
qq_47000934的博客
10-25 380
生成html5代码--笔记回顾1、生成html5代码2、生成子代的元素3、生成兄弟元素4、子代+兄弟结构练习5、生成多个元素6、生成上一个层级7、对元素进行分组8、生成元素的属性9、生成元素的内容10、生成结构有数字11、隐式标签12、CSS的emmet用法 1、生成html5代码 !+回车 html:5+回车 （vscode） 2、生成子代的元素 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UT
CSS文本和字体--笔记回顾
qq_47000934的博客
10-25 279
CSS文本和字体--笔记回顾1、文本_text-decoration2、文本_letter-word-spacing3、文本_text-transform4、文本_text-indent5、文本_text-align6、字体_font-size7、字体_font-family8、字体_font-weight9、字体_font-style10、字体_font-varient11、字体_font_line-height12、字体_font_缩写属性 1、文本_text-decoration <!DOCTY
html+css小例子-1
qq_47000934的博客
12-06 208
html+css小例子-1 效果图如下： ![在这里插入图片描述](https://img-blog.csdnimg.cn/20201206190133275.png) 代码如下： <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"&g
css实现水平居中的不同类型的方式总结
qq_47000934的博客
12-08 190
css实现水平居中的不同类型的方式总结 1.普通文本 text-align: center; 2.行内元素 text-align: center; 3.图片：行内替换元素 text-align: center; 4.行内块级元素：inline-block text-align: center; 5.块级元素(在自身元素中添加该属性值) margin: 0 auto; <!DOCTYPE html> <html lang="en"> <head> <met
CSS继承和层叠--笔记回顾
qq_47000934的博客
10-25 183
CSS继承和层叠--笔记回顾1、CSS属性的继承2、CSS继承的注意事项3、CSS层叠的基本颜良 1、CSS属性的继承 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style> .box{ color: blue; font-size: 20px;
CSS中禁用DOM事件
bingmoujs的博客
08-26 744
表示元素不应对鼠标事件进行响应。这包括鼠标的点击、悬停和其他鼠标相关的动作。这个属性指定当鼠标指针设备（如鼠标）在元素上时，事件应该有什么表现。
css的position定位的属性
最新发布
qq_43235503的博客
08-30 273
css的position定位的属性
css3选择器-属性选择器
04-20
CSS3选择器-属性选择器是一种用于选择具有特定属性或属性值的HTML元素的CSS选择器。它可以根据元素的属性来选择元素，从而实现对元素的样式控制。 CSS3属性选择器有以下几种类型： 1. [attribute]：选择具有指定...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值