JZTXT

属性选择器

发布时间 2023-08-22 21:05:26作者: WangzaiTing

 作用: 选择属性中符合要求的元素

 

语法:  

  1. [属性名]: 选择具有某个属性的元素
  2. [属性名="值"]: 选择具有某个属性且属性值等于指定值的元素
  3. [属性名^="值"]: 选择具有某个属性且属性值是指定值开头的元素
  4. [属性名$="值"]: 选择具有某个属性且属性值是指定值结尾的元素
  5. [属性名*="值"]: 选择具有某个属性且属性值包含指定值的元素

 

举例:

/* 选择具有title属性的元素 */
 [title] {
color: red;
 }
/* 选择具有title属性且值是JAVA的元素 */
 [title="JAVA"] {
color: aqua;
 }
/* 选择具有title属性且值是J开头的元素 */
 [title^="J"] {
color: red;
 }
/* 选择具有title属性且值是L结尾的元素 */
 [title$="L"] {
color: red;
 }
/* 选择具有title属性且值包含S的元素 */
 [title*="L"] {
color: red;
 }