super胡 .news { background-color: gray; border: solid 1px black; }.news img { float: left; } .news p { float: right; }.clearfix:after{ content: "."; display:block; height:0px; /*一、该方法中必须为需要清除浮动元素的伪对象中设置 height:0，否则该元素会比实际高出若干像素；*/ clear: both; visibility: hidden; } .clearfix { /* 触发 hasLayout */ zoom: 1; } some text
什么是伪元素伪元素表示了某个元素的子元素。这个子元素虽然在逻辑上存在，但却并不实际存在于文档树中。因为伪元素并不在文档树中，所以通过JS，也抓取不到伪元素，也不能给它绑事件。语法伪元素以::开头。在CSS1和CSS2中，伪元素和伪类一样，都是用:开头。但在CSS3中，伪元素以::开头，用以和伪类进行区分。IE8不支持::。因此如果要兼容IE8，只能用:。常见的伪元素::before在当前元素的内容的前面插入一个子元素。插入的元素为内...
在网页设计中我们发现越来越多的文本会放在图像之上，通常情况下，这不太好操作，因为图像具有动态颜色和光照，文本大部分是一种颜色。这通常对于可读性和可访问性的不太有利的，可能会让文本看起来不太清楚。这意味着如果我们想要在图像和文本之间引入叠加层，那么有时这会使背景图像变暗以便于阅读。我们都需要一种简单的CSS技术来引入这种叠加。（推荐课程：css3视频教程）由于我不想为修饰引入新标记，我们将使用CSS ::after伪...
css伪元素是什么？css伪元素用来干啥？相信很多人都想听说过css伪元素，但是不知道是干什么的，下面我们来讲述一下css如何使用伪元素？css伪元素是什么？css中的伪元素就是对某个选择器的文字添加一些特殊的样式，伪元素并不是真正的元素，只是和其他元素没有什么太大的差别，也不存在文档中，例如代码如下：p:first-line { background-color:yellow; }效果如下：css伪元素有哪些？css伪元素有很多，其中就包括first-line，before...
1.伪类，pseudo-classes其核心就是用来选择DOM树之外的信息，不能够被普通选择器选择的文档之外的元素，用来添加一些选择器的特殊效果。 ：hover, ：active, :visited :link :first-child 由于状态的变化是非静态的，所以元素到达一个特定状态时，可以得到一个伪类的样式。当状态改变时， 它会又失去这个样式。 由此可以看出它的功能和class类似，但是它是基于文档之外的抽象，所以叫伪类。伪元素 pesudo-elementsDOM树没有定义的上...
前几天遇到一个页面需求是这样的：一个评论框，后面的按钮有点赞或者发送评论两种状态，其中发送按钮有根据输入框中是否有字分为可点击和不可点击两种状态。需求：没有文字，没有聚焦——点赞没有文字，聚焦——灰色发送有文字——红色发送如果用JS实现，需要监听输入框的change和focus事件，比较麻烦。但是用CSS中的伪类就可以实现相近效果。<input type="text" class="input" required> <div class="like">点赞</div> <div class...
这篇文章主要给大家介绍了利用CSS3伪元素实现逐渐发光的方格边框的相关资料，文中给出了详细的示例代码供大家参考学习，对大家具有一定的参考学习价值，需要的朋友们下面来一起看看吧。本文介绍的是一个使用伪元素来实现边框逐渐发光的代码，主要用到scale和opacity这两个属性。下面来看看详细的介绍：效果图如下：HTML代码：<p class="light"><img src="http://tva2.sinaimg.cn/crop.0.0.180.180.180/6830a53bjw8f2qo4xzc2zj20500...
如何使用CSS中伪元素before和after？本篇文章就来给大家分享关于CSS中伪元素before和after的使用方法。::before和::after是什么？before和after的描述如下元素::before {content:插入的内容;} 元素::after {content:插入的内容;}content：输入要插入的部分内容要在content中插入字母和符号，请用“”括起来并输入。要在content中插入图像和声音，请输入url（目标路径）。也可以为同一元素指定before和after。CSS3中before和after等...
伪类可以通过link,hover等方法给选择器添加特殊效果，伪元素通过：first-line添加首行样式，：first-letter添加首字母样，以下将详细介绍这两方面的内容伪类它是选择html文档的某些部分的方式，表示随着时间的推移或通过用户干预进入或者退出时元素的动态状态，原则上不属于html文档树本身及其元素或者是属性，其实CSS伪类是用来添加一些选择器的特殊效果，与伪元素不同，伪类可以出现在选择器链中的任何位置。例a：link 表示未访问...
熟悉前端的人都会听过css的伪类与伪元素，然而大多数的人都会将这两者混淆。本文从解析伪类与伪元素的含义出发，区分这两者的区别，并且列出大部分伪类与伪元素的具体用法，即使你有用过伪类与伪元素，但里面总有一两个你没见过的吧。 1.伪类与伪元素 先说一说为什么css要引入伪元素和伪类，以下是css2.1 Selectors章节中对伪类与伪元素的描述： CSS introduces the concepts of pseudo-elements and pseudo-classes to per...
伪类作用于整个元素，比如： a:link{color:#111;} a:hover{color:#222;} div:first-child{color:#333;} 尽管这些条件都不是基于Dom的，但结果没一个都是作用于一个完整的元素，比如整个链接，段落，div等等； 伪元素作用于元素一部分，比如： p::first-line{color:#555;} p::first-letter{color:#666;} 伪元素作用于元素的一部分，一个段落的第一行或...
css伪元素和伪类对于刚学习css的同学来说可能会容易混淆，官方文档中解释：CSS 伪类用于向某些选择器添加特殊的效果，CSS 伪元素是用于将特殊的效果添加到某些选择器。那么，css伪元素和伪类的区别究竟在哪？本文将给大家细细的说道说道。首先可以明确两点，第一：两者都与选择器相关，第二：就是添加一些“特殊”的效果。这里特殊指的是两者描述了其他 css 无法描述的东西。伪类种类伪类作用:active将样式添加到被激活的元素:focu...
CSS伪元素（pseudo elements）不是DOM元素，因此你无法直接选择到它们。 假设有如下HTML代码：techbrood introduction和CSS代码：.techbrood:before { width: 0; }现在你想在某个元素的click事件中动态的把techbrood:before的width属性设置为100%， 有两个方法，一个是添加新的样式：$('head').append(".techbrood::before{ width:100% }");（注意该方法将影响所有的class为techbrood的元素） 另外一个方法是为该元素添加新类，并通...
CSS伪元素非常强大，它经常被用来创建CSS三角形提示，使用CSS伪元素可以实现一些简单的效果但又不需要增加额外的HTML标签。有一点就是Javascript无法获取到这些CSS属性值，但现在有一种方法可以获取到： 看看下面的CSS代码：.element:before {content: NEW;color: rgb(255, 0, 0); }.element:before {content: NEW;color: rgb(255, 0, 0); }为了获取到.element:before的颜色属性，你可以使用下面的代码：var color = window.getCom...
CSS伪元素非常强大，它经常被用来创建CSS三角形提示，使用CSS伪元素可以实现一些简单的效果但又不需要增加额外的HTML标签。有一点就是Javascript无法获取到这些CSS属性值，但现在有一种方法可以获取到： 看看下面的CSS代码： .element:before {content: NEW;color: rgb(255, 0, 0); }.element:before {content: NEW;color: rgb(255, 0, 0); }为了获取到.element:before的颜色属性，你可以使用下面的代码： var color = window.getC...