先看一段简单的html代码:
<html><head><title>test
title>
<style>
div p{
color:red;}
.son{
color:blue;}
style>head><body> <div class="father"> <p>TEST
p> <p class="son">测试文字
p> div>body>html>
执行后内容的颜色分别是什么?
现在再来看一段代码,下面这段代码就是把div p样式改成了.father p,代码如下
<html><head><title>test
title>
<style>
.father p{
color:red;}
.son{
color:blue;}
style>head><body> <div class="father"> <p>TEST
p> <p class="son">测试文字
p> div>body>html>
执行后内容的颜色又分别是什么?
如果我们在这把上面div里面的class换成id,代码如下:
<html><head><title>test
title>
<style>
#father p{
color:red;}
.son{
color:blue;}
style>head><body> <div id="father"> <p>TEST
p> <p class="son">测试文字
p> div>body>html>
执行后内容的颜色又分别是什么?
小结:以上变化可以看出“测试文字”的颜色变化不是由于它最近的son样式决定,也不是由子选择器决定,是由两者共同决定的,其实还可以有变化,就是测试子选择器里面的p换成p里面的class,div用id或者div进行变化;
css优先级规则:行内样式>id样式>类别样式>标记样式
变化规则我总结下基本上是:如果子选择器(即上面第一个样式“红色”那个)两部分 (父 子)中父或者子“任意一个”用的是高于测试文字最近的直接选择(即上面的第二个样式),那么测试文字都是由子选择器(第一个样式)决定,否则就是由第二个
阅读(508) | 评论(0) | 转发(0) |