1.E::selection

2.E::placeholder


1. E::selection

设置对象被选择时的样式。

需要注意的是,::selection只能定义被选择时的background-color,color及text-shadow(IE11尚不支持定义该属性)。

兼容性:

<div class="_selection">
<p>1. Selecting master branch will publish your site from the master branch. This is useful for repositories dedicated to website content.</p>
<p>2. Selecting master branch /docs folder will publish from the /docs folder of your master branch. </p>
<p>3. This lets you maintain documentation and code together on one branch, and open source maintainers can accept contributions for both in a single pull request.</p>
</div>
._selection p::selection{
background: #eb4960;
color: #ffffff;
}

预览:


2. E::placeholder

设置对象文字占位符的样式

::placeholder 伪元素用于控制表单输入框占位符的外观,它允许开发者/设计师改变文字占位符的样式,默认的文字占位符为浅灰色。
当表单背景色为类似的颜色时它可能效果并不是很明显,那么就可以使用这个伪元素来改变文字占位符的颜色。
需要注意的是,除了Firefox是 ::[prefix]placeholder,其他浏览器都是使用 ::[prefix]input-placeholder
Firefox支持该伪元素使用text-overflow属性来处理溢出问题。

兼容性:

代码示例

<div class="_placeholder">
<h1>::placeholder</h1>
<input type="text" placeholder="::placeholder的演示示例"/>
<input type="text" placeholder="::placeholder的演示示例"/>
<input type="text" placeholder="::placeholder的演示示例"/>
<input type="text" placeholder="::placeholder的演示示例"/>
<input type="text" placeholder="::placeholder的演示示例"/>
</div>
._placeholder input {
width: 400px;
margin-bottom: 10px;
}
._placeholder input:nth-child(3n)::-webkit-input-placeholder {
color: #eb4960;
}
._placeholder input:nth-child(3n):-ms-input-placeholder { /* IE10+ */
color: #eb4960;
}
._placeholder input:nth-child(3n):-moz-placeholder{ /* Firefox4-18 */
color: #eb4960;
}
._placeholder input:nth-child(3n)::-moz-placeholder{ /* Firefox19+*/
color: #eb4960;
}
._placeholder input:nth-child(3n+1)::-webkit-input-placeholder {
color: #999999;
}
._placeholder input:nth-child(3n+1):-ms-input-placeholder { /* IE10+ */
color: #999999;
}
._placeholder input:nth-child(3n+1):-moz-placeholder{ /* Firefox4-18 */
color: #999999;
}
._placeholder input:nth-child(3n+1)::-moz-placeholder{ /* Firefox19+*/
color: #999999;
}
._placeholder input:nth-child(3n+2)::-webkit-input-placeholder {
color:#008aff;
}
._placeholder input:nth-child(3n+2):-ms-input-placeholder { /* IE10+ */
color:#008aff;
}
._placeholder input:nth-child(3n+2):-moz-placeholder{ /* Firefox4-18 */
color:#008aff;
}
._placeholder input:nth-child(3n+2)::-moz-placeholder{ /* Firefox19+*/
color:#008aff;
}

效果:

CSS伪对象选择符整理的更多相关文章

  1. #8.10.16总结# 属性选择符 伪对象选择符 CSS的常用样式

    属性选择符 E[att] E[att="val"] E[att~="val"] E[att^="val"] E[att$="val ...

  2. CSS Pseudo-Element Selectors伪对象选择符

    一: CSS3将伪对象选择符(Pseudo-Element Selectors)前面的单个冒号(:)修改为双冒号(::)用以区别伪类选择符(Pseudo-Classes Selectors),但以前的 ...

  3. css伪类选择符

    1):link/:visited/:hover/:active (爱恨原则 love/hate)2):first-child/:last-child/:only-child/:nth-child(n) ...

  4. CSS(二)选择符

     2019-04-11 22:14:23 1.类型选择符(标签选择符)  html中所有的标签都可以直接对元素选择  p em i a html body.....   特点:对页面中所有当前类型的元 ...

  5. CSS3初学篇章_2(伪类选择符)

    id与class选择符 id与class选择符都是自定义标签名字的选择符,但id是唯一的,class却可重复使用. id选择符以"#"定义 class选择符以".&quo ...

  6. CSS那些事儿-阅读随笔1(CSS简介与选择符)

    最近开始详细钻研CSS有关的知识,参考资料是<CSS那些事儿>.将把在此过程中的收获进行记录,方便以后的学习. 一.CSS简介 1.什么是CSS CSS全称为Cascading Style ...

  7. CSS知识点:选择符

    一.选择符的种类 1)通配选择符 它用来给页面所有的元素设置样式 *{margin:0;padding:0;}.但是实际当中不建议这么用,页面中用到了哪些样式,就统一设置样式,因为*影响性能.也可以给 ...

  8. CSS选择符-----伪类选择符

    Element:hover E:hover { sRules }  设置元素在其鼠标悬停时的样式 <!DOCTYPE html> <html> <head> < ...

  9. 学习CSS记录:选择符优先级

    1.标有!important 关键字声明属性. 2.HTML中的CSS样式属性. 3.作者编辑的CSS文件模式属性. 4.用户设置的样式. 5.浏览器默认的样式. ------------------ ...

随机推荐

  1. [Angular2 Router] Style the Active Angular 2 Navigation Element with routerLinkActive

    You can easily show the user which route they are on using Angular 2’s routerLinkActive. Whenever a ...

  2. [NodeJS] Deploy a Node Application with the Now CLI

    Now offers a friction-free way to deploy node applications right from the terminal. In this lesson, ...

  3. Cocos2d-x 3.1 内存管理机制

    Cocos2d-x使用的内存管理方式是引用计数.引用计数是一种非常有效的机制.通过给每个对象维护一个引用计数器,记录该对象当前被引用的次数.当对象添加一次引用时,计数器加1:而对象失去一次引用时.计数 ...

  4. oc-32-@property示例

    Goods.h #import <Foundation/Foundation.h> typedef struct{ int year; int month; int day; } MyDa ...

  5. JS分割字符串并放入数组的函数

    JS分割字符串并放入数组的函数: var InterestKeywordListString = $("#userInterestKeywordLabel").html();  v ...

  6. GNU-ARM汇编

    GNU ARM 汇编指令(2008-10-29 00:16:10) 标签:linux gnu arm 汇编指令 it 分类:技术文摘 第一部分 Linux下ARM汇编语法尽管在Linux下使用C或C+ ...

  7. LeetCode33 Search in Rotated Sorted Array

    题目: Suppose a sorted array is rotated at some pivot unknown to you beforehand. (i.e., 0 1 2 4 5 6 7  ...

  8. label添加手势(触摸改变其背景颜色)

    - (BOOL)application:(UIApplication *)application didFinishLaunchingWithOptions:(NSDictionary *)launc ...

  9. [Java] SSH框架笔记_SSH三大框架的工作原理及流程

    Hibernate工作原理及为什么要用? 原理:1.通过Configuration().configure();读取并解析hibernate.cfg.xml配置文件2.由hibernate.cfg.x ...

  10. jQuery选择器之表单对象属性过滤选择器Demo

    测试代码: 08-表单对象属性过滤选择器.html <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" ...