平时习惯用的一些选择器 ,整理出来,
/*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对网页的显示时才会用到它们。
*/