【【CSS】381- 提升你的CSS选择器技巧】的更多相关文章

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

记得大学时候,专业课的网页设计书籍里面讲过css选择器权重的计算:id是100,class是10,html标签是5等等,然后全部加起来的和进行比较... 我只想说:真是误人子弟,害人不浅! 最近,在前端群里还发现以上观点类似的奇葩聊天,真是*** 其实,也是在很久以前,看了腾讯ISUX的一位前端工程师-麦时分享的一篇技术文章(个人站点已失效,就不贴出来了),才了解到真正的css选择器权重计算. 以下是css选择器权重计算精华所在,翻译自国外的文档(记得是W3C给出的计算规则) 如果一个声明来自s…

【CSS】381- 提升你的CSS选择器技巧

我已经使用CSS多年了,但直到最近我才深入研究了一下CSS选择器. 我为什么要这样做呢?我们都知道选择器,但麻烦的是随着时间的推移,很容易习惯于在每个项目中使用相同的可信任选择器来实现你需要做的事情. 所以我就对CSS选择器进行了深入的回顾,并且遇到了一些有趣的,对我来说是新的或者以前不知道的一些用法. 我还发现了一些很酷的新选择器,将来可用但尚未被广泛支持. 组合选择器 让我们从熟悉的领域开始.组合选择器用于选择后代元素.子元素以及兄弟元素,并且已经存在了很长一段时间. 后代选择器 A B 子…

20个 CSS 快速提升技巧

作者:web秀 http://www.javanx.cn/20190321/css-skill/ 本文涵盖了20个css技巧,可以解决许多工作中常见的问题. 1.使用CSS重置(reset) css重置库如normalize.css已经被使用很多年了,它们可以为你的网站样式提供一个比较清晰的标准,来确保跨浏览器之间的一致性. 大多数项目并不需要这些库包含的所有规则,可以通过一条简单的规则来应用于布局中的所有元素,删除所有的margin.padding改变浏览器默认的盒模型. *{ box-siz…

css知多少（6）——选择器的优先级

1. 引言 上一节<css知多少(5)——选择器>最后提到,选择器类型过多将导致一些问题,是什么问题呢?咱们直接举例子说明. 上图中,css中的两个选择器都是针对<span>的,而且两个设置的颜色不一样,这里的<span>到底听从谁的命令? 上面还是比较简单的,下面在来一个复杂的: 上图中的<li>该显示成什么颜色呢? 2. 特指度 要解决以上问题,我们需要引入一个概念——特指度(specificity).特指度表示一个css选择器表达式的重要程度,可以通过…

css引入方式优先级以及不同选择器的优先级区别

我们都知道css有3种基本设置方式即 1.行内也叫嵌入式 例如: <div style='background:red'></div> 2.内联式,在html文件中用style标签包裹着的 例如: <html> <style type='text/css'> div{ background:red; } </style> </html> 3.链接式,在html文件中用link标签引用进来着的 例如: <html> <…

css中的7中属性选择器

在CSS的选择符中有七个属性选择符.它们分别是: 1.E[att] 选择具有att属性的E元素. 2.E[att="val"] 选择具有att属性且属性值等于val的E元素. 3.E[att~="val"] 选择具有att属性且属性值为一用空格分隔的字词列表,其中一个等于val的E元素. 4.E[att|="val"]  选择具有att属性且属性值为以val开头并用连接符"-"分隔的字符串的E元素. 5.E[att^=&quo…

css中最基本几个选择器

css中有四种不同的选择器 ①类选择器,又叫class选择器.类选择器{属性名:属性值:...}/*类选择器*/.s1{ font-weight:bold;font-size:16px;}②id选择器#id选择器名{属性名:属性值;}/*id选择器*/#id1{ font-size:40px;}③html元素选择器html元素名称{属性名:属性值;}④通配符选择器 检索或设置对象四边的外补丁.默认值为 0 0.如果提供全部四个参数值,将按上-右-下-左的顺序作用于四边.如果只提供一个,将用于全部…

CSS（一） 引入方式 选择器 权重

Css(一) Cascading Style Sheet 层叠样式表 css注释方式/*  */ 一.Css引入方式 1. 行间样式 style=" key:value; " <div style="width:100px;height:100px; background:yellow;"></div> 2.页面级css   即在 head 标签里 写 style 标签  里面写行间样式 (不推荐) <style> body{ b…

css background之设置图片为背景技巧

css background之设置图片为背景技巧-css 背景 Background是什么意思,翻译过来有背景意思.同样在css里面作为css属性一成员同样是有背景意思,并且是设置背景图片.背景颜色.背景图片截取等样式. 首先先来看看background有那些值(可进入CSS手册的background详细了解) 可以按顺序设置如下属性(可点击进入相应的css手册查看使用): background-color 背景颜色 background-image 背景图片 background-repeat…

CSS【03】：CSS 基础选择器与三种引入方式

基础选择器 选择器:css 选择 html 标签的一个工具,是将 css 与 html 建立起联系,那么 css 就可以控制 html 样式 选择器其实就是给 html 标签起名字 标签选择器 作用:根据指定的标签名称,在当前界面中找到所有该名称的标签,然后设置属性 格式: 标签名称 { 属性: 值; } 注意点: 标签选择器选中的是当前界面中所有的标签,而不能单独选中某一个标签 标签选择器无论标签藏得多深都能选中 id选择器 作用:根据指定的 id 名称找到对应的标签,然后设置属性 格式: #…