在 HTML
中,有许多标签拥有各自的属性,CSS
可以通过判断这些属性的值来为标签添加不同的样式效果。
/* 以 a 标签的 href 属性为例 */
a[href="https://www.google.com"] { /* 当 href 属性值为 https://www.google.com 时 */
color: red;
text-decoration: none;
}
a[href="https://www.baidu.com"] { /* 当 href 属性值为 https://www.baidu.com 时 */
color: blue;
text-decoration: underline;
}
上面的代码中,CSS
在选择<a>
标签时,通过方括号内的属性选择器 [属性="值"]
来判断该标签的属性值,并为不同的属性值设置不同的样式效果。
除了上述代码中的属性选择器,还有其他的方式可以判断标签属性的值。
/* 以 input 标签的 type 属性为例 */
input[type="text"] { /* 当 type 属性值为 text 时 */
width: 200px;
height: 30px;
}
input[type="password"] { /* 当 type 属性值为 password 时 */
width: 200px;
height: 30px;
}
上面的代码中同样是使用了属性选择器,不同的是属性名由 type
取代了 href
。
当然,不仅仅是属性选择器可以用来判断标签属性的值,还有其他的选择器可以实现。
/* 以 p 标签的是否拥有子元素为例 */
p:empty { /* 当 p 标签内无子元素时 */
display: none;
}
p:not(:empty) { /* 当 p 标签内有子元素时 */
border: 1px solid black;
}
上述代码中使用了伪类选择器 :empty
和 :not
,前者判断了标签是否拥有子元素,后者则取反了 :empty 的判断结果。
可以看出,CSS
可以根据不同的标签属性值为其添加不同的样式效果,让网页更加精美美观。
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。