CSS3新添加的选择器
---条件选择器:--- .ccc[cusid*= value] { backgroud-color:#0094ff; } //表示使用了class="ccc"元素自定义属性cusid的值包含value字符的即可使用如下样式。 [cusid^= value] { backgroud-color:#0094ff; } //表示元素自定义属性cusid的值以value字符开头的即可使用如下样式。 [cusid$= value] { backgroud-color:#0094ff; } //表示元素自定义属性cusid的值以value字符结尾的即可使用如下样式。 ---伪选择器:--- p:first-line { backgroud-color:#0094ff; }//将p的第一行内容变使用该样式。 p:first-letter { backgroud-color:#0094ff; }//将p的第一个子或其第一个单词的首字母使用该样式。 li:before { content:"a"; color:red; }//给所有的li之前加一个字母a并且为红色(若为after则为在后面追加该内容)。 ---结构性伪类选择器:--- :root { backgroud-color:#0094ff; }//给根级元素使用样式(范围要大于body)。 :empty { backgroud-color:#0094ff; }//给标签内容为空的标签设置上背景。 body *:not(h1) { backgroud-color:#0094ff; }//给body元素使用样式但除了其中的h1。 :target { backgroud-color:#0094ff; }//若一个超链接href绑定了一个元素(如:<a href="#A"></a>..<div id="A"></div>),当点击超链接之后该元素会使用其样式。 ---以ul中的li为例:---
li:first-child
{
backgroud-color:#0094ff;
}//将第一个li变色
li:nth-child(3)
{
backgroud-color:#0094ff;
}//将第三个li变色
li:nth-child(even)
{
backgroud-color:#0094ff;
}//将偶数(odd为奇数)li变色
---以input,type="email"表单元素为例:--- input[type="email"]:invalid
{
backgroud-color:red; }//如果写入的表单内容不合法则显示红色
input[type="email"]:valid
{
backgroud-color:#0094ff; }//如果写入的表单内容合法则显示#0094ff ---选中文本区域变色---
::selection
{
backgroud-color:green;
}//选中的文本区域变为绿色 input[type="text"]::selection
{
backgroud-color:green;
}//所有input,text元素内选中的文本区域变为绿色
---控制兄弟元素---
div~span
{
background:red;
}//所有div的span兄弟变红色
如:2,3变色,而1不变色
<div>
<span>1</span>
</div>
<span>2</span>
<span>3</span>
---在一个元素前后加样式(并不添加元素)---
#a:before{
/*这里写123hello前边的样式代码*/
}
#a:after{
/*在这里写123hello后边的样式代码*/
}
<div id="a">123hello</div>
CSS3新添加的选择器的更多相关文章
- css3新增加的选择器
css3新增加的选择器 一.属性选择器: E[attr] 只要有属性名E[attr=value] 属性名=属性值E[attr~=blue] 包含这个blue整个单词就可以E[attr^=c] 以这个字 ...
- CSS3新添加的属性
1.圆角设置 border-radius:15px 50px 30px 5px; /*四个值: 第一个值为左上角,第二个值为右上角,第三个值为右下角,第四个值为左下 角. 三个值: 第一个值为左上角, ...
- [转]深入了解 CSS3 新特性
简介 CSS 即层叠样式表(Cascading Stylesheet).Web 开发中采用 CSS 技术,可以有效地控制页面的布局.字体.颜色.背景和其它效果.只需要一些简单的修改,就可以改变网页的外 ...
- 总结CSS3新特性(Transform篇)
概述: CSS3新添加的Transform可以改变元素在可视化区域的坐标(这种改变不会引起文档的重排,只有重排),以及形状,还有些3D形变.结合 Animation(这里以后会有个链接的) 能实现酷炫 ...
- HTML5新规范和CSS3新特性
1.HTML5最新规范(HTML5是HTML.XHTML以及HTML.DOM的新标准) ①用于绘画canvas元素 ②用于媒介回放的video和audio元素 ③对本地离线存储的更好支持 ④新的特俗内 ...
- css3新的选择器
CSS3新的选择器 ele[att^="val"] /*属性att的值以val开头的元素*/ ele[att$="val"] /*属性att的值以val结尾的元 ...
- 两点补充——CSS3新属性以及弹性布局
CSS3 新属性 一.[ CSS3新增属性前缀 ] 1.-webkit-:chrome/safari 2.-moz-:火狐 3.-mo-:IE 4.-o-: Opera 欧朋 二 .[CSS 长度单位 ...
- H5 和 CSS3 新特性
博客地址:https://ainyi.com/52 H5 新特性 语义化标签:header.footer.section.nav.aside.article 增强型表单:input 的多个 type ...
- 01-移动端开发教程-CSS3新特性
1. 移动端开发课程概述 移动互联网的兴起,让移动端的开发迅速蹿红.对于前端开发者来说,移动端的开发已经占据了他们大部分工作时间.接下来老马带大家一起学习移动端开发的相关前端开发技术. 这边课程内容包 ...
随机推荐
- easyui的validatebox重写自定义验证规则的几个实例
validatebox已经实现的几个规则: 验证规则是根据使用需求和验证类型属性来定义的,这些规则已经实现(easyui API): email:匹配E-Mail的正则表达式规则. url:匹配URL ...
- Unity3D脚本18:可视化辅助设置类 Gizmos
Gizmos 类 Gizmos用于场景中给出一个可视化的调试或辅助设置. 所有的Gizmos绘制都必须在脚本的OnDrawGizmos或OnDrawGizmosSelected函数中完成. OnD ...
- How far away[HDU2586]
How far away ? Time Limit: 2000/1000 MS (Java/Others) Memory Limit: 32768/32768 K (Java/Others) T ...
- 有关g++编译调试的问题
打了个指针版的treap,想用gdb调试,用gcc -g ×××.cpp -o a 时却报错了——直接用gcc编译却不会报错,提示:对‘operator new(unsigned int)’未定义的引 ...
- Linux Mint 没有 language support 语言支持解决方案
打开新立得软件管理器在右边找到有关语言的安装后,language support就会出现
- Android之adb异常
Android使用adb模拟器时出现"unable to establish connection to adb"."ADB server didn't ACK" ...
- php 即使客户端或者服务器断开(如关掉浏览器)脚本也可以继续执行
<?php ignore_user_abort(); // run script in background set_time_limit(0); // run script forever $ ...
- 利用java实现的一个发送手机短信的小例子
今天闲来无事,在微博上看到一个关于用java实现的一个发送手机短信的程序,看了看,写的不太相信,闲的没事,把他整理下来,以后可能用得着 JAVA发送手机短信,流传有几种方法:(1)使用webservi ...
- CentOS6.5的openssl升级
CentOS6.5的openssl升级:(修复心脏漏血漏洞) [root@linux1 ~]# rpm -qi openssl|grep VersionVersion : 1.0.1e Vendor: ...
- php 实现qq第三方登录
学习之前,请大家先看一下oAuth协议. 首先呢,我们进入QQ互联的官方网站 http://connect.qq.com登入我们自己的QQ号,没有QQ号的小伙伴可以忽略本篇博文分享!