基本的选择器有以下几种:
p{color:red}
.myclass{color:red}
#myid{color:red}
如果多个选择器的样式规则都是一样的,你可以这样写:
p, .myclass, #myid {color:red}
<body>
<h1 class="myclass">这是开心的一级标题</h1>
<p>这是一个有趣的段落</p>
<h2 id="myid">这是调皮的二级标题</h2>
</body>
p{color:red}
.myclass{color:blue}
#myid{color:green}
使用伪类选择器可以定义标记在不同状态下的样式。
比如,与<a>标记相关的一系列伪类可用来控制链接的不同状态
<p><a href="#">这是一个带链接的例句。</a></p>
a:link{color:#ff0000} /*未访问的链接*/
a:visited{color:#00ff00} /*已访问的链接*/
a:hover{color:#ff00ff} /*当鼠标悬停在链接上*/
a:active{color:#0000ff} /*当鼠标按住链接不松手*/
:first-child, :last-child和:nth-child可以被用来定位一组同类兄弟元素中特定序列位置的元素。
<ul>
<li>列表1</li>
<li>列表2</li>
<li>列表3</li>
<li>列表4</li>
<li>列表5</li>
</ul>
li:first-child{color:blue} /*同一组li中的第一个*/
li:last-child{color:green} /*同一组li中的最后一个*/
li:nth-child(2n){color:red} /*同一组li中的第偶数个*/
所谓派生选择器,就是将几种选择器综合到一起使用,比如
选择所有具有class=“classname” 属性的P标记:
p.classname {...}
选择所有嵌套在具有id=“idname”属性标记内的标记
#idname p {...}
选择所有嵌套在 div标记内部的P标记
div p {...}
选择所有嵌套在 div标记内部的p标记,且p必须是div的直接子元素
div > p {...}
选择所有嵌套在class="class1"标记中的class="class2"标记
.class1 .class2 {...}
更多选择器的用法,请参考:
http://www.w3schools.com/cssref/css_selectors.asp
父级别标记的CSS样式有时会被子级别继承(如果该样式对子元素有意义的话),比如有这样一段HTML和CSS:
<p>一个段落中的<span>文字</span></p>
p{color:red}
上面整个行文本都会是红色,因为作为子元素的span继承了p的样式。
有时候,大量的CSS定义会互相冲突,那么到底浏览器会按照什么样的规则来渲染呢?考虑下面这个例子:
<p>一个段落中<span class="s">红色</span>的文本</p>
span{color:red}
.s{color:green}
“高级”选择器定义的样式规则会覆盖“低级”选择器定义的样式规则,优先级由低到高排列如下:
这么复杂?这怎么知道哪个样式规则会覆盖(或被覆盖)?找Chrome帮忙吧!
将下列HTML代码定义成上图所示样式,不得改变HTML结构,应该怎样写CSS?
<p>这是一个<span>红色</span>的例句。</p>
<p class="p">这是一个<span>绿色</span>的例句。</p>
<p class="p">这是一个<span class="s">紫色</span>的例句。</p>
<p id="p4">这是一个<span>粉色</span>的例句。</p>