最常用的方法就是用外联样式，然后通过css选择器选择不同的元素，为其加上不同的样式。也就是说我们从事前端工作，在开发页面的过程中是肯定绕不开css选择器的，其重要性也就不言而喻了。废话不多说，我们来看一段代码：!DOCTYPEhtmlhtmllang=enheadmetacharset=UTF-8titleTitle/titlestyle#box{width:px;height:px;background:#1b6d85;}/style/headbodydivid=box/div/body/html得到的结果是这样的：那么在这一段代码中，有一个style标签，里面写的就是css样式：#box{width:px;height:px;background:#1b6d85;}这段代码中就用到了选择器，这段代码选择了一个ID名称为box的元素，并为其加上我们想要的样式，这里面的选择器就是前面的：#box{}前面的“#”标识符表示这个选择器将会选择ID名称，并不能选择其他的属性。而紧跟其后的box则是代表要选择的ID属性的值。然后后面是大括号，大括号里面写的就是css样式了。这个选择器也叫ID选择器。那么除了ID选择器以外，还有很多其他的选择器，最常见的有类选择器,如“.box{}”；这就是一个类选择器，千万要注意，在选择器的名字前面有一个点哦！还是来看看代码把。之前的样式其实也可以这样写：!DOCTYPEhtmlhtmllang=enheadmetacharset=UTF-8titleTitle/titlestyle.box{width:px;height:px;background:#1b6d85;}/style/headbodydivclass=box/div/body/html注意这段代码和上一段代码的一个区别：其中div标签身上的ID属性被替换成了class属性，其里面的值还是没有变化，还是box。第二个区别就是css部分，一个很小的改变：box前面的“#”变成了“.”；那么这个点代表的就是这个选择器选择的是一个class属性小总结一下：#box{}/*这是ID选择器，注意前面是用井号开头的，井号代表ID*/.box{}/*这是class选择器，注意前面是用点开头的，点代表class*/除了这两个选择器之外，还有：标签选择器：顾名思义，也就是选择某一些标签包含选择器：这个是一个组合选择器，由一个选择器包含住另一个选择器来实现精确查找群组选择器：各种选择器组合在一起，选择一组元素下面来看一下这些选择器的一个使用场景：标签选择器：!DOCTYPEhtmlhtmllang=enheadmetacharset=UTF-8titleTitle/titlestylediv{width:px;height:px;background:#0c;}/style/headbodyh1/h1div/divdiv/divdiv/divdiv/divdiv/divp/pp/pp/pp/ph2/h2/body/html比如这种情况，一堆的标签，当你并不想给这些标签加上任何的属性，然后你又需要选中所有的div标签那么这时候就可以使用标签选择器。标签选择器的组成是：标签名+大括号；注意：这个选择器前面不需要加任何的标识符。名字也不是随便起的，名字就是标签名，代表选择某一个标签。包含选择器：!DOCTYPEhtmlhtmllang=enheadmetacharset=UTF-8titleTitle/titlestyleh1em{color:red;}/style/headbodyh1这里是标题em重要内容/em/h1/body/html当我们需要选择em标签的时候，其实在这个案例里面可以直接使用em{}这个标签选择器；但是我们在正常的开发中，html结构比这个要复杂很多，那么这时候为了避免选中其他的元素，我们就需要用到包含选择器：h1em{}这个选择器的意思是在h1标签里面选择em标签。这个选择器也叫后代选择器。注意：包含选择器之间一定要用空格隔开。另外，包含选择器选择的是所有的后代，比如：!DOCTYPEhtmlhtmllang=enheadmetacharset=UTF-8titleTitle/titlestyleh1span{color:red;}/style/headbodyh1这里是标题em重要span的/span内容/em/h1/body/html比如这里的包含选择器：h1span{}同样能选中h1标签里面的span标签，尽管span标签被em所包含，但是依然能够选中，这一点一定要注意。另外，包含选择器还有一种，叫子级选择器，这个选择器的写法是：h1span{},中间不再是空格，而是一个大于号。这个选择器的意思是在h1的子元素里面选择span元素，在上面的代码块中span元素其实算是h1标签的孙级元素，所以用这个子级元素是不能选中span标签的注意：h1这里是标题em重要span的/span内容/em/h1在这个结构中：用h1span{}这个选择器可以选中span元素；如果用h1span{}这个选择器则不能选中span元素。群组选择器：!DOCTYPEhtmlhtmllang=enheadmetacharset=UTF-8titleTitle/titlestyleh1span,h2span,pspan{color:red;}/style/headbodyh1这里是标题em重要span的/span内容/em/h1h2span这里是副标题/span/h2pspan这里是内容/span/p/body/html比如这个结构，当我们需要同时选中不同元素所包含的span元素的时候，就可以用到群组选择器。其实也就是多个选择器之间用逗号分隔，这样做可以节省一些代码。这个选择器通常用在cssreset里面。当我们需要对多个标签清除其样式的时候，就可以这样写：styleh1,h2,h3,h4,p,dl,dd{margin:0;}/style稍微格式化一下就可以了。
转载请注明：http://www.aierlanlan.com/grrz/6685.html
