HTML/CSS中属性选择器

~废弃回忆 �༄2025-02-21 10:57

1.作用:选中属性值符合一定要求的元素.

2.语法:

1.[属性名] 选中具有某个属性的元素.

2.[属性名="值"] 选中包含某个属性,且属性值等于指定值的元素.

3.[属性名^="值"] 选中包含某个属性,且属性值已指定的值开头的元素.

4.[属性名$="值"] 选中包含某个属性,且属性值已指定的值结尾的元素.

5.[属性名*="值"] 选中包含某个属性,且属性值包含指定值的元素.

3.实例:

html 复制代码

 <style>

    /* 第一种写法:选中具有title属性的元素 */
    [title]
    {
        color: red;
    }
   /* 第二种写法:选中具有title属性的元素,并且属性值为atg的元素 */
   [title="atg"]
   {
    color: red;
   }
   /* 第三种写法:选中具有title属性,并且属性值以字母a开头的元素 */
   [title^="a"]
   {
    color: red;
   }

   /* 第四种写法 :选中具有title属性,并且属性值以字母u结尾的元素*/
   [title$="u"]
   {
    color: red;
   }

    /* 第五种写法 :选中具有title属性,并且属性值包含字母u的元素*/
   [title*="u"]
   {
    color: red;
   }
 </style>

html 复制代码

<body>

 <p title="atg">语文</p>
 <p title="atg">数学</p>
 <p title="gui">英语</p>
 <p title="gui">化学</p>
</body>