伪类基于当前元素所处的状态或具有的特性，用于设置元素自身的特殊效果。a：link 规定所有未被点击的链接；a：visited 匹配多有已被点击过的链接；a：active 匹配所有鼠标按下未松开的元素；a：hover 匹配所有鼠标移入/悬停在元素上的元素；：focus 被选中的元素；：first-child 元素的第一个子元素；：lang允许创作者来定义指定元素中使用的语言； 伪类的规定：由于css的优先级问题，下面四个伪类需要按顺序书写，否则会出现...
伪类选择器一、基于a标签。1、:hover 选择鼠标滑过的超链接元素2、:active 选择鼠标单击中的超链接元素3、:link 选择未被访问的超链接元素4、:visited 选择已经被访问过的超链接元素二、基于input标签。1、:focus 表示某个input元素被选中的情况。2、:enable 启用input元素3、:disable 禁用input元素三、:before和:after伪类选择器1.:before 在一个元素之前添加一个元素2.:after 在一个元素之后添加一个...
CSS 3 现状 兼容性差，需添加私有前缀／移动端优于PC端／不断改进中／渐进增强原则／考虑用户群体／遵照产品的方案 ； CSS3手册 需要阅读其--阅读及使用指引[]表示全部的可选项 || 或者 | 表示 多选一 ? 表示 0个或1个* 表示 0个或多个{}表示范围 {A}代表出现A次 ，{A,B}代表出现A次以上B次以下 ，B可以省略，{A,} 代表至少出现A次，无上限# 出现1次以上，以逗号隔开，可以选择后面跟大括号的方式精确表示重复次数：...
1、p:first-of-type 选择属于其父元素的首个 <p> 元素的每个 <p> 元素2、p:first-child , 匹配属于其父元素中的首个子元素(子元素:first-child) table tr:first-child{}3、p:last-of-type 选择属于其父元素的最后 <p> 元素的每个 <p> 元素。4、p:last-child 匹配属于其父元素中的最后一个子元素 table tr:last-child{}5、p:only-of-type 选择属于其...
伪类选择器，和一般的DOM中的元素样式不一样，它并不改变任何DOM内容。只是插入了一些修饰类的元素，这些元素对于用户来说是可见的，但是对于DOM来说不可见。伪类的效果可以通过添加一个实际的类来达到。a:link|a:visited|a:hover|a:active在 CSS 定义中，a:hover 必须被置于 a:link 和 a:visited 之后，才是有效的，a:active 必须被置于 a:hover 之后，才是有效的。 由于状态是动态变化的，所以一个元素达到一个特定状态时，它可...
最近看到一些关于伪类的文章和实例，感觉印象不怎么深刻，今天在项目中出现了效果如图，记下来在文字两遍各有一条横线.1.页面局部区域布局div->span->汉字（小户型）2.span上有class为quote-right <div><span class="quote-right">小户型</span></div>3那么在css中增加其对应的伪类.quote-right:before,.quote-right:after{content: '';display:inline-block;width: 20%;margin: 5px 5%;border-bottom: 1px solid #cacaca;}
.qu...
1 CSS3 结构伪类选择器1.E:root匹配E元素所在的根元素 即：html2. E:nth-child(n)（1）匹配E元素的父元素中第n个子元素，（2）且该位置的子元素类型必须是E类型。否则无效p:nth-child(1){color:red}<div> <p>这是红色的<p></div> <div> <h1>这是第一个子元素 但不是P类型，不是红色</h1> < p>这是黑色的 注意对比 nth-of-type(1) </p></div> 3. E:nth-of-type(n)匹配E的父...
伪类这个叫法源自它们与类相似，但实际上并没有类会附加到标记中的标签上。伪类分两种。UI伪类会在HTML元素处于某个状态时(比如鼠标指针位于链接上)，为该元素应用CSS样式。结构化伪类会在标记中存在某种结构上的关系时(比如某个元素是一组元素中的第一个或最后一个)，为相应元素应用CSS样式。一.UI伪类1.链接伪类Link:此时，链接就在那儿等着用户点击。Visited:用户此前点击过这个链接。Hover:鼠标指针正悬停在链接上。Active:链接...
p:nth-child(2)要满足两个条件，1：选择的是p元素的父元素的第二个子元素 2：选择的第二个子元素必须是p元素，如果不满足，则将不显示 p:nth-of-type(2)选择父元素下的第二个p元素原文：http://www.cnblogs.com/jingxinqiaodaima/p/6252711.html
1. 匹配第一个 <p> 元素在下面的例子中，选择器匹配作为任何元素的第一个子元素的 p 元素：<html>
<head>
<style type="text/css">
p:first-child {color: red;}
</style>
</head><body>
<p>some text</p>
<p>some text</p>
</body>
</html>2.匹配所有 <p> 元素中的第一个 <i> 元素<html>
<head>
<style type="text/css">
p > i:first-child {font-weight:bold;}
</style>
</head><body>
<p>some <i>text</i>. some <i>text</i>....
先上学习地址：http://www.htmleaf.com/Demo/201610234136.html作者对轮播图左右按钮的处理方法一改往常，不是简单地用btn.prev+btn.next的图片代替，而是用纯css制作。第一个是left按钮，即prev：.vmc-arrow-left:after {content: "\e079";
}第二个是right按钮的，也就是next下一张的按钮：.vmc-arrow-right:after {content: "\e080";
}最后是二者共同的样式代码：.vmc-arrow-left:after, .vmc-arrow-right:after {content: ‘‘;...
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...
CSS3样式：/* RADIO */.button-holder { width: 100%;}.regular-radio { display: none;}.regular-radio + label { -webkit-appearance: none; background-color: #fafafa; border: 1px solid #cacece; box-shadow: 0 1px 2px rgba(0,0,0,0.05), inset 0px -15px 10px -12px rgba(0,0,0,0.05); padding: 9px; border-radius: 50px; display: inline-block; position: relative;}.regular-radio:checked + label:after { content: ‘...
selection[CSS4]应用于文档中被用户高亮的部分（比如使用鼠标或其他选择设备选中的部分）。（IE8及以下不支持）（火狐-moz-selection）first-line选择每个 <p> 元素的首行，并为其设置样式。first-letter选择每个 <p> 元素的首字母，并为其设置样式。before在每个 <p> 元素的内容之前插入新内容。after在每个 <p> 元素的内容之后插入新内容。cue backdrop placeholder marker spelling-error grammar-error 与伪类一样， 伪元素添加...
CSS3新增了很多强大的选择器 它可以让我们少写一些js事件脚本 我们先来看看各个版本的选择器有哪些 注： ele代表element元素 attr代表attribute属性，val代表value属性值 :xxx都属于伪类选择器，::xxx都属于伪元素选择器 有名字的选择器我尽量细分了CCS1选择器选择器类型示例说明.class类选择器.demo选择所有class包含demo的元素#idID选择器#unique选择所有id是unique的元素ele元素选择器p选择所有p元素ele,ele并列选择器h1,h2选择...
