CSS基础篇之选择符
关系选择符
E F 包含选择符(Descendant combinator) CSS1 选择所有被E元素包含的F元素。
<html> <head> <meta charset="utf-8" /> <title></title> <style type="text/css"> P b{ font-size: 60px; font-family: "微软雅黑"; color: red; } </style> </head> <body> <p> <b>dd</b> <b>dd</b> <b>dd</b> <b>dd</b> <b>dd</b> </p> </body> </html>
这里我调节h1元素内的所有P元素的字体大小为19像素。
用包含选择符时可以适用子元素里面全部包括子元素里面孙子元素都会有。
E>F 子选择符(Child combinator) CSS2 选择所有作为E元素的子元素F。
<html> <head> <meta charset="UTF-8"> <title></title> <style type="text/css"> /* none 无 */ .nav > li { list-style: none; } </style> </head> <body> <ul class="nav"> <li> <a href="">菜单项1</a> <ul> <li>AAA</li> <li>BBB</li> <li>CCC</li> </ul> </li> <li> <a href="">菜单项2</a> <ul> <li>AAA</li> <li>BBB</li> <li>CCC</li> </ul> </li> <li> <a href="">菜单项3</a> </li> <li> <a href="">菜单项4</a> </li> <li> <a href="">菜单项5</a> </li> </ul> </body> </html>
<html> <head> <meta charset="UTF-8"> <title></title> <style type="text/css"> /* none 无 */ .nav > li { list-style: none; } </style> </head> <body> <ul class="nav"> <li> <a href="">菜单项1</a> <ul> <li>AAA</li> <li>BBB</li> <li>CCC</li> </ul> </li> <li> <a href="">菜单项2</a> <ul> <li>AAA</li> <li>BBB</li> <li>CCC</li> </ul> </li> <li> <a href="">菜单项3</a> </li> <li> <a href="">菜单项4</a> </li> <li> <a href="">菜单项5</a> </li> </ul> </body> </html>
这里调节了最外部的ul删除了前面的实心圆但是li标签里面的ul没有收到影响。
选用子选择符F元素只能是第一个子元素里有效在孙子元素里没用。
E+F 相邻选择符(Adjacent sibling combinator) CSS2 选择紧贴在E元素之后F元素。
<html> <head> <meta charset="UTF-8"> <title></title> <style type="text/css"> h3 + small { color: red; } </style> </head> <body> <h3>这是h3标题</h3> <small>这是小标题</small> <p>这是内容...</p> <p>这是内容...</p> <h3>这是h3标题</h3> <small>这是小标题</small> <p>这是内容...</p> <p>这是内容...</p> <div> <small>我是div里面的small</small> </div> </body> </html>
这里我调节了h3标签后面的small标签的颜色但是P标签没有影响。+号就是他们在上下关系中间不能间隔。建立相邻选择符时要在统一个父标签内。
E~F 兄弟选择符(General sibling combinator) CSS3 选择E元素所有兄弟元素F。
<html> <head> <meta charset="UTF-8"> <title></title> <style type="text/css"> h3 ~ small { color: red; } </style> </head> <body> <h3>这是h3标题</h3> <small>这是小标题</small> <p>这是内容...</p> <p>这是内容...</p> <h3>这是h3标题</h3> <small>这是小标题</small> <p>这是内容...</p> <p>这是内容...</p> <div> <small>我是div里面的small</small> </div> </body> </html>
这里选择的是h3的所有的兄弟标签small但是div标签内的small没有改变。你也可以把h3~p也是可以的。Small里面是没有变化。这个可以间隔。建立兄弟选择符时要在统一个父标签内。
Id和class
id 选择器可以为标有特定 id 的 HTML 元素指定特定的样式。
id 选择器以 "#" 来定义。
Id的属性值只能页面内存在一个，就像自己的身份证一样。
<h3 id="p1"> 这是一个段落 </p>
#h31 { font-size:12px; font-weight:bold; }
class选择符
<p class="p1"> 这是一个段落 </p> .p1 { font-size:12px; font-weight:bold; }
在网页中，每个id名称中只能使用一次，不得重复。
与id 不同，class 允许重复使用。比如页面中的多个元素，都可以使用同一个样式定义。
a:link { color: white; } a:visited { color: white; } a:hover { background: #c9e4ec; } a:active { background: #c9e4ec; }
这四个属性是在一起的而且顺序不能变按照上面一样可以设置字体颜色、样式、大小、背景颜色等...
持续更新。。。
