★文章内容学习来源：拉勾教育大前端就业集训营

五、属性选择器

最后附有所有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>

4.选择器权重

  • 基础选择器：id 选择器 > 类选择器 > 标签选择器 > *
  • 伪类选择器、属性选择器的权重 = 类选择器 。
  • 伪元素选择器的权重=标签选择器 。

5.总结

下篇继续：【39】CSS3 （2）——盒模型