CSS选择器

最新推荐文章于 2024-07-17 10:09:06 发布

kosl90

最新推荐文章于 2024-07-17 10:09:06 发布

阅读量612

点赞数

分类专栏：其他文章标签： css xhtml html div

本文链接：https://blog.csdn.net/kosl90/article/details/6059419

版权

其他专栏收录该内容

7 篇文章 0 订阅

订阅专栏

我们这个学期学习了网站设计。。。当然这完全是一门可有可无的课（学生说不知道老师教了什么，老师太凶残了，尽然说自己都不知道教了什么。。。完全无语）。。。还好自己有看《head first html & xhtml with css》，这是一本非常不错的html入门书籍。。。在附录中看到了关于css的属性选择器，发现有一个讲的不是很清楚，于是上网查了查，发现属性选择器还是蛮有趣的，跟大家一起分享一下。。。大家可以把代码自己复制后打开看看。

1.ele[att] { ... }

对拥有att属性的ele元素设置css

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" > <head> <title>CSS选择器</title> <mce:style type="text/css"></mce:style><style type="text/css" mce_bogus="1">div { width: 300px; height: 300px; background: gray; } div[id] { background: red; }</style> </head> <body> <div id=""></div> <div></div> </body> </html>

2.ele[att="value"] { ... }

对拥有属性att并且值为value的ele元素设置css

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" > <head> <title>CSS选择器</title> <mce:style type="text/css"></mce:style><style type="text/css" mce_bogus="1">div { width: 300px; height: 300px; background: gray; } div[id="val"] { background: red; }</style> </head> <body> <div id="val"></div> <div id=""></div> </body> </html>

3.ele[att^="value"] { ... }

对拥有属性att并且值为以“value”开头的ele元素设置css

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" > <head> <title>CSS选择器</title> <mce:style type="text/css"></mce:style><style type="text/css" mce_bogus="1">div { width: 300px; height: 300px; background: gray; } div[id^="val"] { background: red; }</style> </head> <body> <div id="val"></div> <div id="nval"></div> </body> </html>

4.ele[att$="value"] { ... }

对拥有属性att并且值为以“value”结尾的ele元素设置css

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" > <head> <title>CSS选择器</title> <mce:style type="text/css"></mce:style><style type="text/css" mce_bogus="1">div { width: 300px; height: 300px; background: gray; } div[id$="val"] { background: red; }</style> </head> <body> <div id="val"></div> <div id="value"></div> </body> </html>

5.ele[att~="value"] { ... }

对拥有属性att并且值有空格间隔开其中包含“value”的ele元素设置css，例如“a b value”

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" > <head> <title>CSS选择器</title> <mce:style type="text/css"></mce:style><style type="text/css" mce_bogus="1">div { width: 300px; height: 300px; background: gray; } div[id~="val"] { background: red; }</style> </head> <body> <div id="val va vl"></div> <div id="va vl al"></div> </body> </html>

6.ele[att|="value"] { ... }

对拥有属性att并且值为以“value”开头并且由连字符链接的ele元素设置css

(多用于lang的设置)，例如(en,en-US,zh-CN,zh-TW)。

也可以视为以“value”或“value-”开头的ele元素

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" > <head> <title>CSS选择器</title> <mce:style type="text/css"></mce:style><style type="text/css" mce_bogus="1">div { width: 300px; height: 300px; background: gray; } div[id|="val"] { background: red; }</style> </head> <body> <div id="val-a"></div> <div id="valu-a"></div> </body> </html>

7.ele[att*="value"] { ... }

对拥有属性att并且只要值中拥有“value”的ele元素设置css

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" > <head> <title>CSS选择器</title> <mce:style type="text/css"></mce:style><style type="text/css" mce_bogus="1">div { width: 300px; height: 300px; background: gray; } div[id*="val"] { background: red; }</style> </head> <body> <div id="val"></div> <div id="nvalue"></div> </body> </html>

kosl90

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
CSS选择器

<br /> 我们这个学期学习了网站设计。。。当然这完全是一门可有可无的课（学生说不知道老师教了什么，老师太凶残了，尽然说自己都不知道教了什么。。。完全无语）。。。还好自己有看《head first html & xhtml with css》，这是一本非常不错的html入门书籍。。。在附录中看到了关于css的属性选择器，发现有一个讲的不是很清楚，于是上网查了查，发现属性选择器还是蛮有趣的，跟大家一起分享一下。。。大家可以把代码自己复制后打开看看。<br /> <br /> <br />1.ele
复制链接

扫一扫