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>