css选择器权重及伪类选择器的使用
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title><style> /*权重为0 0 1*/ h1{ color: yellow; } /*此时h1标签显示为黄色*/ /*权重为0 1 1*/ h1.title{ color:red; } /*此时h1标签内容显示为红色*/ /*权重为1 0 0*/ h1.title#title{ color: blue; } /*此时h1标签内容显示为蓝色*//* 提升权重 *//* 权重为 1 1 2 */ body > h1.title#title{ color: pink; } /*此时h1标签内容显示为粉色*/ /* 伪类使用方法 */ .list>.item:first-of-type{ color: red; } /*使ul下面的第一个li标签内容显示为红色*/ .list>.item:last-of-type{ color: red; } /*使ul下面的最后一个li标签内容显示为红色*/ .list>.item:nth-of-type(n+3){ color: blue; } /*使ul下面的从第三个标签开始后面的li标签的内容变为蓝色*/ .list>.item:nth-of-type(-n+3){ color: pink; } /*使ul下面的从第三个标签开始前面的li标签的内容变为蓝色*/</style></head><body> <h1 class="title" id="title">权重权重权重</h1> <ul class="list"> <li class="item">内容</li> <li class="item">内容</li> <li class="item">内容</li> <li class="item">内容</li> <li class="item">内容</li> <li class="item">内容</li> <li class="item">内容</li> <li class="item">内容</li> </ul></body></html>
