css选择器

我们分别来看下这些选择器：
• 3：ID选择器 • ID选择器和类选择器相似，不同的是，ID选择器不能复用。 在一个XHTML文档中，一个ID选择器只能把其CSS样式指定 给一个标签。 • <div id="test">测试代码</div> • #test {color:red;border:1px blue solid;} • 有 ID 的 HTML元素可以被JavaScript来操纵.再就是ID也 是后台开发人员会经常用的，所以前端开发人员应该尽量 少的使用。 •4.全局选择器 •全局选择器是一个星号。它能作用于XHTML文档中的所有元素。 •*{margin:0; padding:0;}
CSS选择器种类及介绍
兼容性问题：
• * { margin:0; padding:0; list-style:none; font-size:14px • } • .center { display:inline-block; zoom:1; *display:inline; verticalalign:middle; text-align:center; padding:0px; • }
我们分别来看下这些选择器：
• 5.组合选择器 • 标签选择器、类选择器和ID选择器是可以组合起来使用的。一般的组合 方式是标签选择器和类选择器组合，标签选择器和ID选择器组合。由于 这两种组合方式的原理和效果一样，所以只介绍标签选择器和类选择器 的组合。组合选择器只是一种组合形式，并不算是一种真正的选择器， 但在实际中经常使用。 • 比如 .orderlist li {xxxx} 或者 .tableset td {} • 我们使用的时候一般用在重复出现并且样式相同的一些标签里，比如 li td dd等。 • 比如 <h1 class="red"></h1> H1.red {color: red} • 群组选择器 • .test1,span,test2 {border:1px blue solid;} • div,span,img {border:1px blue solid;} • 群组选择器实际上是对CSS的一种简化写法，只不过把有相同定义的不 同选择器放在一起，省了很多代码。
选择器种类：
• • • • • 1.标签选择器（如：body,div,p,ul,li） 2.类选择器（如：class="head",class="head_logo"） 3.ID选择器（如：id="name",id="name_txt"） 4.全局选择器（如：*号） 5.组合选择器（如：.head .head_logo,注意两选择器用空 格键分开） • 6.继承选择器（如：div p,注意两选择器用空格键分开） • 7.伪类选择器（如：就是链接样式,a元素的伪类，4种不同 的状态：link、visited、active、hover。）
第一个*表示选择器类型为全局选择器 ，它能作用于整个 第一个 表示选择器类型为全局选择器 它能作用于整个HTML文档中的 文档中的 所有元素。其实我们习惯将所有的常用属性都定义在body中，但是有一 所有元素。其实我们习惯将所有的常用属性都定义在 中 些是不被识别的。 些是不被识别的。 第二个*表示对浏览器的区分 主要是控制不兼容性。 表示对浏览器的区分， 第二个 表示对浏览器的区分，主要是控制不兼容性。 1、“\9” 例:“border:1px \9;”。这里的“\9”可以区别所有 和FireFox 可以区别所有IE和 、 。这里的“ 可以区别所有 ； 2、“\0”IE8能识别，IE6、IE7不能； 能识别， 、 不能 不能； 、 能识别 3、“*”IE6、IE7可以识别；IE8、FireFox不能； 可以识别； 、 不能； 、 ” 、 可以识别 不能 4、“_” IE6可以识别、“_”,IE7、IE8、FireFox不能； 可以识别、 不能； 、 可以识别 、 、 不能 5、 FF不能识别 ，但能识别 不能识别*， 、 不能识别 但能识别!important。 。
我们分别来看下这些选择器：
• 6.继承选择器 • 学习使用继承选择器就必须先了解文档树和CSS的继承。每个XHTML都可 以被看作一个文档树，文档树的根部就是html标签，而head和body标签 就是其子元素。在head和body里的其他标签就是html标签的孙子元素。 整个XHTML就呈现一种祖先和子孙的树状关系。CSS的继承是指子孙元素 继承祖先元素的某些属性。以下通过实例来详细讲解这两个重要的CSS 概念。 • 文档树 CSS的继承 继承选择器 • <div class="test"> • <span><img src="xxx" alt="示例图片"/></span> • </div> • .test span img {border:1px blue solid;} • div span img {border:1px blue solid;} • 后代选择器实际上是使用：多个选择器加上中间的空格来找到具体的要 控制标签；从左往右，依次细化，最后锁定要控制的标签，如上例，先 找到class为test的标签，再从他的子标签里查找span标签，再从span 的子标签中找到IMG标签。
我们分别来看下这些选择器：
• 1：标签名选择器 • 一个XHTML文档中有许多标签，例如p标签，h1标签等。若 要使文档中的所有p标签都使用同一个CSS样式，就应使用 标签选择器。 • div {color:red;border:1px blue solid;} • p {color:#000;} • 2：类选择器 • 使用标签选择器可以为整个XHTML文档中的同一个标签指定 相同的CSS样式。但是在实际运用中，XHTML文档中的同一个标 签会被反复使用。若要为相同的标签赋予不同的CSS样式就应 使用类选择器。 • <div class="test">测试代码</div> • .test {color:red;border:1px blue solid;}
我们分别来看下这些选择器：
• • • • • • • • • • • • 7.伪类选择器 锚(a)伪类是最常用的伪类。 a:link {color: #FF0000} /* 未被访问的链接 红色 */： a:link {color: #FF0000} /* 未被访问的链接 红色 */ a:visited {color: #00FF00} /* 已被访问过的链接 绿色 */ a:hover {color: #FFCC00} /* 鼠标悬浮在上的链接 橙色 */ a:active {color: #0000FF} /* 鼠标点中激活链接 蓝色 */ 也可以用HTML的class属性来设定伪类。例句如下： a.c1:link {color: #FF0000} /* 未被访问的链接 红色 */ a.c1:visited {color: #00FF00} /* 已被访问过的链接 绿色 */ a.c1:hover {color: #FFCC00} /* 鼠标悬浮在上的链接 橙色 */ a.c1:active {color: #0000FF} /* 鼠标点中激活链接 蓝色 */
ቤተ መጻሕፍቲ ባይዱ 谢谢
我们分别来看下这些选择器：
• 注：由于CSS优先级的关系(后面比前面的优先级高)，在写a 的CSS时，一定要按照a:link， a:visited， a:hover， a:actived的顺序书写。 • 伪类有：:first-child ，:link:，vistited，:hover:， active:focus，:lang • 伪元素有：:first-line，:first-letter，:before，:after • 在标签内写入style=" "的方式，应该是CSS的一种引入方式， 而不是选择器，因为根本就没有用到选择器。 CSS选择器的优先级: 父子选择器>id选择器>类选择器>HTML标签选择器