微信公众号搜"智元新知"关注
微信扫一扫可直接关注哦!

css判断标签属性的值

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判断标签属性的值

上面的代码中,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 举报,一经查实,本站将立刻删除。