CSS3新增选择器—属性选择器

斐波娜娜

已于 2023-12-27 12:30:01 修改

阅读量532

点赞数 14

分类专栏： HTML+CSS学习文章标签： css3 css 前端

于 2023-12-24 14:35:32 首次发布

本文链接：https://blog.csdn.net/christmassss/article/details/135181471

版权

HTML+CSS学习专栏收录该内容

8 篇文章 0 订阅

订阅专栏

一、属性选择器

1.1 属性选择器是什么？

属性选择器是通过元素的属性及属性值来选择元素的，这样就可以不借助类选择器或id选择器。下面介绍属性选择器的五种用法。

1.2 属性选择器的用法

用法一

简介：选择具有att属性的E元素

选择符：E[att]

代码如下：

<!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>
      /* 必须是input 但是同时具有 value这个属性 选择这个元素  [] */
      input[value] {
        color: pink;
      }
    </style>
  </head>
  <body>
    <!-- 1. 利用属性选择器就可以不用借助于类或者id选择器 -->
    <input type="text" value="请输入用户名" />
    <input type="text" />
  </body>
</html>

结果：

用法二

简介：选择具有att属性且属性值等于val的E元素

选择符：E[att="val"]

<!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>
      /* 只选择 type =text 文本框的input 选取出来 */
      input[type="text"] {
        color: pink;
      }
    </style>
  </head>
  <body>
    <!-- 2. 属性选择器还可以选择属性=值的某些元素 重点务必掌握的 -->
    <input type="text" name="" id="" />
    <input type="password" name="" id="" />
  </body>
</html>

运行结果：

用法三

匹配具有att属性且值以val开头的E元素

E[att^="val"]

<!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>
      /* 选择首先是div 然后 具有class属性 并且属性值 必须是 icon开头的这些元素 */
      div[class^="icon"] {
        color: red;
      }
    </style>
  </head>
  <body>
    <!-- 3. 属性选择器可以选择属性值开头的某些元素 -->
    <div class="icon1">小图标1</div>
    <div class="icon2">小图标2</div>
    <div class="icon3">小图标3</div>
    <div class="icon4">小图标4</div>
    <div>我是打酱油的</div>
  </body>
</html>

运行结果：

用法四

匹配具有att属性且值以val结尾的E元素

E[att$="val"]

<!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>
      /* 选择首先是section 然后 具有class属性 并且属性值 必须是 data结尾的这些元素 */
      section[class$="data"] {
        color: blue;
      }
    </style>
  </head>
  <body>
    <!-- 4. 属性选择器可以选择属性值结尾的某些元素 -->
    <section class="icon1-data">我是安其拉</section>
    <section class="icon2-data">我是哥斯拉</section>
    <section class="icon3-ico">哪我是谁</section>
  </body>
</html>

运行结果：

用法五

匹配具有att属性且值中含有val的E元素

E[att*="val"]

<!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>
      /* 选择首先是section 然后 具有class属性 并且属性值 必须是 data结尾的这些元素 */
      section[class*="blue"] {
        color: blue;
      }
    </style>
  </head>
  <body>
    <!-- 4. 属性选择器可以选择属性值结尾的某些元素 -->
    <section class="blue">我的类名是blue</section>
    <section class="blue-style">我的类名中含有blue</section>
    <section class="style-blue">我的类名中也含有blue</section>
    <section class="style">我的类名中不含有blue</section>
  </body>
</html>

运行结果：

斐波娜娜

关注

14
点赞
踩
11

收藏

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

属性选择器是通过元素的属性及属性值来选择元素的，这样就可以不借助类选择器或id选择器。下面介绍属性选择器的五种用法。简介：选择具有att属性且属性值等于val的E元素。匹配具有att属性且值以val开头的E元素。匹配具有att属性且值以val结尾的E元素。匹配具有att属性且值中含有val的E元素。简介：选择具有att属性的E元素。选择符：E[att="val"]选择符：E[att]
复制链接

扫一扫