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

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

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>

在这里插入图片描述

©️2020 CSDN 皮肤主题: 创作都市 设计师:CSDN官方博客 返回首页