【38】CSS3（1）—— 新增选择器⑤属性选择器

倏存

已于 2022-07-12 21:38:31 修改

阅读量261

点赞数 2

分类专栏：前端基础文章标签： css css3 原力计划

于 2021-04-08 12:41:23 首次发布

本文链接：https://blog.csdn.net/weixin_47640160/article/details/115495428

版权

前端基础专栏收录该内容

79 篇文章 7 订阅

订阅专栏

五、属性选择器

接着上四篇：
【34】CSS3（1）—— 新增选择器①子级选择器
 【35】CSS3（1）—— 新增选择器②兄弟选择器
 【36】CSS3（1）—— 新增选择器③结构伪类选择器
 【37】CSS3（1）—— 新增选择器④伪元素选择器
本篇讲解css3新增的第五种选择器：属性选择器

最后附有所有css3新增选择器思维导图总结

1.介绍

选择器	简介
`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`元素

2.适用情况

属性选择器用来选择包含指定属性的标签。

3.举例

3.1 `E[att]`

选择具有att属性的E元素

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>3.1举例 E[att]</title>
  <style>
    input[name] { 
      width: 40px;
      height: 40px;
    } 
  </style>
</head>
<body>
  <p>
    <input type="radio" name="sex" class="icon-dan"> 男性
    <input type="radio" name="sex" class="icon-dan"> 女性
  </p>
  <p>
    <input type="checkbox" class="icon-duo"> 运动
    <input type="checkbox" class="icon-duo"> 代码
  </p>
  <p>
    <input type="button" value="按钮">
    <input type="submit" value="提交按钮">
  </p>
</body>
</html>

在这里插入图片描述

3.2 `E[att="val"]`

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>3.2举例 E[att="val"]</title>
  <style>
   input[type="checkbox"] {
      width: 30px;
      height: 30px;
   }
  </style>
</head>
<body>
  <p>
    <input type="radio" name="sex" class="icon-dan"> 男性
    <input type="radio" name="sex" class="icon-dan"> 女性
  </p>
  <p>
    <input type="checkbox" class="icon-duo"> 运动
    <input type="checkbox" class="icon-duo"> 代码
  </p>
  <p>
    <input type="button" value="按钮">
    <input type="submit" value="提交按钮">
  </p>
</body>
</html>

在这里插入图片描述

3.3 `E[att^="val"]`

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>3.3举例 E[att^="val"]</title>
  <style>
  input[class^="icon"] {
      width: 30px;
      height: 30px;
    } 
  </style>
</head>
<body>
  <p>
    <input type="radio" name="sex" class="icon-dan"> 男性
    <input type="radio" name="sex" class="icon-dan"> 女性
  </p>
  <p>
    <input type="checkbox" class="icon-duo"> 运动
    <input type="checkbox" class="icon-duo"> 代码
  </p>
  <p>
    <input type="button" value="按钮">
    <input type="submit" value="提交按钮">
  </p>
</body>
</html>

在这里插入图片描述

3.4 `E[att$="val"]`

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>3.4举例 E[att$="val"]</title>
  <style>
   input[class$="dan"] {
      width: 30px;
      height: 30px;
    } 
  </style>
</head>
<body>
  <p>
    <input type="radio" name="sex" class="icon-dan"> 男性
    <input type="radio" name="sex" class="icon-dan"> 女性
  </p>
  <p>
    <input type="checkbox" class="icon-duo"> 运动
    <input type="checkbox" class="icon-duo"> 代码
  </p>
  <p>
    <input type="button" value="按钮">
    <input type="submit" value="提交按钮">
  </p>
</body>
</html>

在这里插入图片描述

3.5 `E[att*="val"]`

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>3.5举例  E[att*="val"]</title>
  <style>
   input[type*="o"] {
      width: 50px;
      height: 50px;
    }
  </style>
</head>
<body>
  <p>
    <input type="radio" name="sex" class="icon-dan"> 男性
    <input type="radio" name="sex" class="icon-dan"> 女性
  </p>
  <p>
    <input type="checkbox" class="icon-duo"> 运动
    <input type="checkbox" class="icon-duo"> 代码
  </p>
  <p>
    <input type="button" value="按钮">
    <input type="submit" value="提交按钮">
  </p>
</body>
</html>