CSS3新增选择器-属性选择器

最新推荐文章于 2022-08-10 20:27:03 发布

房东的喵

最新推荐文章于 2022-08-10 20:27:03 发布

阅读量162

点赞数

分类专栏：前端

本文链接：https://blog.csdn.net/luxunlx123/article/details/105875951

版权

前端专栏收录该内容

30 篇文章 0 订阅

订阅专栏

在这里插入图片描述
指定元素

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
        <style type="text/css">
            img[title] {border: 5px #f00 solid;}
            img[alt] {border: 5px #00f solid;}
        </style>
    </head>
    <body>
        <img src="img/1.jpg" title="img1">
        <img src="img/2.jpg" alt="img2">
    </body>
</html>

在这里插入图片描述
指定元素属性和值

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
        <style type="text/css">
            input[type="text"] {width: 300px;height: 100px;border: 1px #000 dashed;}
            input[type="submit"] {width: 100px;height: 100px;border: none;background: #00f;color: #fff;}
        </style>
    </head>
    <body>
        <input type="text"/>
        <input type="submit"/>
    </body>
</html>

在这里插入图片描述
指定属性包含该元素

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
        <style type="text/css">
        .box1 {width: 100px;height: 100px;background: #f00;}
        .box2 {width: 300px;height: 300px;background: #00f;}
        div[class~="lx"] {margin: 0 auto;}
        </style>
    </head>
    <body>
        <div class="box1"></div>
        <div class="box2 lx"></div>
    </body>
</html>

在这里插入图片描述
以分隔符分开

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
        <style type="text/css">
            img[class|="2"] {border: 2px #f00 solid;}
        </style>
    </head>
    <body>
        <img src="img/1.jpg" class="1-img"/>
        <img src="img/2.jpg" class="2-img"/>
        <img src="img/3.jpg" class="3-img"/>
        <img src="img/4.jpg" class="4-img"/>
    </body>
</html>

在这里插入图片描述
以指定字符开头的所有进行匹配

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
        <style type="text/css">
            img[class^="a"] {border: 5px #00f solid;}
        </style>
    </head>
    <body>
        <img src="img/1.jpg" class="aimg"/>
        <img src="img/2.jpg" class="aaimg"/>
        <img src="img/3.jpg" class="bmg"/>
        <img src="img/4.jpg" class="cimg"/>
    </body>
</html>

在这里插入图片描述
以指定字符结尾的所有进行匹配

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
        <style type="text/css">
            img[class$="a"] {border: 5px #00f solid;}
        </style>
    </head>
    <body>
        <img src="img/1.jpg" class="aimg"/>
        <img src="img/2.jpg" class="aaimg"/>
        <img src="img/3.jpg" class="bmga"/>
        <img src="img/4.jpg" class="cimg"/>
    </body>
</html>

在这里插入图片描述
所有包含指定元素

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
        <style type="text/css">
            img[class*="m"] {border: 5px #00f solid;}
        </style>
    </head>
    <body>
        <img src="img/1.jpg" class="aimg"/>
        <img src="img/2.jpg" class="aaimg"/>
        <img src="img/3.jpg" class="bmga"/>
        <img src="img/4.jpg" class="cimg"/>
    </body>
</html>

在这里插入图片描述

房东的喵

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
CSS3新增选择器-属性选择器

指定元素<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title></title> <style type="text/css"> img[title] {border:...
复制链接

扫一扫