CSS 分组 和 嵌套 选择器
分组选择器
在样式表中有很多具有相同样式的元素,为了尽量减少代码,你可以使用分组选择器。每个选择器用逗号分隔。
实例
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>php中文网(php.cn)</title> <style> h1,h2,p { color:green; } </style> </head> <body> <h1> PHP中文网你</h1> <h2>php.cn</h2> <p>学习PHP知识的好选择.</p> </body> </html>
运行程序尝试一下
嵌套选择器
它可能适用于选择器内部的选择器的样式。
在下面的例子设置了三个样式:
为所有p元素指定一个样式为所有class="marked"的元素指定一个样式为所有class="marked"元素内的p元素指定一个样式
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>php中文网(php.cn)</title> <style> p { color:blue; text-align:center; } .marked { background-color:red; } .marked p { color:white; } </style> </head> <body> <p>褪尽风华,我依然在彼岸守护你</p> <div class="marked"> <p>那些繁华哀伤终成过往,</p> </div> <p>请不要失望,平凡是为了最美的荡气回肠。</p> </body> </html>
运行程序尝试一下