当前位置: 老葡京网站娱乐 > 网页设计 > Html教程 > 正文

HTML及CSS基础课(九) CSS Selectors

时间:2014-11-07

老葡京网站娱乐 www.sdguanhua.com 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>将没有效果