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 {}
