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