最近无论是工作还是自我学习提升都很忙,面对长篇大论的博文总是心有余而力不足,但又不断的接触学习到零碎的但是很有意义的知识点,很想分享给大家,所以本篇可能会很短. 本篇接我另一篇讲述 CSS 伪元素的文章: [CSS进阶]伪元素的妙用–单标签之美,看完本文觉得有意思的可以再去看看上一篇,分享了一些伪元素的妙用. 正文从这里开始: 哪些标签不支持伪元素? 我也是才知道这个姿势.为了不误导读者,就赶紧补充一下. 伪元素虽然强大,但是还是有一些特定的标签是不支持伪元素 before 和 after 的.…

writing-mode 属性 writing-mode 属性定义了文本在水平或垂直方向上如何排布. 语法格式如下: writing-mode: horizontal-tb | vertical-rl | vertical-lr | sideways-rl | sideways-lr horizontal-tb:水平方向自上而下的书写方式.即 left-right-top-bottom vertical-rl:垂直方向自右而左的书写方式.即 top-bottom-right-left verti…

前言 CSS的一个核心特性是能向文档中的一组元素类型应用某些规则,本文将详细介绍CSS选择器 选择器 [通配选择器] 星号*代表通配选择器,可以与任何元素匹配 *{color: red;} [元素选择器] 文档的元素是最基本的选择器 html{color: black;} p{color: gray;} h2{color: silver;} [类选择器] 类选择器用于选择一类元素 .div{color: red;} // 单个类的选择 .div1.div2{color: red;} // 多个类…

伪对象也叫伪元素,在过去,伪类和伪元素都被书写成前面只加一个冒号,实际上应该是: :weilei ::伪元素 而现在我们为了兼容旧的书写方式,用一个冒号引导伪类也是能被解析的. 伪类一般反应无法在CSS中轻松或者可靠检测到的某个元素的 状态或属性 : 伪元素表示DOM外部的某种 文档结构 . 伪类更多的是定义元素的状态,而伪元素则是改变文档结构,在结构外另加一个没有实际存在的元素(伪元素)常用伪元素: 1. E:before/E::before 2. E:after/E::after 1. E:…

伪元素 伪元素可以创建一些文档语言无法创建的虚拟元素.比如:文档语言没有一种机制可以描述元素内容的第一个字母或第一行,但伪元素可以做到(::first-letter.::first-line).同时,伪元素还可以创建源文档不存在的内容,比如使用 ::before 或 ::after. 不能用伪元素插入对交互有实质性影响的内容,以避免css不能正确加载. 伪类 存在DOM文档中,逻辑上存在但在文档树中却无须标识的“幽灵” 相关链接 MDN标准伪元素索引 MDN标准伪类索引 css伪类选择器中:fi…

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

在网页中,如果需要使用辅助性/装饰性的内容的时候,我们不应该直接写在HTML中,这样会影响真正的内容,这就需要使用伪元素了,这是由于css的纯粹语义化是没有意义的.在使用伪元素的时候,会发现js并不真能直接控制它,这篇文章主要就介绍下如果间接的控制.修改css中伪元素的方法. 例如,我的样式表有以下规则,需要把伪元素的content内容进行修改 <style> p:after{content:'after伪元素'} </style> <p id="dome"…

关于两者的区别,其实是很古老的问题.但是时至今日,由于各种网络误传以及一些不负责任的书籍误笔,仍然有相当多的人将伪类与伪元素混为一谈,甚至不乏很多CSS老手.早些年刚入行的时候,我自己也被深深误导,因为论坛里的帖子大多不关心这种概念的细微差别,即使有人出来说一句:"这两个是不同的",也只是被更多的帖子淹没掉而已.所以觉得有必要写下这些我所知的部分,这里着重写的是为什么这两者不同,以及一些平时容易错过的细节. 无论是伪类还是伪元素,都属于CSS选择器的范畴.所以它们的定义可以在CSS标准…

在前端开发中,大家或多或少的有接触过CSS伪类和伪元素,使用伪元素的时候,总感觉和伪类很相似,但又不能详细的说出两者的区别和联系,那么两者到底有什么区别和联系呢? 在 W3C 中定义: 伪类:用于向某些选择器添加特殊的效果.应用于一组 HTML 元素. 伪类的作用获取页面中不存在的信息,即通过选择器找到那些不存在于DOM树中的信息以及不能被常规CSS选择器获取到的信息.一个元素可以同时设置多个伪类效果.伪类名称对大小写不敏感. 伪类有以下几种,截图引自W3School: 注: a:link  /…

