关于css选择器的那些事-css教程-PHP中文网

介绍css选择器之前，首先让我们来认识一下css

css——层叠样式表，作为网页排版神器不断被web前端学者们推崇着。。。

接下来就让我们来会会这个吧。。

1、CSS的特点　　

HTML 排版时的缺点: 　　

设置麻烦,修改麻烦,功能严重不足. 　　

CSS 样式排版的优点: 　　

排版属性功能完整,排版文件可以独立存在,可以共用排版文件　　

CSS 样式排版的分类: 　　

内联排版样式,内嵌式排版样式,外链排版

2、CSS的排版样式

行内排版样式:

格式: <标记名称 style="”属性" 1:属性值 1;属性 2:属性值 2”> …

例:

排版样式

内嵌排版样式：

内嵌式排版中所有的样式定义都必须在之间,而又必须在..

之间.

与其功能,又可以分为三种,

1.标记定义型

2.class 定义型

3.id 定义型

标记定义型格式:

 　　 
  　　<标记名称>…  class 定义型格式:  　　 
  　　 　　<标记名称 class=”定义名称”>…  id 定义型格式:  　　 
  　　 　　<标记名称 id=”定义名称”>…  外部排版样式定义: 独立的样式排版: 　　 标记名称{属性 1:属性值 1;属性 2:属性值 2;} 　　 .定义名称{属性 1:属性值 1;属性 2:属性值 2;} 在…
之间使用 格式:  　　 　　 
 在…
之间使用 import 格式：

登录后复制

介绍完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 只用于页面的唯一元素,如页眉,主导航条,布局区块等.

示例:

This paragraph has red text.

相应的 CSS 代码:

#hightlight{ color:#FFFFFF; }

(2).将 ID与选择器结合

/*适合所有 h2 标题*/

h2{ color:#333; font-size:16px; }

/*只适合 title 的 h2 标题*/

h2#title { color:#eee; }

相应的 HTML 代码:

Title Of My Article
 Title Of My Article

登录后复制

(3).ID的使用场合

对于每个 ID,每个页面只能有一个元素使用该样式,因此 ID 应该为每个页面唯一存在并仅使用一次的元素不保留,

(4).避免使用 ID的场合当一个以上的地方需要使用同一 CSS 规则时,不应该使用 ID.

(5).应用类类可以无限次的使用,因此它是应用 CSS 的非常灵活的方法.

his paragraph has red text.

相关 CSS 代码:

.hightlight {color:FFFFFF; }

登录后复制

(6).结合多个类和 ID 范例:

 　　Beer
 　　Spirtis
 　　Cola
 　　Lemonade

登录后复制

相应的 CSS 代码:

ul#drinks { color:FF6600; } .mix { Color:#999999; } .hot { Color:#333333; } (7).利用类改写基本样式: p{Color:#ff6600; } .bleached {Color:#ccc; }

登录后复制

相应的 HTML 代码:

This paragraph has red text.

登录后复制

(8).直接将类链接到元素上

p.bleached {color:red; }

相应的 HTML 代码:

This paragraph has red text.

登录后复制

(9).对于 class,如果多次重复使用或者使用子类选择器，那么就选择 class，如果是定义唯一性的标记，比如布局，那么用 id。

4、层叠

(1).外部链接实现层叠

(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; } This is thegreatest heading in the world
 从 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; } Box
 Box1
 Box2

登录后复制

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; }  　　 　　Home
 　　 　　 　　　　 　　　　　　 　　　　　　Development
 　　　　　　 　　　　　　Consultancy
 　　　　 　　　　
 　　 　　
 　　Contact Us

登录后复制

相邻同胞选择器:

h1+p{font-weight:bold;} Main Heading
 First Paragraph
 Second Paragraph

登录后复制

11、属性选择器

CSS 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; 　　/*选中所有行*/ }

登录后复制