关于css选择器的一些细节
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选择器的一些细节的更多相关文章
- 你所不知道的 CSS 阴影技巧与细节 滚动视差？CSS 不在话下 神奇的选择器 :focus-within 当角色转换为面试官之后 NPOI 教程 - 3.2 打印相关设置 前端XSS相关整理 委托入门案例
你所不知道的 CSS 阴影技巧与细节 关于 CSS 阴影,之前已经有写过一篇,box-shadow 与 filter:drop-shadow 详解及奇技淫巧,介绍了一些关于 box-shadow ...
- CSS特异性（CSS Specificity）的细节之CSS样式权重的计算与理解（CSS样式覆盖规则）
本篇讲解CSS特异性(CSS Specificity)的细节,也就是CSS样式选择器的权重计算 通过计算选择器的权重(weight)最终决定哪个选择器将获得优先权去覆盖其他选择器的样式设定,即“优先原 ...
- 【前端学习】【CSS选择器】
CSS选择器 CSS选择器 CSS(Cascading Style Sheets)是一项出色的技术,它使得网页的结构和表现样式完全分离.利用CSS选择器能轻松地对某个元素添加样式而不改动HTM ...
- [css选择器]总结：IE6不支持的CSS选择符
转载地址:https://www.wenjiwu.com/doc/zvsbii.html.此文最后也给出了原文地址,但是我点击过去发现是什么赌博彩票的地址,360也弹出小心的提示,所以这里只给出了我转 ...
- CSS选择器的优化
前面花了几个篇幅着重介绍了CSS的选择器的使用,我将其分成三个部分:CSS基本选择器.CSS属性选择器以及CSS伪类选择器.那么今天我主要想和大家一起来学习——CSS选择器方面的性能优化.因为对性能这 ...
- 前端极易被误导的css选择器权重计算及css内联样式的妙用技巧
记得大学时候,专业课的网页设计书籍里面讲过css选择器权重的计算:id是100,class是10,html标签是5等等,然后全部加起来的和进行比较... 我只想说:真是误人子弟,害人不浅! 最近,在前 ...
- css选择器
常用css选择器,希望对大家有所帮助,不喜勿喷. 1.*:通用选择器 * { margin: 0; padding: 0; } 选择页面上的全部元素,通常用于清除浏览器默认样式,不推荐使用. 2.#i ...
- dynamic-css 动态 CSS 库，使得你可以借助 MVVM 模式动态生成和更新 css，从 js 事件和 css 选择器的苦海中脱离出来
dynamic-css 使得你可以借助 MVVM 模式动态生成和更新 css,从而将本插件到来之前,打散.嵌套在 js 中的修改样式的代码剥离出来.比如你要做元素跟随鼠标移动,或者根据滚动条位置的变化 ...
- CSS选择器的权重与优先规则？
我们做项目的时候,经常遇到样式层叠问题,被其他的样式覆盖,或者写的权重不高没效果,对权重没有具体的分析,做了一个总结. css继承是从一个元素向其后代元素传递属性值所采用的机制.确定应当向一个元素应用 ...
随机推荐
- Wannafly模拟赛 A.矩阵(二分答案+hash)
矩阵 时间限制:1秒 空间限制:131072K 题目描述 给出一个n * m的矩阵.让你从中发现一个最大的正方形.使得这样子的正方形在矩阵中出现了至少两次.输出最大正方形的边长. 输入描述: 第一行两 ...
- android企业级商城源码、360°全景图VR源码、全民直播源码等
Android精选源码 [新版]Android技术博客精华汇总 开源了:乐乐音乐5.0-Android音乐播放器 android实现仿真水波纹效果源码 360°全景图VR,这是一个值得把玩的APP a ...
- Dora.Interception, 一个为.NET Core度身打造的AOP框架：不一样的Interceptor定义方式
相较于社区其他主流的AOP框架,Dora.Interception在Interceptor提供了完全不同的编程方式.我们并没有为Interceptor定义一个接口,正是因为不需要实现一个预定义的接口, ...
- castle之动态代理
动态代理 DynamicProxy,这里说的动态代理是直接使用Castle.net 中提供的,并非自己实现的,因为别人写的很好,拿着用就行了. 动态代理的工作模式: 一般我们获取一个类型的实例都是通过 ...
- Google PageSpeed Tools 性能测试分析
今天给大家介绍下一个工具:Google PageSpeed Tools,根据官方的介绍,简单梳理如下: Page Speed Insights能针对移动设备和电脑设备衡量网页的性能.该工具会抓取网址两 ...
- [国嵌攻略][179][OpenSSL加密系统]
未加密传输的安全弊端 如果在网络传输中没有加密,就是以明文传输.传输的数据可以被抓包软件直接截获,并能读取里面的数据. 加密基本原理 1.对称加密 2.非对称加密 2.1.公钥私钥 公钥和私密要配对. ...
- HDU 2119 Matrix
题目链接: http://acm.hdu.edu.cn/showproblem.php?pid=2119 解题思路: 处理数据,使用公式最小点覆盖数=最大匹配数,使用匈牙利算法求二分图最大匹配即可. ...
- ItemCF_基于物品的协同过滤_MapReduceJava代码实现思路
ItemCF_基于物品的协同过滤 1. 概念 2. 原理 如何给用户推荐? 给用户推荐他没有买过的物品--103 3. java代码实现思路 数据集: 第一步:构建物品的同现矩阵 第 ...
- ubuntu 修复 could not open file '/etc/apt/sources.list'
问题描述:could not open file '/etc/apt/sources.list' 问题分析:软件源被清空了,也就是 /etc/apt/sources.list 被删除了 解决问题:1. ...
- oracle01
01-基本的查询语句 A:一些命令 sqlplus sys/sys@192.168.22.220:1521/orcl as sysdba; conn scott/123456@192.168.22.2 ...