CSS新增选择器

最新推荐文章于 2024-01-31 21:17:26 发布

逝者如斯夫。

最新推荐文章于 2024-01-31 21:17:26 发布

阅读量283

点赞数

分类专栏： HTML +CSS 文章标签： css

本文链接：https://blog.csdn.net/weixin_60323200/article/details/119341550

版权

HTML +CSS 专栏收录该内容

29 篇文章 0 订阅

订阅专栏

目标选择器

子代选择器 div>p
兄弟选择器 div+p 针对的是向下寻找紧挨着的元素（这里是div下紧挨着的p元素）
同级选择器 div~p 针对的也是以下的元素，上面的选不到
属性选择器【属性名】下面详述

新增的属性选择器

注意：类选择器、属性选择器、伪类选择器，权重都是10。

选择符	简介
①E[att]	选择具有att属性的E元素
②E[att="val"]	选择具有att属性且属性值等于val的E元素
③E[att^="val"]	选择具有att属性且值以val开头的E元素
④E[att$="val"]	选择具有att属性且值以val结尾的E元素
⑤E[att*="val"]	选择具有att属性中含有val的E元素

<style>
      input[value] {
        color: pink;
      }
    </style>
  </head>
  <body>
    <input type="text" value="请输入用户名" />
    <input type="text" />

input[type="text"] {
        color: pink;
      }
    </style>
  </head>
  <body>
    <input type="text" name="" />
    <input type="password" name="" />

<style>
      /* 选择首先是div 然后 具有class属性 并且属性值 必须是icon开头的这些元素 */
      div[class^="icon"] {
        color: red;
      }
    </style>
  </head>
  <body>
    <div class="icon1">小图标1</div>
    <div class="icon2">小图标2</div>
    <div class="icon3">小图标3</div>
    <div class="icon4">小图标4</div>
  </body>

  <style>
      section[class$="data"] {
        color: pink;
      }
    </style>
  </head>
  <body>
    <section class="icon1-data">小图标1</section>
    <section class="icon2-data">小图标2</section>
    <section class="icon3-ico">小图标3</section>
    <section class="icon4-i">小图标4</section>
  </body>

  <style>
      section[class*="icon"] {
        color: pink;
      }
    </style>
  </head>
  <body>
    <section class="icon1-data">小图标1</section>
    <section class="icon2-data">小图标2</section>
    <section class="icon3-ico">小图标3</section>
    <section class="icon4-i">小图标4</section>
  </body>

结构伪类选择器

结构伪类选择器主要根据文档结构来选择元素，常用于根据父级选择器里面的子元素

选择符	简介
E：first-child	匹配父元素中的第一个子元素E
E：last-child	匹配父元素中的最后一个E元素
E：nth-child(n)	匹配父元素E第n个子元素E
E:first-of-type	指定类型E的第一个元素
E:last-of-type	指定类型E的最后一个
E:nth-of-type(n)	指定类型E的第n个

nth-child(n)

n可以是数字，关键字和公式
n如果是数字，就是选择第n个子元素，里面的数字从1开始
n可以是关键字：even偶数，odd奇数

完整写法

ul li:first-child {
        background-color: pink;
      }
      ul li:nth-child(2) {
        background-color: powderblue;
      }

nth:child和nth-of-type的区别

nth:child对父元素里面所有的孩子排序选择（序号是固定的）先找到第n个孩子，然后看看是否和E匹配

nth-of-type 对父元素里面指定的元素进行排序选择。先去匹配E，然后再根据E找第n个孩子

<style>
      /* 都选不中，因为div的第一个孩子是p,跟 div 匹配不上 */
      section div:nth-child(1) {
        background-color: red;
      }
    </style>
  </head>
  <body>
    <section>
      <p>光头强</p>
      <div>熊大</div>
      <div>熊二</div>
    </section>

 <style>
      /* 光头强和熊大都选中 */
      section :nth-of-type(1) {
        background-color: pink;
      }
    </style>
  </head>
  <body>
    <section>
      <p>光头强</p>
      <div>熊大</div>
      <div>熊二</div>
    </section>

 <style>
      /* 正确写法，选中熊二 */
      section div:nth-of-type(2) {
        background-color: red;
      }
    </style>
  </head>
  <body>
    <section>
      <p>光头强</p>
      <div>熊大</div>
      <div>熊二</div>
    </section>

伪类元素选择器（重点）

伪元素选择器可以帮助我们利用css创建新标签元素，而不需要HTML标签，从而简化HRML结构。

选择符	简介
::before	在元素内部的前面插入内容
::after	在元素的后面插入内容

注意：

before和after创建一个元素是属于行内元素
新创建的这个元素在文档中是找不到的，所以我们称为伪元素
语法：element::after{}【element是任何元素】
before和after 必须有content属性
before在父元素内容的前面创建元素，after在父元素的后面插入元素

伪元素选择器和标签选择器一样，权重为1

  <style>
      /* 效果：我是小猪 */
      div {
        width: 200px;
        height: 200px;
        background-color: pink;
      }
      div::before {
        content: "我";
      }
      div::after {
        content: "小猪";
      }
    </style>
 
  <body>
    <div>是</div>
  </body>

模糊处理

滤镜filter：

filter : 函数（）；例如filter：blur(5px); blur模糊处理，数值越大越模糊，为0时图片还原

img {
      filter: blur(15px);
    }
      img:hover {
          filter: blur(0);
      }

calc函数

calc（）c此CSS函数让你在声明CSS时执行一些计算。
width: calc(100% - 30px);
括号里面可以使用（+ - * /）

<style>
      .father {
        width: 300px;
        height: 200px;
        background-color: pink;
      }
      .son {
          /* 100% 是父元素额宽，子元素的宽度永远比父元素小30px */
        width: calc(100% - 30px);
        height: 30px;
        background-color: skyblue;
      }
    </style>
  </head>
  <body>
    <div class="father">
      <div class="son"></div>
    </div>
  </body>

过渡

谁过渡就给谁加
transition：要过渡的属性花费时间运动曲线何时开始；

属性：想要变化的css属性，宽高、背景颜色、内外边距都可以。如果想要所有的属性都变化过渡，写一个all就可以
花费时间：单位是s,（必须写单位）
运动曲线：默认是ease（可以省略）
何时开始：单位是秒（必须写单位）可以设置延迟出发时间默认是0s（可以省略）

div {
        width: 200px;
        height: 100px;
        background-color: pink;
        transition: width 0.5s;
     /* transition: width 0.5s, height 0.5s; */
        /* transition: all 0.5s; */
      }
      div:hover {
        width: 400px;
        height: 200px;
      }

逝者如斯夫。

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
CSS新增选择器

新增的属性选择器注意：类选择器、属性选择器、伪类选择器，权重都是10。选择符简介 ①E[att] 选择具有att属性的E元素 ②E[att="val"] 选择具有att属性且属性值等于val的E元素 ③E[att^="val"] 选择具有att属性且值以val开头的E元素 ④E[att$="val"] 选择具有att属性且值以val结尾的E元素 ⑤E[att*="val"] 选择具有att属性中含有val的E元素 <style&g
复制链接

扫一扫