搜 索

8. CSS属性选择器

  • 230阅读
  • 2021年08月25日
  • 0评论
首页 / CSS / 正文
举例意义
img[alt]选择有alt属性的img标签
img[alt="故宫"]选择alt属性是“故宫”的img标签
img[alt^="北京"]选择alt属性以“北京”开头的img标签
img[alt$="夜景"]选择alt属性以“夜景”结尾的img标签
img[alt*="美"]选择有alt属性中含有“美”子的img标签
img[alt\="参赛作品"]选择有alt属性以“参赛作用-”开头的img标签
img[alt~="手机拍摄"]选择有alt属性中有空格隔开的“手机拍摄”字样的img标签

img[alt]

img[alt]选择具有alt属性的img标签

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<style>
    img{
        float: left;
        display: block;
        width: 50px;
        height: 50px;
        margin-right: 5px;
        background-color: blue;
    }
    
    img[alt]{
        border: 3px solid red;
    }
</style>
<body>    
    <!-- 选择不上,没有alt属性 -->
    <img src="">
    <!-- 可以被选择,有alt属性,没有属性值也可以 -->
    <img src="" alt="">
    <!-- 可以被选择,alt具有属性与值 -->
    <img src="" alt="abc">
</body>
</html>

注意:只有属性但没有属性值也可以被选择

div[alt="故宫"]

div[alt="故宫"]选择alt属性的属性值是“故宫”的div标签,例如:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<style>
    div{
        float: left;
        display: block;
        width: 50px;
        height: 50px;
        margin-right: 5px;
        background-color: blue;
    }
    div[alt="故宫"]{
        border: 3px solid red;
    }
</style>
<body>
    <!-- 选择不上,没有属性与属性值 -->
    <div>123</div>
    <!-- 选择不上,属性值为空 -->
    <div alt="">123</div>
    <!-- 可以被选择,属性值匹配 -->
    <div alt="故宫">123</div>
    <!-- 选择不上,属性值不匹配 -->
    <div alt="故故宫宫">123</div>
</body>
</html>

注意:属性跟属性值必须匹配才可以被选择,属性值为空也无法被选择

div[alt^="北京"]

div[alt^="北京"]选择alt属性的属性值开头关键词是“北京”的div标签

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<style>
    div{
        float: left;
        display: block;
        width: 50px;
        height: 50px;
        margin-right: 5px;
        background-color: blue;
    }
    div[alt^="故宫"]{
        border: 3px solid red;
    }
</style>
<body>
    <!-- 选择不上 -->
    <div>123</div>
    <!-- 选择不上,属性值为空 -->
    <div alt="">123</div>
    <!-- 可以被选择,属性值开头关键词匹配 -->
    <div alt="故宫">123</div>
    <!-- 选择不上,属性值开头不是指定关键词 -->
    <div alt="123故宫">123</div>
    <!-- 可以被选中,属性值开头关键词匹配 -->
    <div alt="故宫故宫">123</div>
    <!-- 选择不上,属性值开头关键词匹配不上 -->
    <div alt="故故宫宫">123</div>
</body>
</html>

div[alt$="夜景"]

div[alt$="夜景"]选择alt属性的属性值结尾关键词是“夜景”的div标签

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<style>
    div {
        float: left;
        display: block;
        width: 50px;
        height: 50px;
        margin-right: 5px;
        background-color: blue;
    }
    div[alt$="故宫"] {
        border: 3px solid red;
    }
</style>
<body>
    <!-- 选择不上 -->
    <div>123</div>
    <!-- 选择不上,属性值为空 -->
    <div alt="">123</div>
    <!-- 可以被选择,属性值结尾关键词匹配 -->
    <div alt="故宫">123</div>
    <!-- 可以被选择,属性值结尾关键词匹配 -->
    <div alt="123故宫">123</div>
    <!-- 可以被选择,属性值结尾关键词匹配 -->
    <div alt="故宫故宫">123</div>
    <!-- 选择不上,属性值结尾关键词匹配不上 -->
    <div alt="故故宫宫">123</div>
</body>
</html>

div[alt*="美"]

div[alt*="美"]选择alt属性的属性值任意位置含有的关键词是“美”的div标签

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<style>
    div {
        float: left;
        display: block;
        width: 50px;
        height: 50px;
        margin-right: 5px;
        background-color: blue;
    }
    div[alt*="美"] {
        border: 3px solid red;
    }
</style>
<body>
    <!-- 选择不上 -->
    <div>123</div>
    <!-- 选择不上,属性值为空 -->
    <div alt="">123</div>
    <!-- 可以被选择,属性值中包含美关键词 -->
    <div alt="故宫美">123</div>
    <!-- 可以被选择,属性值中包含美关键词 -->
    <div alt="美故宫">123</div>
    <!-- 可以被选择,属性值中包含美关键词 -->
    <div alt="故宫美故宫">123</div>
    <!-- 可以被选择,属性值中包含美关键词 -->
    <div alt="故美故宫美宫">123</div>
</body>
</html>

div[alt|="参赛作品"]

div[alt|="参赛作品"]选择有alt属性的属性值以参赛作用-开头的img标签

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<style>
    div {
        float: left;
        display: block;
        width: 50px;
        height: 50px;
        margin-right: 5px;
        background-color: blue;
    }
    div[alt|="手机拍摄"] {
        border: 3px solid red;
    }
</style>
<body>
    <!-- 选择不上 -->
    <div>123</div>
    <!-- 选择不上,属性值为空 -->
    <div alt="">123</div>
    <!-- 可以被选择,属性值开头关键词匹配 -->
    <div alt="手机拍摄-故宫">123</div>
    <!-- 选择不上,属性值开头关键词不匹配 -->
    <div alt="手机拍摄 故宫">123</div>
    <!-- 选择不上,属性值开头关键词不匹配 -->
    <div alt="故宫 手机拍摄-故宫">123</div>
    <!-- 选择不上,属性值开头关键词不匹配 -->
    <div alt="故宫手机拍摄">123</div>
</body>
</html>

div[alt~="手机拍摄"]

div[alt~="手机拍摄"]选择有alt属性的属性值中有空格隔开的手机拍摄字样的div标签

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<style>
    div {
        float: left;
        display: block;
        width: 50px;
        height: 50px;
        margin-right: 5px;
        background-color: blue;
    }
    div[alt~="手机拍摄"] {
        border: 3px solid red;
    }
</style>
<body>
    <!-- 选择不上 -->
    <div>123</div>
    <!-- 选择不上,属性值为空 -->
    <div alt="">123</div>
    <!-- 可以被选择,属性值中包含空格隔开的手机拍摄关键词 -->
    <div alt="故宫 手机拍摄">123</div>
    <!-- 可以被选择,属性值中包含空格隔开的手机拍摄关键词 -->
    <div alt="手机拍摄 故宫">123</div>
    <!-- 可以被选择,属性值中包含空格隔开的手机拍摄关键词 -->
    <div alt="故宫 手机拍摄 故宫">123</div>
    <!-- 选择不上,属性值中不包含空格隔开的手机拍摄关键词 -->
    <div alt="故宫手机拍摄">123</div>
</body>
</html>

补充

属性选择器不止仅限于alt这一个属性,还可以是别的,例如:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<style>
    img{
        float: left;
        display: block;
        width: 50px;
        height: 50px;
        margin-right: 5px;
        background-color: blue;
    }
    img[src]{
        border: 3px solid red;
    }
</style>
<body>
    <!-- 可以被选择 -->
    <img src="">
</body>
</html>

不止于alt属性,所有属性都可以被选择,包括自定义属性

无标签
评论区
暂无评论
avatar