先喝一杯~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"lang="en" xml:lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<meta name="generator" content="" />
<meta name="author" content="" />
<meta name="keywords" content="" />
<meta name="description" content="" />
<title>神奇的hover与相邻选择器</title>
<style type="text/css">
#one {width:100px;height:100px;border:1px solid #666;background:#ccc; }
.two {width:100px;height:100px;border:1px solid #333;background:#666;margin:10px; }
#one:hover + .two {background:#eee; }
</style>
</head>
<body>
<div id="one">one</div>
<div class="two">two</div>
<div class="two">two_three</div>
</body>
</html>
关于后代选择器~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"lang="en" xml:lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<meta name="generator" content="" />
<meta name="author" content="" />
<meta name="keywords" content="" />
<meta name="description" content="" />
<title></title>
<style type="text/css">
strong {color:silver; }
div em {color:lime; }
div a {color:orange; }
div p {color:pink; }
/*~~~~~~~~~~~~
误区一：以前误以为此处的div a的作用域为“div的直属a”，误以为它不会影响div内部的二级后代(孙元素);将它与“子元素选择器'>'”的概念混淆了；其实这个选择器的涵义是：作为div后代的所有a,无论是一级，二级，三级，，，
误区二：那么：选择器div em 与 div a 与 div p 这三者的权重值相等；然后依据覆盖原理，同一属性在相等权重值的选择器中重复声明时，以后出现的为尊；此处我将div p 置于最后；但是这里事实相反，，什么原因？难道是覆盖原理错了？NO，以此处的em 为例：div p{color:pink;}虽然能影响到 div>p>em;但这依靠的是继承，比不上div em 下达的直接指令强大； 总之一条：继承总是比不过直接声明；在继承面前，没有什么权重值之说了；
~~~~~~~~~~~~*/
</style>
</head>
<body>
<div>
<a href="#">direct link</a>
<p>paragraph
<em>emphasized</em>
<strong>stronger</strong>
<a href="#">indirect link</a>
</p>
</div>
</body>
</html>
关于链接~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"lang="en" xml:lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<meta name="generator" content="" />
<meta name="author" content="" />
<meta name="keywords" content="" />
<meta name="description" content="" />
<title>v_v链接的有效激活区</title>
<style type="text/css">
body {background:lightgreen; }
a {text-decoration:none; }
a.blocklink {display:block; background:pink; width:100px; height:50px; border:20px solid red; padding:20px; margin:50px; }
/*链接的有效点击范围包括content-padding-border;不包括margin*/
img.noborder {border:none; }
</style>
</head>
<body>
<img src="Lainka.jpg" width="20%" height="20%" />
<p>图片做成链接后，图片在IE中会自动生成一圈2px的边框，怎么去掉？我选择显式地给图片设置border:none;当然将边框颜色融入背景色也可以</p>
<a href="#">link<img src="Lainka.jpg" width="20%" height="20%" /></a>
<a href="#">link<img class="noborder" src="Lainka.jpg" width="20%" height="20%" /></a>
<p>当图片所在的a标签block后，此时的图片宽高百分值属性是相对于其父元素a 的计算；</p>
<a href="#" class="blocklink">link<img src="Lainka.jpg" width="20%" height="20%" /></a>
</body>
</html>
图标链接导航的小实验~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"lang="en" xml:lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<meta name="generator" content="" />
<meta name="author" content="" />
<meta name="keywords" content="" />
<meta name="description" content="" />
<title></title>
<style type="text/css">
td {background:#ACA; border:2px solid #797; padding:0px; text-align:center; vertical-align:top; }
td#apple a {margin:0px; display:block; }/*给图片加边框*/
td#apple a img {width:50px; height:50px; display:block; background:transparent; border:1px solid #ACA; border-width:5px 10px; }
td#apple a img#sun {border-color:#797; background:#797; }/*突出显示当前图标，由于这条选择器的权重值高，所以此后它无法应用hover的黄色背景*/
td#apple a:hover {background:yellow; }/*hover后，a背景与内部图片边框都得设置*/
td#apple a:hover img {border-color:yellow; }
td#apple a:active img {border-color:#FC0; border-style:inset; }/*~~Fail in IE6,8~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~*/
td#banana a {margin:0px; display:block; border:1px solid #ACA; border-width:5px 10px; }/*给作为父元素的a加边框*/
td#banana a img {width:50px; height:50px; display:block; background:transparent; border:none; }/*针对IE，需要清除链接图片的边框*/
td#banana a img#atom {background:#797; }
td#banana a:hover {background:yellow; border-color:yellow; }
td#banana a:active {border-color:#FC0; border-style:inset; }/*~~Fail in IE6,8~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~*/
td#cherry a {margin:0px; display:block; padding:5px 10px; }/*给作为父元素的a设置内边距*/
td#cherry a img {width:50px; height:50px; display:block; background:transparent; border:none; }/*清除边框*/
td#cherry a img#gas {background:#797; }
td#cherry a:hover {background:yellow; }
/*~~因为整个链接无边框属性，所以无法像前两种方式那样设置active的内嵌效果~~*/
/*~~~~~~~~~~~~~~~~~~~~~~~该页面里面的id都是置于图片中的，a元素中没有标示符，也许：我是说也许，这又将会有点儿变化吧~~~~~~~~~~~~~~~~~~~~~~~~~~*/
</style>
</head>
<body>
<table cellspacing="2">
<tr>
<td id="apple">
<a href="sun.html"><img src="sun.gif" alt="sun" id="sun" ></a>
<a href="gas.html"><img src="gas.gif" alt="gas" id="gas"></a>
<a href="atom.html"><img src="atom.gif" alt="atom" id="atom"></a>
</td>
<td id="banana">
<a href="sun.html"><img src="sun.gif" alt="sun" id="sun" ></a>
<a href="gas.html"><img src="gas.gif" alt="gas" id="gas"></a>
<a href="atom.html"><img src="atom.gif" alt="atom" id="atom"></a>
</td>
<td id="cherry">
<a href="sun.html"><img src="sun.gif" alt="sun" id="sun" ></a>
<a href="gas.html"><img src="gas.gif" alt="gas" id="gas"></a>
<a href="atom.html"><img src="atom.gif" alt="atom" id="atom"></a>
</td>
</tr>
</table>
</body>
</html>
