选择符 | 简介 |
---|
input[value] | 选择具有value属性的input元素 |
input[value="text"] | 选择具有value属性且type属性值等于text的input元素 |
input[value^="text"] | 选择具有value属性且值以text开头的input元素 |
input[value$="text"] | 选择具有value属性且值以text结尾的input元素 |
input[value*="text"] | 选择具有value属性且值中含有text的input元素 |
一、选择具有type属性的input元素
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
input[value] {
color: pink;
}
</style>
</head>
<body>
/*效果为所有输入框文字颜色为pink*/
<input value="text">
<input value="boss">
</body>
</html>
二、选择具有value属性且type属性值等于text的input元素
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
input[value="text"] {
color: pink;
}
</style>
</head>
<body>
/*效果为第一个输入框文字颜色为pink*/
<input value="text">
<input value="boss">
</body>
</html>
三、选择具有value属性且值以text开头的input元素
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
input[value^="text"] {
color: pink;
}
</style>
</head>
<body>
/*效果为第一个和第二个输入框文字颜色为pink*/
<input value="text">
<input value="text-boss">
<input value="boss">
</body>
</html>
四、选择具有value属性且值以text结尾的input元素
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
input[value$="text"] {
color: pink;
}
</style>
</head>
<body>
/*效果为第一个和第二个输入框文字颜色为pink*/
<input value="text">
<input value="boss-text">
<input value="boss">
</body>
</html>
五、选择具有value属性且值中含有text的input元素
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
input[value*="text"] {
color: pink;
}
</style>
</head>
<body>
/*效果为第一个、第二个和第三个输入框文字颜色为pink*/
<input value="text">
<input value="boss-text">
<input value="text-boss">
<input value="boss">
</body>
</html>