元素属性选择器

赤焰狂魔&莫小贝

已于 2023-02-01 21:24:52 修改

阅读量79

点赞数

文章标签：前端 css html

于 2023-02-01 21:22:40 首次发布

本文链接：https://blog.csdn.net/weixin_38945490/article/details/128840766

版权

属性选择器：
根据元素的特定属性来选择元素

写法是匹配器后面加 [属性]
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>