1.[属性名] 选择含有指定属性的元素
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>p[title]{color:red;}</style></head><body><p title="hello">求关注1</p><p title="helloWord">求关注2</p><p title="hiHello">求关注3</p><p>求关注4</p> <p>求关注5</p><p>求关注6</p> <p>求关注7</p></body></html>
2.[属性名=属性值] 选择含有指定属性和属性值的元素
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>p[title=hello]{color:red;}</style></head><body><p title="hello">求关注1</p><p title="helloWord">求关注2</p><p title="hiHello">求关注3</p><p title="hi">求关注4</p> <p>求关注5</p><p>求关注6</p> <p>求关注7</p></body></html>
3.[属性名^=属性值] 选择属性以指定值开头的元素
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>p[title^=hello]{color:red;}</style></head><body><p title="hello">求关注1</p><p title="helloWord">求关注2</p><p title="hiHello">求关注3</p><p title="hi">求关注4</p> <p>求关注5</p><p>求关注6</p> <p>求关注7</p></body></html>
4.[属性名$=属性值] 选择属性值以指定值结尾的元素
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>p[title $= hello]{color:red;}</style></head><body><p title="hello">求关注1</p><p title="helloWord">求关注2</p><p title="hihello">求关注3</p><p title="hi">求关注4</p> <p>求关注5</p><p>求关注6</p> <p>求关注7</p></body></html>
5.[属性名*=属性值] 选择属性值中含有某元素的元素
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>p[title *= hello]{color:red;}</style></head><body><p title="hello">求关注1</p><p title="helloWord">求关注2</p><p title="hihello">求关注3</p><p title="hi">求关注4</p> <p>求关注5</p><p>求关注6</p> <p>求关注7</p></body></html>