关于CSS实战，选择器

平时习惯用的一些选择器 ，整理出来，

 

/*ID选择器*/
#banner{
 background:#cc0000;
 height:300px;
 width:720px;
}
p.intro a{color:red;}
/*请将该样式应用给应用了intro类的段落（p）所派生的每个
链接a,注意在p和.intro之间没有空格 。这是在告诉css,这个
intro类必须专用于这个<p>标签(<p class="intro">)才有效。
*/

p .intro a{color:yellow;}
/*
以.intro类定义了样式的任何标签内部选择一个<a>标签，
它本身也是<p>标签的派生标签。

*/
/**/
p.tip:before{
content:"HOT TIP!";
}

li:first-child{
font-weight:bold;
}

input:focus{
background-color:#ffffcc;
}

/*构建群选择器*/
h1,h2,h3,h4,h5,h6{
color:#f1cd33;
}
h1,p,.copyright,#banner{
color:#f1cd33;
}

/*通用选择器*/
*{
font-weight:bold;
}

/*创建派生选择器*/
h1 strong{
color:red;
}
li a{
font-family:Arial;
}

/*伪类Pseudo-Class和伪元素Pseudo-Element*/
/*给链接定义样式*/
a:link{}
a:visited{}
a:hover{}
a:active{}

/*给段落定义样式*/
.top:first-letter{}/*可以创建下落的首字母*/
.top:first-line{}/*可以用一种不同的颜色定义段落的首行*/

.top:after{}/*伪元素:after也会添加创造内容，但它是加在元素的后面，而不是前面。*/
li:first-child{}/*伪元素都能让你只选择和格式化该元素的第一个子标签*/

input:focus{background-color:#ffffcc;}
/*选择器只适用于元素处于焦点的时候*/

/*高级选择器*/
/*子选择器*/
div>h2{
color:#333;
}
/*选择div中包含的h2标签*/

ul.mainList>li>ul>li{
display:block;
}
/*选择网页上所有无序列表的项目——内嵌项目和所有项目*/
/*在HTML中，紧挨另一个标签之后出现的标签被称作邻近同胞标签*/
img + p{}/*邻近同胞选择器用加号+ 把一个元素和下一个元素连接起来。因此为了选择每个img标签后面的每个段落，就要用这个选择器:img + p ,其中空格是可选的，因此img+p也可以。*/

img[title]/*属性选择器，CSS提供了一种根据其所具备的属性给标签设置样式的方法。*/
.photo[title]/*将选择每一个带有.photo类样式和HTML的title属性的元素。*/

a[href=http://www.yiping168.com]{
color:red;
font-weight:bold;
}
/*选择表单中的文本框时，要使用这个选择器*/
input[type="text"]{

}

/*假设你想创建一种特殊的样式来突显外部链接（指向网站外部的链接），表示
“嗨！如果你点击这里将会离开本网站。”假设你不想用绝对链接指向自有网站上
的任何网页，可以假设外部链接是以http://（这是所有绝对链接的第一部分）开头。
如果是这种情况，选择器就得像这样：
^=表示“以...开始”
*/
a[href^="http://"]{}
/*
$=表示“以...结尾”
*/
a[href$=".pdf"]{
 background-image:url(doc_icon.png) no-repeat;
 padding-left:15px;
}

[a href$=".doc"]
/*用选择器给指向word档的链接设置格式*/

[a href&=".mov"]
/*用选择器给指向电影档的链接设置格式*/

/*给你这些照片命名时都用上了"headshot"一词，如
mcfarland_headshot.png、mcord_headshot.jpg、
headshot_albert.jpg，等等.这些文件名中都有
"headshot"一词，因此用来插入每张图片的<img>
标签的src属性也包含"headshot"。你可以创建一个
专用于那些图片的选择器。
*/
img[src*="headshot"]
/*代码解读：请选择src属性中带有"headshot"
一词的所有图片。这是一种专门格式化那些图片的既简单
又优雅的方法，但IE6不支持属性选择器。因此只有在所
缺样式不会严重影响IE6对网页的显示时才会用到它们。

*/