属性选择器

来源：互联网发布：刘备怎么玩知乎编辑：程序博客网时间：2024/06/16 06:04
<!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <title>属性选择器</title>    <style>        /*找到所有具有alt属性的标签*/        img[alt]{            margin: 20px;        }        /*找到所有具有alt=123属性的img标签*/        img[alt="123"]{            margin: 20px;        }        /*找到所有具有alt属性以1开头的img标签*/        img[alt^="1"]{            margin: 20px;        }        /*找到所有具有alt属性以3结尾的img标签*/        img[alt$="3"]{            margin: 20px;        }        /*找到所有具有alt属性包含3的img标签*/        img[alt*="3"]{            margin: 20px;        }        /*选择具有att属性且属性值为一用空格分隔的字词列表，其中一个等于val元素（包含只有一个值且该值等于val的情况） */        div[class~="c"]{            height: 50px;            background-color: antiquewhite;            border: 1px solid red;        }        /*选择具有att属性且属性值为以val开头并用连接符"-"分隔的字符串的E元素，如果属性值仅为val，也将被选择。*/        div[class|="b"]{            height: 50px;            background-color: antiquewhite;            border: 2px solid red;        }    </style></head><body><img src="../img/1.PNG" alt=""/><img src="../img/1.PNG" /><img src="../img/1.PNG" alt="123"/><img src="../img/1.PNG" alt="234"/><div class="a c"></div><div class="b c"></div><div class="b-c"></div><div class="b-c"></div></body></html>
0 0