CSS伪元素 伪元素的语法: selector:pseudo-element {property:value;} 作    用 添加特殊样式 :first-line 伪元素 "first-line" 伪元素用于向某个选择器中的文字的首行添加特殊样式: p{font-size: 12pt}p:first-line{color: #0000FF;font-variant:small-caps;}<p>Some text that ends up on two or more l…

关于两者的区别,其实是很古老的问题.但是时至今日,由于各种网络误传以及一些不负责任的书籍误笔,仍然有相当多的人将伪类与伪元素混为一谈,甚至不乏很多CSS老手.早些年刚入行的时候,我自己也被深深误导,因为论坛里的帖子大多不关心这种概念的细微差别,即使有人出来说一句:“这两个是不同的”,也只是被更多的帖子淹没掉而已.所以觉得有必要写下这些我所知的部分,这里着重写的是为什么这两者不同,以及一些平时容易错过的细节. 无论是伪类还是伪元素,都属于CSS选择器的范畴.所以它们的定义可以在CSS标准的选择器章…

CSS伪元素是用来添加一些选择器的特殊效果.用于:向某个选择器中的文字的首行. ㈠语法 ①伪元素的语法: selector:pseudo-element {property:value;} ②CSS类也可以使用伪元素: selector.class:pseudo-element {property:value;} ㈡:first-line 伪元素 ⑴"first-line" 伪元素用于向文本的首行设置特殊样式. ⑵"first-line" 伪元素只能用于块级元素.…

一.伪类 CSS伪类用于向某些选择器添加特殊的效果,在W3规范中,CSS伪类有如下几个: CSS2.1 :active:向被激活的元素添加样式(激活是指点击鼠标那一下) :focus:向拥有键盘输入焦点的元素增加样式     :hover:当鼠标悬浮在元素上方时,向元素增加样式 :link:向未被访问的链接增加样式 :visited:向已被访问的链接增加样式 :first-child:向元素的第一个子元素增加样式 :lang:向带有指定lang属性的元素增加样式 CSS3中的伪类(注意CSS3级…

给定的html代码是: <div class='square'></div> 平常实现我们常是通过添加小的icon来实现,不仅需要添加图片资源,还需要改动html结构. CSS伪元素 css中伪元素有四个,分别是:first-line,:first-letter,:before,:after.其中前两个分别选择的是目标元素内第一行文本和第一个字母,可以为其添加多余样式. 而最常用的就是:before和:after,这两个伪元素与前两个的用法不同,而用处也更大. :before,:a…

最近在博客园看到某人发的baidu校招题目,说是要用一行html代码实现下面的这个图形: 给定的html代码是: <div class='square'></div> -----------------------以上为背景------------------------------ 正方形当然很好做,但是右侧突出来的小角标就得自己想办法了.所以,既然没有到有,自然是用上了CSS中的伪元素. 这个形状跟我们平时经常遇到的小气泡和下拉栏差不多 平常实现我们常是通过添加小的icon来实…

# css3 .类:伪类::伪元素 /* CSS3伪元素/伪类 :https://www.w3.org/TR/css3-selectors/#selectors ::selection 伪元素(F12看不到,::selection 只是给E添加了css样式) ::aftet/:after ? 伪元素(F12看到,添加了新结点 ::after 结点) :first-child 伪类(.class)(F12看不到,只是给E添加了css样式 或 Jquery的js) */ /* CSS3伪元素/伪类…

CSS中伪类与伪元素的概念是很容易混淆的 今天就来谈谈伪类与伪元素之间的区别 定义 首先先来看看伪类与伪元素的定义 w3c中对于它们是这么解释的 伪类:用于向某些选择器添加特殊的效果 伪元素:用于将特殊的效果添加到某些选择器 讲道理,可能我语文不好,我觉得这两句话是等价的 :-) 根本不能看出有什么区别 都是对某些选择器“加特技” 标准有这么一句话翻译过来是这样的 CSS 引入伪类和伪元素的概念是为了实现基于文档树之外的信息的格式化 这话更抽象,其实意思就是对那些我们不能通过class.id等选…

㈠什么是伪元素? 不同的解释: ⑴伪元素是创造关于文档语言能够指定的文档树之外的抽象.例如文档语言不能提供访问元素内容第一字或者第一行的机制.伪元素允许设计师引用它们,否则这是难以办到的.伪元素还提供样式设计师给在源文档中不存在的内容分配样式(例如::before和:after能够访问产生的内容). ⑵CSS 在渲染文档的时候,伪元素可以通过 css 给 HTML 添加一个元素(叫标签也行),这个元素在文档树中是找不到的.伪元素被当做 CSS 的样式来进行展现,用法和普通的元素用法是一样的. ⑶…

伪元素是一个好东西,但是很多人都没怎么用,因为他们觉得伪元素太诡异了.其实使用伪元素有很多好处,最大的好处是它可以简化页面的html标签,同时用起来也很方便,善于使用伪元素可以让你的页面更加地简洁优雅. 更好的阅读体验移步:http://yincheng.site/using-before-after 1. 伪元素使用场景 伪元素一般是用于画图,特别是那种无关紧要的分隔线.点之类的小元素,如下图的绿框所示: 上面第一张图的分隔线,就是用before画的.只需要给div套一个类,这个类写一个bef…

一.介绍 css3为了区分伪类和伪元素,伪元素采用双冒号写法. 常见伪类——:hover,:link,:active,:target,:not(),:focus. 常见伪元素——::first-letter,::first-line,::before,::after,::selection. ::before和::after下特有的content,用于在css渲染中向元素逻辑上的头部或尾部添加内容. 这些添加不会出现在DOM中,不会改变文档内容,不可复制,仅仅是在css渲染层加入. 所以不要用:…

如果你一直密切关注着各种网页设计的博客,你可能已经注意到了:before和:after伪元素已经在前端开发中获得了相当多的关注.特别是在Nicolas Gallagher的博客中,后期运用了很多伪类元素. Nicolas Gallagher使用伪元素用静态的HTML标签创建84个GUI图标. 为了补充说明上述内容(和利用当前发展的趋势),我收集一些完全在伪元素下运行的东西.本文主要针对这一类人群,即已经看到了用伪元素做出了很酷的东西,但想知道所有有关before在css技术里的运用. 尽管css…

http://www.w3cplus.com/css3/learning-to-use-the-before-and-after-pseudo-elements-in-css.html 如果你一直密切关注着各种网页设计的博客,你可能已经注意到了:before和:after伪元素已经在前端开发中获得了相当多的关注.特别是在Nicolas Gallagher的博客中,后期运用了很多伪类元素. Nicolas Gallagher使用伪元素用静态的HTML标签创建84个GUI图标. 为了补充说明上述内容…

一.介绍 css3为了区分伪类和伪元素,伪元素采用双冒号写法. 常见伪类——:hover,:link,:active,:target,:not(),:focus. 常见伪元素——::first-letter,::first-line,::before,::after,::selection. ::before和::after下特有的content,用于在css渲染中向元素逻辑上的头部或尾部添加内容. 这些添加不会出现在DOM中,不会改变文档内容,不可复制,仅仅是在css渲染层加入. 所以不要用:…

如果你一直密切关注着各种网页设计的博客,你可能已经注意到了:before和:after伪元素已经在前端开发中获得了相当多的关注.特别是在Nicolas Gallagher的博客中,后期运用了很多伪类元素. Nicolas Gallagher使用伪元素用静态的HTML标签创建84个GUI图标. 为了补充说明上述内容(和利用当前发展的趋势),我收集一些完全在伪元素下运行的东西.本文主要针对这一类人群,即已经看到了用伪元素做出了很酷的东西,但想知道所有有关before在css技术里的运用. 尽管css…

前阵子对公司框架的前端优化中,使用了字体图标(iconfont)来做模块的图标集,供用户进行配置选择. 字体图标的有非常好的灵活性和复用性,可以像处理文字一样通过font-size进行大小设置.通过color来直接配色,如果系统整体设计是比较扁平化的,浏览器兼容要求IE8+,并且在系统中需要一套图标集的话,选择字体图标来替代传统的png图标应该说是一个非常有性价比的方案. 具体字体图标的制作和使用,有一个非常棒的服务站点:www.iconfont.cn,在这里感谢阿里妈妈前端团队. 上面大致介绍…

::before和::after伪元素的用法 一.介绍 css3为了区分伪类和伪元素,伪元素采用双冒号写法. 常见伪类——:hover,:link,:active,:target,:not(),:focus. 常见伪元素——::first-letter,::first-line,::before,::after,::selection. ::before和::after下特有的content,用于在css渲染中向元素逻辑上的头部或尾部添加内容. 这些添加不会出现在DOM中,不会改变文档内容,不可…

随笔 - 366  文章 - 0  评论 - 392 ::before和::after伪元素的用法   一.介绍 css3为了区分伪类和伪元素,伪元素采用双冒号写法. 常见伪类——:hover,:link,:active,:target,:not(),:focus. 常见伪元素——::first-letter,::first-line,::before,::after,::selection. ::before和::after下特有的content,用于在css渲染中向元素逻辑上的头部或尾部添加…

css3为了区分伪类和伪元素,伪元素采用双冒号写法. 常见伪类——:hover,:link,:active,:target,:not(),:focus. 常见伪元素——::first-letter,::first-line,::before,::after,::selection. ::before和::after下特有的content,用于在css渲染中向元素逻辑上的头部或尾部添加内容. 这些添加不会出现在DOM中,不会改变文档内容,不可复制,仅仅是在css渲染层加入. 所以不要用:befor…

文章转自:http://www.10wy.net/Article/CSS/CSS_list_8.html查看更多更专业性的文章请到:网页设计网 CSS字体属性 字体名称属性(font-family) 这个属性设定字体名称,如Arial, Tahoma, Courier等.例句如下: .s1 {font-family:Arial} 演示示例 字体大小属性(font-size) 这个属性可以设置字体的大小.字体大小的设置可以有多种方式,最常用的就是pt和px(pixel).例句如下: .s2 {fo…

01-CSS属性:字体属性和文本属性 #本文重要内容 CSS的单位 字体属性 文本属性 定位属性:position.float.overflow等 #CSS的单位 html中的单位只有一种,那就是像素px,所以单位是可以省略的,但是在CSS中不一样. CSS中的单位是必须要写的,因为它没有默认单位. #绝对单位 1 in=2.54cm=25.4mm=72pt=6pc. 各种单位的含义: in:英寸Inches (1 英寸 = 2.54 厘米) cm:厘米Centimeters mm:毫米Mill…