css如何重新定义包含选择符定义过的标签~

html-css013

css如何重新定义包含选择符定义过的标签~,第1张

重新设置一个类

.black{color:#000}

.test_css span{color:#FF0000}

<div class="test_css">

<span>测<span class="red">试</span>字符</span>

</div>

这样的结果是“测试字符”中只有“试”字是黑色,其他为红色

你的意思是如果有多个标签想让其中的一个变化 那就改成这个样子

.black{color:#000}

.test_css span{color:#FF0000}

<div class="test_css">

<span>测试字符</span>

<span>测试字符</span>

<span class="black“>测试字符</span>

<span>测试字符</span>

<span>测试字符</span>

<span>测试字符</span>

</div>

这样的话只有加了black类的span标签的字是黑色的

问题1,很显然是不合理的,增加一个属性可以,改变就不行。如果硬要这样做,可以采取细一点的方式,例如为a定义一个样式: .apage a 和 .bpage a 在A页面是<div class="apage"><a ...>...</a></div>而在B页面 则是 <div class="bpage"><a ...>...</a></div>

问题2,尽量将所有的样式表都放在一个单独的CSS文件里,网站所有的页面都调用这一个文件。要明白,CSS、HTML 都不是运行程序,而只是代码,效率和文件的大小有很直接的关系,如果10个页面10个CSS,明显的没有达到这样的目的。

浏览器打开一个页面时,同时也下载了CSS到IE的临时文件夹中(除非CSS不是一个单独的文件),再打开其他页面,如果引用的是同一个CSS,就不会再进行下载。显而易见,下载10个文件要比下载1个文件效率低得多,即使这1个文件比10文件加起来还大。

回复楼下的看法:一个网站的所有页面不可能有非常多的区别,况且CSS是在客户端执行,完全不涉及到服务端,况且浏览器是先看样式名,再根据样式名去查找相符合的样式。不是把所有的样式都遍历一次,你所说的打开页面慢、CUP频率高貌似不大可能出现。即使有,那也不是因为样式表很大的缘故,即使是因为样式表非常大,这样的影响也小到可以忽略,即使明显,也只是在客户端,和客户机有较大关系,对服务端不会造成任何压力。

如果你很不喜欢这样的方式,至少可以把布局大致相同的页面引用某一个CSS,完全不相同的引用另一个CSS。但是一个页面一个CSS,绝对更不可取。

CSS选择器有三种类型:

标记选择器、类别选择器、ID选择器

一、标记选择器:

就是“O 标签(重新定义。。。。)”

标记选择器是必须使用HTML的标签作为选择器的名称,也就是说“(2)当选中第二个时候,名称框中必须是下拉列表框中的内容” ,是的。

格式:标记名称{属性:值;属性:值;}

例子:

<head>

<style type="text/css">

p{color:red

font-size:25px

}

</style>

</head>

<body>

<p>标记选择器</p>

</body>

二、类别选择器:

就是“O 类(可应用于任何标签)”

也叫class选择器,可以自定义选择器的名称,其中class为自定义的名称。

格式: .class{属性:值;属性:值;}

例子:

<head>

<style type="text/css">

.one{color:red

font-size:25px

}

.two{color:blue

font-size:20px

}

.three{color:green

font-size:15px

}

</style>

<body>

<p class="one">class选择器1</p>

<p class="two">class选择器2</p>

<p class="three">class选择器3</p>

<p class="three">class选择器4</p>

</body>

三、ID选择器:

就是”O 高级 (ID、伪类。。。。)“

用法基本和class选择器相同,也可以自定义选择器名称,其中ID为自定义的名称。不同的是:ID选择器不允许一个ID同时出现在两个标签中,而class选择器则相反。

格式:#ID{属性:值;属性:值;}

例子:

<head>

<style type="text/css">

#one{color:red

font-size:25px

}

#two{color:blue

font-size:20px

}

#three{color:green

font-size:15px

}

</style>

<body>

<p id="one">class选择器1</p>

<p id="two">class选择器2</p>

<p id="three">class选择器3</p>

<p id="three">class选择器4</p>

</body>

也就是说上面两个<p>标签中,同时出现了两个ID名称,为”three“,这在ID选择器中是不允许出现的。

以上是我的回答,至于什么时候用哪种选择器,这是可以灵活运用,没有特定的该用哪个选择器。