您好!欢迎来到静学网! 注册 登入
  • 致力中国及国外独立搜索引擎技术及第三方网站搜索引擎SEO排名研究

css选择器:id选择器和类选择器使用及详解(二)

课程目录 SEO资深顾问 次浏览
这节将类选择器和id选择器,这两种选择器是最常用的两种,几乎贯穿所有的html过程,所以掌握好这两种选择器,就差不多可以轻而易举的改变所想要的样式了,那么我们如何使用呢?我们不妨来先看一下它们的语法结构,这样就容易多了,当然这也不能乱用,不能乱命名,因为这可能会导致错乱和错误。
类选择器
 
类选择器的语法结构及用法
 
类选择器是有一个点号(.)加上你想要加的选择器,主要选择器不能完全使用数字、以及以数字开头的选择器,如果使用的话,那么类选择器将会失效,所以这一点要了解,不然出现错误将很难发现。一般选择器使用某部分网页的功能及作用进行命名,比如头部可以这样使用class=“top”,导航可以这样命名class=”nav”,这些要注意。
 
当然类选择器并不是孤立存在的,它可以结合任何一种选择器进行组合使用,比如元素选择器,如下:
<p class=”important”>类选择器</p>
<p>类选择器</p>
 
<style>
p.important{
 color:red;
}
</style>
这样做的目的是在统一网页中,可以避免重复标签样式改变,而只是让想要改变的标签改变而已,因此,采用这种方法还是很管用的,进行选择器相同,也是有选择优先级的。
 
如果想要多个类在同一标签中其作用,那么类选择器之间需要用空格隔开,值得注意的是,如果两个选择器链接在一起,能改变样式的只有同时包含这两个同类名的元素。比如
<p class=”important urgent”>类选择器</p>
<p class=”important “>类选择器</p>
<style>
 
.important.urgent{
 color:red;
}
</style>
只有这样写,才能真正的匹配,而如果少了一个类,那么匹配将失败。<p class=”important “>类选择器</p>这个字体将不会变成红色。
 
id选择器语法及使用
 
id选择器也一样,只不过符号不一样罢了,id选择器的符号为(#),id选择器目前好像比较先进了,之前是这么一回事的,id本是具有唯一性的,但是经过测试,发现一个id不仅仅是能够使用一次而已,而是可以使用多次,比如:
<h1 id="mostImportant">id选择器</h1>
<em id="mostImportant"> id选择器</em>
<ul id="mostImportant"> id选择器</ul>
<style>
 
# mostImportant {
 color:red;
}
</style>
以上都可以变成红色,这是本人经过测试得到的结论,还有重要的一点就是以前ID选择器是分大小写的,而如今经过本人测试已经不区分了,这也许是浏览器的一大进步吧。
 
 
 
 
 

静学网 , 版权所有丨如未注明 , 均为原创丨转载请注明css选择器:id选择器和类选择器使用及详解(二)
顶一下
(1)
踩一下
(0)
友情链接:
网站优化
本网站所刊载信息,不代表静学网观点。 刊用本网站稿件,务经书面授权或注明来源。 未经授权禁止转载、摘编、复制及建立镜像,违者将依法追究法律责任。 投稿邮箱:1870447831@qq.com | 举报邮箱:1870447831@qq.com