介绍css选择器之前，首先让我们来认识一下css
css——层叠样式表，作为网页排版神器不断被web前端学者们推崇着。。。
为何这么叼！接下来就让我们来会会这个叼哥吧。。
1、CSS的特点
HTML 排版时的缺点:
设置麻烦,修改麻烦,功能严重不足.
CSS
样式排版的优点:
排版属性功能完整,排版文件可以独立存在,可以共用排版文件
CSS
样式排版的分类:
内联排版样式,内嵌式排版样式,外链排版
2、CSS的排版样式
行内排版样式:
格式:<标记名称
style=”属性 1:属性值 1;属性 2:属性值 2”>…</标记名称>
例:<p
style=”font-size:20pt;color:red;text-align:center”>排版样式</p>
内嵌排版样式：
内嵌式排版中所有的样式定义都必须在<style>..</style>之间,而<style>..</style>又
必须在<head>..</head>之间.
与其功能,又可以分为三种,
1.标记定义型
2.class 定义型
3.id 定义型
标记定义型格式:
<head>
<style
type=”text/css”>
标记名称{属性 1:属性值 1;属性 2:属性值 2;}
标记名称{属性 1:属性值 2;属性
2:属性值 2;}
</style>
</head>
<body>
<标记名称>…</标记名称>
</body>
class
定义型格式:
<head>
<style type=”text/css”>
.定义名称{属性
1:属性值 1;属性 2:属性值 2;}
.定义名称 1,.定义名称 2{属性 1:属性值 1;属性 2:属性值
2;}
</style>
</head>
<body>
<标记名称
class=”定义名称”>…</标记名称>
</body>
id
定义型格式:
<head>
<style>
#定义名称{属性 1:属性值 1;属性 2:属性值
2;}
#定义名称 1,#定义名称 2{属性 1:属性值 1;属性 2:属性值
2;}
</style>
</head>
<body>
<标记名称 id=”定义名称”>…</标记名称>
</body>
外部排版样式定义:
独立的样式排版:
标记名称{属性
1:属性值 1;属性 2:属性值 2;}
.定义名称{属性 1:属性值 1;属性 2:属性值
2;}
在<head>…</head>之间使用<link>
格式:
<head>
<link
rel=”stylesheet” type=”text/css” href=URL />
</head>
在<head>…</head>之间使用
import
格式：
<head>
<style type="text/css">
@import
"style.css"
</style>
</head>
介绍完CSS排版样式之后。。。。接下来就让我们来看看CSS中那些个强大的选择器吧
1、通配符选择器，也叫全体选择器——（作用于整个网页）
*{
font-size:13px;
font-family:"微软雅黑","华文楷体";
}
2、元素选择器
p,h1,h2,h3,a{
font-size:13px;
}
3、ID与类
选择器是用于控制页面设计的样式.即 ID 选择器和类选择器.
一直以来,许多开发人员经常将 ID
与类混淆,或者不能正确的使用这两种选择器,或者简
单的认为是一个代替另一个.这种认知是及其错误的.
(1).应用ID
每个 ID 在一个页面中只能使用一次,作为某个元素的唯一标识符.一般情况下,ID
只
用于页面的唯一元素,如页眉,主导航条,布局区块等.
示例:<p id=”hightlight”>This paragraph has
red text.</p>
相应的 CSS
代码:
#hightlight{
color:#FFFFFF;
}
(2).将 ID与选择器结合
/*适合所有 h2
标题*/
h2{
color:#333;
font-size:16px;
}
/*只适合 title 的 h2
标题*/
h2#title {
color:#eee;
}
相应的 XHTML 代码:<h2>Title Of My
Article</h2>
<h2 id=”title”>Title Of My Article</h2>
(3).ID的使用场合
对于每个
ID,每个页面只能有一个元素使用该样式,因此 ID 应该为每个页面唯一存
在并仅使用一次的元素不保留,
(4).避免使用
ID的场合
当一个以上的地方需要使用同一 CSS 规则时,不应该使用 ID.
(5).应用类
类可以无限次的使用,因此它是应用 CSS
的非常灵活的方法.
<p class=”hightlight”>his paragraph has red
text.</p>
相关 CSS 代码:
.hightlight
{
color:FFFFFF;
}
(6).结合多个类和 ID
范例:
<ul
id=”drinks”>
<li class=”mix”>Beer</li>
<li
class=”mix”>Spirtis</li>
<li
class=”hot”>Cola</li>
<li
class=”hot”>Lemonade</li>
</ul>
相应的 CSS 代码:
ul#drinks
{
color:FF6600;
}
.mix {
Color:#999999;
}
.hot
{
Color:#333333;
}
(7).利用类改写基本样式::
p{
Color:#ff6600;
}
.bleached
{
Color:#ccc;
}
相应的 XHTML 代码:
<p>This paragraph has red text.</p>
<p
class=”bleached”>This paragraph has red
text.</p>
(8).直接将类链接到元素上
p.bleached {
color:red;
}
相应的
XHTML 代码:
<p class=”bleached”>This paragraph has red
text.</p>
(9).避免,,适合
对于 class,如果多次重复使用或者使用子类选择器，那么就选择
class，如果是定义
唯一性的标记，比如布局，那么用 id。
4、 层叠
(1).外部链接实现层叠
<link
rel=”stylesheet” type=”text/css” href=”css/one.css”>
<link
rel=”stylesheet” type=”text/css” href=”css/two.css”>
<link
rel=”stylesheet” type=”text/css”
href=”css/three.css”>
(2).导入样式实现层叠
@import url(“one.css”)
@import
url(“two.css”)
@import
url(“three.css”)
注意点:必须牢记一个规则,越晚给的规则越重要.
5、 分组
h1{
Font-family:隶书,宋体,楷体;
Line-height:
140%;
Color:#333;
}
h2{
Font-family:隶书,宋体,楷体;
Line-height:
140%;
Color:#333;
}
h3{
Font-family:隶书,宋体,楷体;
Line-height:
140%;
Color:#333;
}
/*分组后*/
h1,h2.h3{
Font-family:隶书,宋体,楷体;
Line-height:
140%;
Color:#333;
}
/*分组例外*/
h1{
Font-style:italic;
}
6、 继承
h1
{
Color:#333;
}
<h1>This is thegreatest heading <i>in the
world</i></h1>
从 BODY 继承
Body
{
Margin:10px;
Font-family:隶书;
Background:#000;
Color:#fff;
}
7、 上下文选择器
h1{
Color:
#ccc;
}
I {
Color:#000;
}
/*使用上下文选择器*/
h1 I
{
Color:#000;
}
8、 子类选择器
.box {
color:red;
}
.box1
{
font-weight:bold;
}
.box2 {
font-style:italic;
}
<div
class="box">Box</div>
<div class="box
box1">Box1</div>
<div class="box
box2">Box2</div>
9、 其他选择器
(1).元素选择器
p{color:black;}
a{text-decoration:underline;}
h1{font-weight:bold;}
(2).后代选择器
h2
i{
color:red;
}
li a{
text-decoration:none;
}
#main
h1{
Color:red;
}
(3).伪类
a:link{color:blue;}
a:visited{color:green;}
a:hover,a:active{color:red;}
input:focus{background-color:yellow;}
(4).高级选择器
高级选择器,目前支持还不太完善,所以,对于站点功能很重要的任何元素上,应该避
免使用这些高级选择器.
10、子选择器和相邻同胞选择器
子选择器
#nav
> li {background:url(bg.gif) no-repeat left top;}
<ul
id="nav">
<li>Home</li>
<li>
<ul>
<li>Development</li>
<li>Consultancy</li>
</ul>
</li>
<li>Contact
Us</li>
</ul>
相邻同胞选择器:
h1+p{font-weight:bold;}
<h1>Main
Heading</h1>
<p>First Paragraph</p>
<p>Second
Paragraph</p>
11、属性选择器
<strong title=”Cascading Style
Sheets”>CSS</strong>
strong[title] {border-bottom: 1px dotted
#999;}
strong[title]:hover {cursor:help;background:#ccc}
12、针对列表项特别好用的两个伪类选择器：
ol li:first-child{
/*选中ol下面的第一个li*/
}
ol li:last-child{
/*选中ol下面的一最后一个li*/
}
CSS3选择器新特性
a[href$=‘.jsp‘]{
/*所有a标签中href属性为.jsp结尾的被选中*/
}
a[href^=‘asd]{
/*所有a标签中href属性为asd开头的被选中*/
}
a[href*=‘asd]{
/*所有a标签中href属性中包含asd的被选中*/
}
选择表中的行：
tr:nth-of-type(even){
background-color:red;
/*选中偶数行*/
}
tr:nth-of-type(odd){
background-color:red;
/*选中奇数行*/
}
tr:nth-of-child(n){
background-color:red;
/*选中所有行*/
}
暂时总结到这儿吧