关于css:属性选择器

2次阅读

共计 589 个字符,预计需要花费 2 分钟才能阅读完成。

属性选择器能够依据元素特定的属性来抉择元素,这样能够不必借助于“类选择器”或“id 选择器”。

属性选择器的权重为 10。

1、抉择含有某属性的元素

<input type="text" value="请输出用户名">
<input type="text">

如果我想选出具备 value 属性的 input 元素,能够这么写:

input[value] {color: red;}

2、抉择等于某属性值的元素

<input type="text" value="请输出用户名">
<input type="password">

如果我想选出 input 类型为 password 的元素,能够这么写:

input[type=password] {color: red;}

3、匹配属性值以 xx 结尾的元素

<div class="icon1">
<div class="icon2">
<div class="icon3">
<div class="icon4">
input[class^=icon] {...}

4、匹配属性值以 xx 结尾的元素

<div class="top_box">
<div class="bottom_box">
input[class$=box] {...}

5、匹配属性值含有 xx 的元素

<div class="icon1">
<div class="icon2">
<div class="nav_icon">
input[class*=icon] {...}
正文完
 0