CSS3新增属性选择器

最新推荐文章于 2023-05-16 20:37:08 发布

溯琳

最新推荐文章于 2023-05-16 20:37:08 发布

阅读量241

点赞数 1

分类专栏： web 笔记文章标签： html5 html css3 css

本文链接：https://blog.csdn.net/m0_56787796/article/details/116192713

版权

web 同时被 2 个专栏收录

23 篇文章 1 订阅

订阅专栏

笔记

5 篇文章 1 订阅

订阅专栏

CSS3新增属性选择器

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <title>CSS3新增属性选择器</title>
    <style>
      /* 类选择器和属性选择器 伪类选择器 权重都是 10 */
      /* 必须是input 且同时具有 value属性 选择这个元素  [] */
      input[value] {
        color: pink;
      }
      /* 只选择 type =text 文本框的input 选取出来 */
      input[type="text"] {
        color: pink;
      }
      /* 选择   div 具有class属性 并且属性值 必须是 icon开头的这些元素 */
      div[class^="icon"] {
        color: red;
      }
      /* 选择   section 具有class属性 并且属性值 必须是 data结束的这些元素 */
      section[class$="data"] {
        color: blue;
      }
      div.icon1 {
        color: skyblue;
      }
    </style>
  </head>
  <body>
    <!-- 1. 利用属性选择器就可以不用借助于类或者id选择器 -->
    <input type="text" value="请输入用户名" />
    <input type="text" />
    <!-- 2. 属性选择器还可以选择属性=值的某些元素  -->
    <input type="text" name="" id="" />
    <input type="password" name="" id="" />
    <!-- 3. 属性选择器可以选择属性值开头的某些元素 -->
    <div class="icon1">aaaa</div>
    <div class="icon2">bbbb</div>
    <div class="icon3">cccc</div>
    <div class="icon4">dddd</div>
    <div>ffff</div>
    <!-- 4. 属性选择器可以选择属性值结尾的某些元素 -->
    <section class="icon1-data">嘿嘿</section>
    <section class="icon2-data">哈哈</section>
    <section class="icon3-ico">嗷嗷</section>
  </body>
</html>

溯琳

关注

1
点赞
踩
1

收藏

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

CSS3新增属性选择器<!DOCTYPE html><html lang="en"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <meta http-equiv="X-UA-Compatible" content="ie=edge" />
复制链接

扫一扫