1.如何区分一个html标签的不同样式

使用标签名.类名的方式解决

如果希望特别强调其中的某一个或几个元素,处理的方案有三个:

1.id选择器
2.class选择器
3.层级选择器

看下面的代码:

<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<style type="text/css">
</style>
</head>
<body>
<div>
<h1>床前明月光</h1>
<p>疑是地上霜</p>
<span>举头望明月</span>
<p>低头思故乡</p>
<p>李白</p>
</div>
</body>
</html>

刷新浏览器后,显示的效果如下:

现在想让李白这两个字变成红色斜体,可以有三种方法:

1.使用id选择器

代码如下:

<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<style type="text/css">
#te1{
color:red;
font-style:italic;
}
</style>
</head>
<body>
<div>
<h1>床前明月光</h1>
<p>疑是地上霜</p>
<span>举头望明月</span>
<p>低头思故乡</p>
<p><span id="te1">李白</span></p>
</div>
</body>
</html>

刷新浏览器后的效果如下:

2.使用类选择器

代码如下:

<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<style type="text/css">
.te1{
color:red;
font-style:italic;
}
</style>
</head>
<body>
<div>
<h1>床前明月光</h1>
<p>疑是地上霜</p>
<span>举头望明月</span>
<p>低头思故乡</p>
<!--<p>李白</p>-->
<p><span class="te1">李白</span></p>
</div>
</body>
</html>

刷新浏览器后的效果也是一样的.

3.使用层级选择器

代码如下:

<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<style type="text/css">
div > p > span{
color:red;
font-style:italic;
}
</style>
</head>
<body>
<div>
<h1>床前明月光</h1>
<p>疑是地上霜</p>
<span>举头望明月</span>
<p>低头思故乡</p>
<!--<p>李白</p>-->
<p><span>李白</span></p>
</div>
</body>
</html>

刷新浏览器后的效果也是一样的.

可以看出css是非常灵活的,但是这样一来什么时候该用哪个选择器呢??

. 首先id选择器用的地方并不多,尽量不要使用id选择器
. 使用的时候优先选择用类选择器
. 再考虑用html标签选择器
. 再然后再考虑用组合选择器
. 最后才考虑会id选择器
. 使用后代选择器时,尽量使用标签选择器或者类选择器和标签选择器的组合,
. id选择器和类选择器的优先级

实例代码如下:

<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<style type="text/css">
.p1{
color:red;
}
#p2{
color:blue;
}
</style>
</head>
<body>
<p class="p1" id="p2">hello world</p>
</body>
</html>

刷新浏览器,显示如下:

可以看到显示的字体颜色是蓝色的,说明id选择器的优先级高于类选择器.

得出结论:

. 一个元素可以同时有id选择器和类选择器,当id选择器和类选择器发生冲突时,id选择器的优先级高于类选择器
. 一个元素最多有一个id选择器,但是可以有多个类选择器.
. 当一个元素被多个类选择器修饰地,用空格隔开

2.如何使用多个类选择器来修饰同一个html元素??

代码如下:

<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<style type="text/css">
.class1{
text-decoration:underline;
color:black;
}
.class2{
font-style:italic;
font-size:20px;
}
</style>
</head>
<body>
<p class="class1 class2">hello world</p>
</body>
</html>

刷新浏览器后显示的效果如下:

假如现在在class2这个选择器中设置字体颜色为红色,会怎么样呢?

代码如下:

<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<style type="text/css">
.class1{
text-decoration:underline;
color:black;
}
.class2{
font-style:italic;
font-size:20px;
color:red;
}
</style>
</head>
<body>
<p class="class1 class2">hello world</p>
</body>
</html>

刷新浏览器显示的效果如下:

可以看到颜色变成红色.

结论如下:

. 多个类选择器在修饰同一个元素时,以写在后面的为准
. 当优先级相同的情况下,在发生冲突时,以写在style内容中的后面的那个为准
. 一个元素被多个选择器同时修饰时,优先级是:
!important设置 > 行内样式设定>id选择器>类(伪类)选择器>html选择器>通配符选择器>html属性设置>继承样式

