1、和链接（<a>标签）相关的a:link--定义未访问的链接；a:visited--定义已经访问（根据浏览器中的历史记录）的链接；a:hover--定义鼠标滑过时的样式；a:active--定义鼠标单击时的样式2、和段落（<p>标签）相关的:first-letter 创建下落的首字母，使得首字母更大更粗（只能用于块级元素）；:first-line 用一种不同的颜色定义首行在CSS3中为了区分伪类和伪元素，表示时在伪元素前面加两个冒号，如下： ::first-letter和::f...
一、阴影1.1、文字阴影1.2、盒子阴影二、背景2.1、背景图像尺寸2.2、背景图像显示的原点三、伪元素3.1、before3.2、after3.3、清除浮动四、圆角与边框4.1、border-radius 圆角4.2、边框图片border-image五、变形 transform5.1、rotate()2D旋转5.2、设置原点 transform-origin 5.3、平移 translate() 5.4、缩放 scale5.5、斜切扭曲skew 六、渐变七、透明7.1、opacity7.2、transparent与图片透明7.3、RGBA八、动画8.1、过渡动画8.2、...
伪元素：（css3中将所有伪元素前变成了两个冒号，即::first-letter、::first-line、::before、::after、::selection。目的是为了区分伪元素与伪类。对于IE6~IE8，仅支持单冒号写法）1.::first-letter ：用来选择文本块的第一个首字母。2.::first-line ：用来匹配元素的第一行文本。3.::befor 和 ::after ：创建一个作为当前元素子元素的伪元素。常通过 content 属性来为一个元素添加修饰性的内容。 此元素默认为行内元素。:before...
原文:CSS中伪类及伪元素用法详解伪类的分类及作用：注：该表引自W3School教程伪元素的分类及作用：接下来让博主通过一些生动的实例（之前的作业或小作品）来说明几种常用伪类的用法和效果，其他的读者可以自己尝试： :active 大致效果为用鼠标点击时，元素增加特效，鼠标松开时，特效消失。多用在按钮的点击上。 写法：这里id为box的是一div块，在css中首先设置了他的基本样式，下面为加入:active伪类后需要修改的样式。未点击时：...
思路思路很简单，就是一个字写两遍，一个字只显示部分，不过不能真的把一个字写两遍。这里就需要用到CSS伪元素:before和:after，记住这个“伪元素”的“伪”字，表明它本来是不存在的。我们的方法就是在伪元素里放置相同的字符，只显示半个，而原字符显示另外一半，最后把它们拼成一个字。CSS Code CSS Code复制内容到剪贴板.hf { display: inline-block; font-size: 80px; line-height...
首先，关于伪元素的语法：有的时候单冒号也能用，但最好写双冒号。伪类：匹配的是元素(不同状态或结构的)。伪元素：匹配的是元素中的一部分内容(首字符，首行文本)。::first-letter匹配某元素的首字符。例： <!DOCTYPE html><html><head><title>test010_伪元素选择器_::first-letter</title><style type="text/css">p::first-letter{color:red;}</style></head><body><p>hello world</p></body></html> 结果：::first-line匹配某元...
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title>Title</title><style>.container{width: 1000px;margin: 10px auto;border: 1px solid red;}h3.title {color: #F2AE11;font-size: 1.3em;margin-bottom: 3em;text-align: center;font-weight: 500;line-height: 1.1;}h3.title span {display: block;/*设置为块级元素会独占一行形成上下居中的效果*/font-size: 3em;color: #212121;position: relative;/*定位横...
一、伪类和伪元素伪类和伪元素都是用来修饰不在文档树中的部分，区别在于，伪类用于当已有元素处于的某个状态时，为其添加对应的样式，这个状态是根据用户行为而动态变化的(如:hover/:active)。而伪元素则用于创建一些不在文档树中的元素，并为其添加样式(如:before/:after)。 二、常用伪类伪类用法兼容:link未访问的链接主流浏览器都支持:visited已访问的链接主流浏览器都支持:hover鼠标划过链接主流浏览器都支持:active 已选中...
伪类基于当前元素所处的状态或具有的特性，用于设置元素自身的特殊效果。a：link 规定所有未被点击的链接；a：visited 匹配多有已被点击过的链接；a：active 匹配所有鼠标按下未松开的元素；a：hover 匹配所有鼠标移入/悬停在元素上的元素；：focus 被选中的元素；：first-child 元素的第一个子元素；：lang允许创作者来定义指定元素中使用的语言； 伪类的规定：由于css的优先级问题，下面四个伪类需要按顺序书写，否则会出现...
×目录[1]动态样式[2]CSS类[3]setAttribute()[4]CSSRule对象添加[5]空样式覆盖[6]CSSRule对象删除前面的话 我们可以通过计算样式来读取伪元素的样式信息，但是却无法使用javascript来直接操作伪元素，本文以一个需求解决为例，详细介绍脚本化伪元素的6种方法需求说明 【1】为id=box的div元素添加content="前缀"的:before伪元素 【2】为已经添加:before伪元素的div元素删除伪元素 [注意]由于IE7-浏览器不支持:before伪元...
伪类选择器，和一般的DOM中的元素样式不一样，它并不改变任何DOM内容。只是插入了一些修饰类的元素，这些元素对于用户来说是可见的，但是对于DOM来说不可见。伪类的效果可以通过添加一个实际的类来达到。a:link|a:visited|a:hover|a:active在 CSS 定义中，a:hover 必须被置于 a:link 和 a:visited 之后，才是有效的，a:active 必须被置于 a:hover 之后，才是有效的。 由于状态是动态变化的，所以一个元素达到一个特定状态时，它可...
p:nth-child(2)要满足两个条件，1：选择的是p元素的父元素的第二个子元素 2：选择的第二个子元素必须是p元素，如果不满足，则将不显示 p:nth-of-type(2)选择父元素下的第二个p元素原文：http://www.cnblogs.com/jingxinqiaodaima/p/6252711.html
E:target 表示当前的URL片段的元素类型，这个元素必须是E
E:disabled 表示不可点击的表单控件
E:enabled 表示可点击的表单控件
E:checked 表示已选中的checkbox或radioE::after 生成内容在E元素后
E:not(s) 表示E元素不被匹配
E~F表示E元素毗邻的F元素E:first-line选中第一行文字E:first-letter选中第一个字E::selection 当文字被选中时触发效果【注意是双冒号】Content 属性：E:after 利用content属性在元素末尾添加内容E:before...
body{
font-family: cursive;
font-size: 14px;
}
.left{
width:150px;
height: 50px;
background: #fff;
position: relative;
margin: 50px 0 0 50px;
line-height: 50px;
text-align: center;
border: 2px solid green;
...
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>双伪元素清除浮动</title> <style type="text/css"> /* 声明清除浮动的样式 */ .clearfix:before, .clearfix:after { content: ""; display: table; } .clearfix:after { clear: both; } /* ie6 7 专门清除浮动的样式*/ .clearfix { *zoom:1; } .one { width: 500px; border: 1px solid red; } .damao { float: left; width: ...
