版权声明:本文为博主原创文章,未经博主允许不得转载。 https://blog.csdn.net/chengxu_kuangrexintu/article/details/84197328
前言
前面分享了子元素选择器,在这里给大家分享一下我学习到的属性选择器。
属性选择器
属性选择器是指选择具有某些属性的元素,表现表现的形式有下面的几种:
- name,选择name有关的元素
- name=value,选择name=value的元素
- name^=value,表示选中以value开头的元素
- name$=value,表示选中以value结尾的元素
下面通过代码实例来说明:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
/*选择中具有name属性的元素
属性:开始标签后面 属性名="值"
可以理解为:[选择条件]
* */
/*input[name]{
border: 1px solid red;
}*/
/*选中input中type=password的元素*/
/*input[type=password]{
border: 1px solid red;
}*/
/*^表示以什么东西开头的都会被选中,选中input中 name值以u开头的那些元素*/
/*input[name^=u]{
border: 1px solid red;
}*/
/*$表示以什么东西结尾的都会被选中,选中input中 name值以e结尾的那些元素*/
input[name$=e]{
border: 1px solid red;
}
</style>
</head>
<body>
<!--表单 type=text 输入框 -->
<input type="text" name="username"/>
<input type="text" name="use"/>
<input type="text" name="us"/>
<input type="text" />
<!-- type=password 密码框-->
<input type="password" />
<div name="xiaobai"></div>
</body>
</html>
上面属性选择器的4种情况都有些写出来,需要看某种情况就把其中一种注释取消掉运行代码就可以看到了。