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. CTFCrackTools在Windows下显示A Java Exception has occurred的解决方案

    打CTF做密码学的人一定少不了用这个工具,CTFCrackTools,这个几乎可以号称密码学的神器,但是呢,最近博主遇到了一些麻烦事,每次打开的时候都是显示A Java Exception has o ...

  2. Vijos P1066 弱弱的战壕【多解，线段树，暴力，树状数组】

    弱弱的战壕 描述 永恒和mx正在玩一个即时战略游戏,名字嘛~~~~~~恕本人记性不好,忘了-_-b. mx在他的基地附近建立了n个战壕,每个战壕都是一个独立的作战单位,射程可以达到无限(“mx不赢定了 ...

  3. 最小生成树&最短路基础算法总结

    [最短路问题] 解决最短路问题有以下算法:Dijkstra算法,Bellman-Ford算法,Floyd算法,和SPFA算法和启发式搜索算法A*; 每个算法都有它的特点可以解决某些特定的问题,例如:F ...

  4. Java入门篇（三）——Java流程控制

    前两篇已经了解了Java语言基础,本篇开始Java的流程控制.流程控制对任何一门编程语言都是至关重要的,它提供了控制程序步骤的基本手段. 一.复合语句 Java语言的复合语句是以整个块区为单位的语句, ...

  5. Effective Java 第三版——24. 优先考虑静态成员类

    Tips <Effective Java, Third Edition>一书英文版已经出版,这本书的第二版想必很多人都读过,号称Java四大名著之一,不过第二版2009年出版,到现在已经将 ...

  6. App Doc View Frame中指针的获取

    // App中获取其它三项指针 void CSDIApp::OnApp() { // App // Doc CDocument *pDoc = ((CFrameWndEx *)m_pMainWnd)- ...

  7. Spark算子--SortByKey

    转载请标明出处http://www.cnblogs.com/haozhengfei/p/076a31e7caab1316b07990c02ac65e9c.html  SortByKey--Transf ...

  8. xml报错 Parse Fatal Error ：在实体引用中，实体名称必须紧跟在'&'后面

    修改jndi配置文件中的密码后,重启tomcat报错如下  实际问题是xml中默认’&’是非法字符,用     &   替代

  9. 实现鼠标hover动画效果自己理解的两种方法——练习笔记

    练习前端技术学院的任务,需要实现"导航栏中的链接,随着鼠标悬浮的位置,相应的链接下出现红色线段"的效果(如图1),我的理解有简易与稍显复杂一些的方法: 首先想到的就是直接利用伪元素 ...

  10. Python random模块（获取随机数）

    1.random.random 随机生成一个0到1的随机浮点数: 0 <= n < 1.0 In [2]: print random.random() 0.544824016934 2.r ...