700字范文 > css_属性选择器（根据属性名或属性值设定指定样式）

css_属性选择器（根据属性名或属性值设定指定样式）

时间：2023-04-18 21:09:43

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>求关注1求关注2求关注3求关注4 求关注5求关注6 求关注7</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>求关注1求关注2求关注3求关注4 求关注5求关注6 求关注7</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>求关注1求关注2求关注3求关注4 求关注5求关注6 求关注7</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>求关注1求关注2求关注3求关注4 求关注5求关注6 求关注7</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>求关注1求关注2求关注3求关注4 求关注5求关注6 求关注7</body></html>

本内容不代表本网观点和政治立场，如有侵犯你的权益请联系我们处理。

网友评论

网友评论仅供其表达个人看法，并不表明网站立场。