All html elements are selectors(所有的html元素都是html)
前面课程给<h1>,<p>,<span>,<a>等元素定义成了CSS的selector,事实上,任何的html元素都可以定义成selector,可以是<table>,<ul>,甚至是<body>
例如,下面给整个body设置背景色
body {
background - color: #C6E2FF;
}
Multiple Selectors(多个选择器)
可以把一个html元素嵌套在另一个里面,例如,
<div>
<div>
<p>I like tacos!</p>
在这样的情况,CSS怎样给里面那个里面的<p>定义selector呢?
方法如下:
<span style="font-size:14px">
div div p { /*CSS stuff!*/ }
</span>
One selector to rule them all(全局选择器)
有一个非常特殊的selector,可以用来定义html所有的元素: * selector. 例如:
* {
border: 2px solid black;
}
将会给所有元素设置2像素的,实体的黑色边界.
Branching(分支)
你可以把一个html文件的元素看作是一颗树(如上图):元素从根节点<html></html>中分支出来,根节点的两个儿子节点是<head>和<body>,然后从这两个儿子节点中继续分支下去.
Parents, children, and siblings(父亲,儿子和兄弟)
如果把<html>标签看作是树的根节点,那么head和body可以看作是它的儿子,而head和body是兄弟节点.就像家族的家谱一样,元素节点有父亲,儿子和兄弟,
上面的嵌套的selector就是按照这种树形结构来设置的.
如果只想让某个元素的儿子应用某种格式,而不想让它儿子的儿子...也应用这种格式,那么可以用 > 符号.
例如:
<div>
<div>
<p> </p>
<div> <p> </div>
</div>
</div>
你只想让第3行的<p>设置某种格式,那么可以这样:
div div > p {
/* some css setting*/
}
那么对更里面的<p>将没有效果
来源: http://www.bianceng.cn/web/Html/201411/46559.htm