具有特定属性的HTML元素样式

具有特定属性的HTML元素样式不仅仅是class和id

  • 属性选择器
    ** [属性]{
    样式:值;
    }**
    例如:把包含标题(title)的所有元素变为蓝色

CSS属性选择器、及~=,|=,^=,$=,*=的区别
CSS属性选择器、及~=,|=,^=,$=,*=的区别

  • 属性和值选择器
    ** [属性=值]{
    样式:值;
    }**
    例如:改变标题title='runoob’元素的边框样式
    CSS属性选择器、及~=,|=,^=,$=,*=的区别
    CSS属性选择器、及~=,|=,^=,$=,*=的区别
  • 属性和值的选择器-多值
    [属性~=值]{
    样式:值;
    }

    指定title属性的元素样式 使用(~)分隔属性和值
    CSS属性选择器、及~=,|=,^=,$=,*=的区别
    CSS属性选择器、及~=,|=,^=,$=,*=的区别
  • 表单样式
    属性选择器样式无需使用class或id的形式
    CSS属性选择器、及~=,|=,^=,$=,*=的区别
    CSS属性选择器、及~=,|=,^=,$=,*=的区别

~=,|=,^=,$=,*=的区别

*“值是完整单词” 类型的比较符号: ~=, |=
“拼接字符串” 类型的比较符号: =, ^=, $=

  • 1.attribute 属性中包含 value:

    [attribute~=value] 属性中包含独立的单词为 value,例如:

    [title~=flower] --> CSS属性选择器、及~=,|=,^=,$=,*=的区别

  • 2.attribute 属性以 value 开头:

    [attribute|=value] 属性中必须是完整且唯一的单词,或者以 - 分隔开:,例如:

    [lang|=en] -->

    [attribute^=value] 属性的前几个字母是 value 就可以,例如:

    [lang^=en] -->

  • 3.attribute 属性以 value 结尾:

    [attribute$=value] 属性的后几个字母是 value 就可以,例如:

    a[src$=".pdf"]

相关文章: