mojoportal學習——文章翻譯之瞭解CSS

翻譯的不好 大家見諒

 

CSS  選取器

學習2件事

CSS很容易，重複幾遍，直到這種概念深入人心。這篇文章將對你很有協助。

CSS中最重要的兩點是：選取器 、規則。

選取器用來選擇你需要風格化的對象，大括弧中是具體的規則，規則在選取器之後，如下：

p { border:solid thin black; }

元素選取器：

p { border:solid thin black; }   //選擇所有段落

input[type=text] { border:solid thin black; }  //把所有的文字框加上邊框

input[type=select] { border:solid thin black; }  //把所有的下拉式功能表加上邊框

 

div div input[type=text] { border:solid thin black; }  //選擇指定位置情況下的文字框

body {} - 所有的body元素

div {} - 所有的層元素

h1 {} - 所有的h1元素.比如

div h2 {} - 在某個層中的所有h2元素.

》》》》》Class and ID Selectors  類和ID選取器

這兩種選取器是最常用的選取器。

比如，我有一個層，如下：

<div class="productwrapper">
some additional markup about a product goes here
</div>

.productwrapper { border:solid thin black; }  //指定具有productwrapper類名 的層的風格化

ID選取器應用於某個對象 很相似

<div id="divMyProduct">
some additional markup about a product goes here
</div>

 
#divMyProduct { border:solid thin black; }

在mojoportal和其他內容管理系統中，我們一般不實用ID選取器，因為ID由系統隨即產生。

我們在layout.master中可以實用ID選取器，其他的地方就不推薦使用了。下面不在討論ID選取器，只圍繞

類別選取器討論

》》》》》你可以應用多個類到一個元素上

例子：

<div class="panelwrapper survey">
some additional markup produced by the Survey features goes here
</div>

這個類有2個類名 ，以空格間隔。

.panelwrapper { border: solid thin black; }
.survey { color: red; }

這兩個風格都將被應用到上個div上。

在mojoportal中，我們多處使用了多類名CSS,如果在頁面上載入survey控制項，div類名可以是 panelwrapper survery

如果頁面載入htmlContent控制項，div類名可以是 panelwrapper htmlmodule .這意味著我們可以使用.panelwrapper選取器來應用相同的風格，

另外一部分使用不同的CSS風格。

.settingrow input[type=text] { width:300px;}

使得所有的textbox中有CSS 類名為settingrow的，寬度為300px.

如果我們想要設定的更具體一下，我們發現層的類名為 class="panelwrapper survey"

所以我們做了一個更具體的設定，如下：

.survey .settingrow input[type=text] { width:300px;}

現在，我們的設定只對survey模組起作用。

類別選取器並不關心元素的種類。

div.cool{}  //類名為cool的層元素

p.cool{}  //類名為cool的段落元素

div.cool p{} 類名為cool的層中的段落元素

div.cool  p.cool a{}  //類名為cool的層中，且類名為cool的段落中的超級串連

div.cool p.cool span a{}  //類名為cool的層中，且類名為cool的段落中,且在span中的超級串連

》》》》》Descendant 選取器

li ul {}  //包含在li中的所有ul

ul ul {} //包含在ul中的所有ul

ul li ul li a{}  //li元素中的串連

只要包含在其中即可 不論是否還包含在其他元素中。

》》》》》Attribute Selectors 屬性選取器

p[class=cool] {}

等同於:

p.cool {}

a[title] { color:green; }   //擁有title的超連結的顏色設定為green

a[href="http://www.mojoportal.com"] { font-size: larger; }  //具體串連的字型

》》》》》Selecting Children 選擇子集

 div >a{}
 如果只是選擇div下的所有串連，而不論他們是否包含在其他的嵌套元素中，那麼可以使用
 
 div a{} ,如果想要設定div 下直接包含的串連，中間沒有任何串連，那麼寫成div >a {}
 
 
 》》》》》Selecting Adjacent Sibling Elements
 
 h2+p{margin-top:2px;}
 
 只選擇在h2元素右邊的段落元素（即段落元素左邊存在h2元素 ）
 
 》》》》》Pseudo 類別選取器
 
 ：focus{}  所有擁有焦點的元素
 
 :hove{}  滑鼠經過的元素
 
 舉例：

 a:link { color: #6297BC; }
a:visited { color: #6297BC; }
a:hover { color: #72A545; }
a:active { color: #6297BC; }

 》》》》》應用相同的規則到超過一個的選取器上。
 
 h1, h2, h3 {color: green;}
 
 div.cool ul a, .verycool p a {}