关于属性选择器的常用属性以及使用方法

属性选择器

解释如下图，下面我们通过代码块来给大家解释具体意思；
这里我们用input标签详细解释一下：

首先在body里面构建一个表单from，然后在里面放许多input标签

 <form action="#">

        文本框1：<input type="text" name="" id="">
        文本框2：<input type="text" name="" id=""><br>
        文本框3：<input type="text" name="" id="">
        文本框4：<input type="text" name="" id=""><br>
        日期框：<input type="date" name="" id="">
        搜索框：<input type="search" name="" id=""><br>
        重置按钮：<input type="reset" value="重置">
        自定义结束时间：<input type="datetime" name="" id=""><br>
        结束时间：<input type="datetime-local" name="" id="">
        范围条：<input type="range" name="" id=""><br>
        邮件框：<input type="email" name="" id="">
        数字框：<input type="number" name="" id=""><br>
        时间框：<input type="time" name="" id="">
        提交按钮：<input type="submit" value="提交"><br>
        密码框：<input type="password" name="" id="">
        网址框：<input type="url" name="" id=""><br>


    </form>

在添加任何样式之前，代码块在浏览器里面渲染的效果如图所示：

添加：[attribute]:选取带有指定属性的元素

input[type]<!--这里选取含有属性type的input标签（这里是全部标签）-->
        {
            color: red;<!-- 设置颜色为红色-->
        }

修改样式后结果如下图所示：

在这里我们可以看到全部具有type属性的input标签全部变成红色（这里是全部 包括范围条），由此可以看出第一个属性是将具有该属性的标签全部选中

添加：[attribute=“value”]:选取带有指定属性的元素

input[type="text"]{<!-- 此处选择type属性为text的标签 -->
  background-color: rgba(0,0,0,0.3);<!-- 修改背景颜色为0.3透明-->
  color: hotpink;<!--  修改字体为粉红色-->
  }

修改样式后结果如下图所示：

这里我们选择type属性值为“text”（即选择前四个文本框），此时可以看到只有前四个文本框的样式发生了改变，其他的input标签并未发生变化。对于此用法的理解为：具有该属性并且选取到特殊值。

添加：[attribute^=“value”]:选取属性值以指定词汇开头的元素

 input[type^="s"]{<!--选取以“ s ”开头-->
            background-color: green;
        }

修改样式后结果如下图所示：

因为搜索框search和提交按钮submit以字母“s”开头，所以此处选取这两个input标签。

添加：[attribute$=“value”]:选取属性值以指定词汇结尾的元素

        input[type$="t"]{   <!-- 选取type属性值以“t”的标签-->
            background-color: yellow;
        }

修改样式后结果如下图所示：

因为文本框text、提交按钮submit、重置按钮reset均以字母“t”结尾，所以此处选取这几个input标签。

添加：[attribute=“value”]:选取属性值以指定词汇结尾的元素*

 input[type*="a"]{   <!--选取所有type属性值带有字母“a”的标签  -->
            background-color: hotpink;
        }

修改样式后结果如下图所示：

因为搜索框search、日期框date、自定义结束时间datetime、结束时间datetime、邮件框email、密码框submit均含有字母“a”结尾，所以此处选取这几个input标签。