属性选择器:
根据元素的特定属性来选择元素
写法是 匹配器后面加 [属性]
input[type]
{
color: red;
}
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<style>
/*
找input里面具有type属性的
写法是 匹配器后面加 [属性]
*/
input[type]
{
color: red;
}
</style>
</head>
<body>
<input type="text" placeholder="请输入"/>
<input type="text" value="0000"/>
<input type="password"/>
<img src="./img/1.jpg" title="Hello World!" alt=""/>
</body>
</html>
根据多属性来匹配
input[type][placeholder]
{
color: red;
}
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<style>
/*根据多属性来匹配*/
input[type][placeholder]
{
color: red;
}
</style>
</head>
<body>
<input type="text" placeholder="请输入"/>
<input type="text" value="0000"/>
<input type="password"/>
<img src="./img/1.jpg" title="Hello World!" alt=""/>
</body>
</html>
根据属性值来匹配
input[type=password]
{
color: red;
}
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<style>
/*
根据属性值来匹配
*/
input[type=password]
{
color: red;
}
</style>
</head>
<body>
<input type="text" placeholder="请输入"/>
<input type="text" value="0000"/>
<input type="password"/>
<img src="./img/1.jpg" title="Hello World!" alt=""/>
</body>
</html>
属性选择器里面=号 有这么几种情况
~=
^=
$=
*=
~= :匹配该属性值 有完整的单词
img[title~=‘Hello’]
{
border: 10px solid red;
}
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<style>
/*
~= :匹配该属性值 有完整的单词
*/
img[title~='Hello']
{
border: 10px solid red;
}
</style>
</head>
<body>
<input type="text" placeholder="请输入"/>
<input type="text" value="0000"/>
<input type="password"/>
<img src="./img/1.jpg" title="Hello World!" alt=""/>
</body>
</html>
^= :匹配该属性值 以什么开头
img[title^=‘H’]
{
border: 10px solid red;
}
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<style>
/*
^= :匹配该属性值 以什么开头
*/
img[title^='H']
{
border: 10px solid red;
}
</style>
</head>
<body>
<input type="text" placeholder="请输入"/>
<input type="text" value="0000"/>
<input type="password"/>
<img src="./img/1.jpg" title="Hello World!" alt=""/>
</body>
</html>
$= :匹配该属性值 以什么结尾
img[title$='!']
{
border: 10px solid red;
}
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<style>
/*
$= :匹配该属性值 以什么结尾
*/
img[title$='!']
{
border: 10px solid red;
}
</style>
</head>
<body>
<input type="text" placeholder="请输入"/>
<input type="text" value="0000"/>
<input type="password"/>
<img src="./img/1.jpg" title="Hello World!" alt=""/>
</body>
</html>
*= :匹配该属性值 包含什么
img[title*='!']
{
border: 10px solid red;
}
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<style>
/* *= :匹配该属性值 包含什么*/
img[title*='!']
{
border: 10px solid red;
}
</style>
</head>
<body>
<input type="text" placeholder="请输入"/>
<input type="text" value="0000"/>
<input type="password"/>
<img src="./img/1.jpg" title="Hello World!" alt=""/>
</body>
</html>