css3选择器----属性匹配选择器

最新推荐文章于 2024-06-19 15:19:49 发布

三生梅雨渡潇潇

最新推荐文章于 2024-06-19 15:19:49 发布

阅读量749

点赞数

分类专栏：笔记博客文章标签： html5 html css css3

本文链接：https://blog.csdn.net/qq_43435403/article/details/107911302

版权

博客同时被 2 个专栏收录

61 篇文章 1 订阅

订阅专栏

笔记

21 篇文章 0 订阅

订阅专栏

css3选择器----属性匹配选择器

1、全匹配
2、开头匹配
3、结尾匹配
4、包含匹配

1、全匹配

首先我们来看以下代码，我们在页面上定义了四个输入框，但是他们的type是不一样的：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>css3选择器</title>
    
</head>
<body>
<input type="text">
<input type="password">
<input type="radio">
<input type="checkbox">
</body>
</html>

上面的代码，运行的结果如下图所示：在这里插入图片描述
接下来我们用全匹配的方式对样式进行改变：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>css3选择器</title>
    <style>
    /*这里表示的是：选中type为text的input框，改变他的长和宽*/
        input[type='text']{
            width: 100px;
            height: 100px;
        }
    </style>
</head>
<body>
<input type="text">
<input type="password">
<input type="radio">
<input type="checkbox">
</body>
</html>

上面的代码运行结果如图：可以看出，相比于上面没有给样式的图，加了样式的input框样式改变了
在这里插入图片描述

对于这种属性匹配选择器的优点是，可以不用id、class等选择器，而是通过我自己命名的进行选择并更改样式。比如以下代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>css3选择器</title>
    <style>
    /*这里表示，对wode="nihao"的div进行样式改变*/
        div[wode="nihao"]{
            width: 100px;
            height: 100px;
            background-color: red;
        }
    </style>
</head>
<body>
<div wode="nihao"></div>
</body>
</html>

下面是效果图：

在这里插入图片描述

2、开头匹配

开头匹配要用到的符号是：^

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>css3选择器</title>
    <style>
    /*这里表示wode里面开头是"n"的div*/
        div[wode ^="n"]{
            width: 100px;
            height: 100px;
            background-color: red;
        }
    </style>
</head>
<body>
<div wode="nihao"></div>
</body>
</html>

效果图
在这里插入图片描述

3、结尾匹配

结尾匹配用到的符号是：$

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>css3选择器</title>
    <style>
     /*这里表示wode结尾是"ao"的div*/
        div[wode $="ao"]{
            width: 100px;
            height: 100px;
            background-color: pink;
        }
    </style>
</head>
<body>
<div wode="nihao"></div>
</body>
</html>

在这里插入图片描述

4、包含匹配

包含用到的是：*

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>css3选择器</title>
    <style>
     /*这里表示wode里面包含"h"的div*/
        div[wode *="h"]{
            width: 100px;
            height: 100px;
            background-color: black;
        }
    </style>
</head>
<body>
<div wode="nihao"></div>
</body>
</html>