关于css选择器的一些细节的更多相关文章

  1. 你所不知道的 CSS 阴影技巧与细节 滚动视差?CSS 不在话下 神奇的选择器 :focus-within 当角色转换为面试官之后 NPOI 教程 - 3.2 打印相关设置 前端XSS相关整理 委托入门案例

    你所不知道的 CSS 阴影技巧与细节   关于 CSS 阴影,之前已经有写过一篇,box-shadow 与 filter:drop-shadow 详解及奇技淫巧,介绍了一些关于 box-shadow  ...

  2. CSS特异性(CSS Specificity)的细节之CSS样式权重的计算与理解(CSS样式覆盖规则)

    本篇讲解CSS特异性(CSS Specificity)的细节,也就是CSS样式选择器的权重计算 通过计算选择器的权重(weight)最终决定哪个选择器将获得优先权去覆盖其他选择器的样式设定,即“优先原 ...

  3. 【前端学习】【CSS选择器】

    CSS选择器     CSS选择器 CSS(Cascading Style Sheets)是一项出色的技术,它使得网页的结构和表现样式完全分离.利用CSS选择器能轻松地对某个元素添加样式而不改动HTM ...

  4. [css选择器]总结:IE6不支持的CSS选择符

    转载地址:https://www.wenjiwu.com/doc/zvsbii.html.此文最后也给出了原文地址,但是我点击过去发现是什么赌博彩票的地址,360也弹出小心的提示,所以这里只给出了我转 ...

  5. CSS选择器的优化

    前面花了几个篇幅着重介绍了CSS的选择器的使用,我将其分成三个部分:CSS基本选择器.CSS属性选择器以及CSS伪类选择器.那么今天我主要想和大家一起来学习——CSS选择器方面的性能优化.因为对性能这 ...

  6. 前端极易被误导的css选择器权重计算及css内联样式的妙用技巧

    记得大学时候,专业课的网页设计书籍里面讲过css选择器权重的计算:id是100,class是10,html标签是5等等,然后全部加起来的和进行比较... 我只想说:真是误人子弟,害人不浅! 最近,在前 ...

  7. css选择器

    常用css选择器,希望对大家有所帮助,不喜勿喷. 1.*:通用选择器 * { margin: 0; padding: 0; } 选择页面上的全部元素,通常用于清除浏览器默认样式,不推荐使用. 2.#i ...

  8. dynamic-css 动态 CSS 库,使得你可以借助 MVVM 模式动态生成和更新 css,从 js 事件和 css 选择器的苦海中脱离出来

    dynamic-css 使得你可以借助 MVVM 模式动态生成和更新 css,从而将本插件到来之前,打散.嵌套在 js 中的修改样式的代码剥离出来.比如你要做元素跟随鼠标移动,或者根据滚动条位置的变化 ...

  9. CSS选择器的权重与优先规则?

    我们做项目的时候,经常遇到样式层叠问题,被其他的样式覆盖,或者写的权重不高没效果,对权重没有具体的分析,做了一个总结. css继承是从一个元素向其后代元素传递属性值所采用的机制.确定应当向一个元素应用 ...

随机推荐

  1. BZOJ 3038: 上帝造题的七分钟2【线段树区间开方问题】

    3038: 上帝造题的七分钟2 Time Limit: 3 Sec  Memory Limit: 128 MBSubmit: 1469  Solved: 631[Submit][Status][Dis ...

  2. c++(hash表)

    hash表,有时候也被称为散列表.个人认为,hash表是介于链表和二叉树之间的一种中间结构.链表使用十分方便,但是数据查找十分麻烦:二叉树中的数据严格有序,但是这是以多一个指针作为代价的结果.hash ...

  3. Java应用开发中的字符集与字符编码

    事出有因 在向HttpURLConnection的输出流写入内容时,因没有设置charset,导致接收方对数据的验签不一致. URL url = new URL(requestUrl); //打开连接 ...

  4. JavaScript八张思维导图—字符串用法

    JS基本概念 JS操作符 JS基本语句 JS数组用法 Date用法 JS字符串用法 JS编程风格 JS编程实践 不知不觉做前端已经五年多了,无论是从最初的jQuery还是现在火热的Angular,Vu ...

  5. Solr学习笔记1(V7.2)

    下载压缩包http://archive.apache.org/dist/lucene/,解压后放到某一盘符下面 Windows下启动命令 :\solr-7.2.0>bin\solr.cmd st ...

  6. tp路由+伪静态+去掉index.php

    浏览:10536 发布日期:2013/10/08 分类:技术分享 关键字: 路由 伪静态 去掉index.php 之前一个网友说能不能达到这样的效果,www.olcms.com/news/id.htm ...

  7. Yourphp  使用说明

    https://wenku.baidu.com/view/c8d2e667cc1755270722088a.html 这个是站点的配置信息,比如:网站名称. LOGO .网站标题等 推荐位:个别可能用 ...

  8. Java读书推荐

    想要深入掌握一门技术,读书是必不可少的一步,也是最重要的一步.有些书需要读很多遍才能深入理解,经过几本甚至几十本书的熏陶,才能让你在这个行业中越走越远,爱上这个行业,抽出时间多读本书吧,读书会让人如虎 ...

  9. 【开发技术】json

    json(JavaScript Object Notation) JavaScript对象符号是一种结构化轻量级的数据传输格式,很多场合替代XML文件格式 JSON格式化校验:http://www.b ...

  10. JVM-触发Full GC的情况

    除直接调用System.gc外,触发Full GC执行的情况有如下四种: 1.老年代空间不足 老年代空间只有在新生代对象转入及创建为大对象.大数组时才会出现不足现象,当执行Full GC后空间仍然不足 ...