CSS入门学习笔记（二）：存在和值属性选择器

最新推荐文章于 2024-09-29 21:43:16 发布

若数

最新推荐文章于 2024-09-29 21:43:16 发布

阅读量249

点赞数 1

分类专栏：零基础入门web前端文章标签： css html 属性选择器 css选择器选择器

本文链接：https://blog.csdn.net/Karven_/article/details/89141704

版权

零基础入门web前端专栏收录该内容

10 篇文章 0 订阅

订阅专栏

详细学习链接
second.html

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <title>css 存在和值属性选择器</title>
    <link rel="stylesheet" href="second.css">
</head>

<body>
    <h1>属性选择器测试</h1>
    <p one-protery>han</p>
    <p one-protery="yes_you">luo</p>
    <p one-protery="yes">time</p>
    <p one-protery="yes_he ss see">hong</p>
    
    
    <p>lan</p>

</body>

</html>

second.css:

/*应用于所有具有one-protery属性的元素*/
body {
    background-color: darkgray;
}

[one-protery] {
    color: red;
}
/*应用于该属性值=yes的元素*/
[one-protery=yes_you] {
    color:green;
}
/*运用所有该属性的包含值see的元素，即使该属性有多个值*/
[one-protery~=see] {
    color: burlywood;
}
/* 选择属性为one-protery且包含属性值yes开头的所有元素，当然也包括yes */
[one-protery^="yes"] {
    color: deeppink;
}