css3选择器补充
一、关系选择器
1、E+F （E元素下一个满足条件的兄弟元素节点）
<style>
div + p{
background-color:red;// 第一个p元素变色
}
</style>
<body>
<div>div</div>
<p>1</p>
<p>2</p>
<p>3</p>
</body>
<style>
div + .demo{
background-color:red;// 第一个p元素变色
}
</style>
<body>
<div>div</div>
<p class="demo">1</p>
<p>2</p>
<p>3</p>
2、E~F （E下所有满足条件的兄弟元素节点）
二、属性选择器
1、E[att~=“val”]
2、E[att | =“val”] （以val为开头 或 以val- 为开头的元素）
<style>
div[class|='a']{
background-color:red; //1、2变色
}
</style>
<body>
<div class="a">1</div>
<div class="a-test">2</div>
<div class="b-test">3</div>
3、E[att^=“val”]
4、E[att$=“val”]
5、E[att*=“val”]
三、伪元素选择器
1、E::placeholder （注意兼容性）
<style>
input{
border:1px solid black;
}
input::placeholder{
color:orangered; //改变一下“请输入用户名”字体颜色
}
</style>
<body>
<input type="text" placeholder="请输入用户名">
</body>
2、E::selection
四、伪类选择器 （被选择元素的一种状态）
1、E:not (s) :root （跟标签选择器，包含html） E:target
<style>
div:not(.test){
background-color:red;
}
</style>
<body>
<div class="demo">1</div>
<div class="demo">2</div>
<div class="test">3</div>
</body>
//或写成
div:not([class="demo"]){
background-color:red;
}
not应用实例：
<style>
*{
margin:0;
padding:0;
}
ul{
width:300px;
border:1px solid #999;
}
li{
height:50px;
margin:0 5px;
}
li:not(:last-of-type){
border-bottom:1px solid black;
}
</style>
<body>
<ul>
<li>content</li>
<li>content</li>
<li>content</li>
<li>content</li>
<li>content</li>
<li>content</li>
<li>content</li>
</ul>
</body>
//效果如下
<style>
div:target{
border:1px solid black;
}
/* location.hash = xxx （被标记成锚点之后） */
</style>
<body>
<a href="#box1">div1</a>
<a href="#box2">div2</a>
<div id="box1">1</div>
<div id="box2">2</div>
</body> 小练习：
2、E:first-child E:last-child E:only-child E:nth-child (n) E:nth-last-child (n) （这些元素都考虑其他子元素的影响）
<style>
P:first-child{
background-color:red;
}
</style>
<body>
<div>
<p>1</p>
<p>2</p>
<p>3</p>
</div>
</body>
<style>
P:first-child{
background-color:red;//第一个p元素不会变红，因为第一个子元素是span
}
</style>
<body>
<div>
<span>5</span>
<p>1</p>
<p>2</p>
<p>3</p>
</div>
<style>
p:nth-child(2n+1){
background-color:red;//1、3、5变色 （css从1开始查）
}
</style>
<body>
<div>
<p>1</p>
<p>2</p>
<p>3</p>
<p>4</p>
<p>5</p>
</div>
3、E:first-of-type E:last-of-type E:only-of-type （不受其他类型元素干扰）
4、E:nth-of-type(n) E:nth-of-last-type(n) （不受其他类型元素干扰） （常见）
5、E:empty（元素为空，无节点，注释也算做空） E:checked E:enabled E:disabled
<style>
input:checked + span{
background:greenyellow;
}
input:checked + span::after{
content:"恭喜中奖";
}
</style>
<body>
<label>
一个小惊喜
<input type="checkbox">
<span></span>
</label>
</body>
6、E:read-only E:read-write
css3选择器补充的更多相关文章
- css3选择器（一）
直接开始正文. 一.css3同级元素通用选择器[update20161228] 选择器:E~F 匹配任何在E元素之后的同级F元素 Note:E~F选择器选中的是E元素后面同级元素中的全部F元素. 例: ...
- 总结30个CSS3选择器
或许大家平时总是在用的选择器都是:#id .class 以及标签选择器.可是这些还远远不够,为了在开发中更加得心应手,本文总结了30个CSS3选择器,希望对大家有所帮助. 1 *:通用选择器 ;; ...
- 总结30个CSS3选择器（转载）
或许大家平时总是在用的选择器都是:#id .class 以及标签选择器.可是这些还远远不够,为了在开发中更加得心应手,本文总结了30个CSS3选择器,希望对大家有所帮助. 1 *:通用选择器 * ...
- CSS3 选择器——属性选择器
上一节在<CSS3选择器——基本选择器>中主要介绍了CSS3选择器的第一部分,这节主要和大家一起来学习CSS3选择器的第二部分——属性选择器.属性选择器早在CSS2中就被引入了,其主要作用 ...
- css3 选择器（三）
接css3选择器(一) 接css3 选择器(二) 这篇和前两篇内容相关性不大,主要是涉及到一些css3的状态选择器,所以标题从一开始. 一.[:enabled]选择器 一看这个属性就知道是专为表单元素 ...
- CSS3选择器介绍
1.css3属性选择器 <!DOCTYPE html> <html lang="en"> <head> <meta charset=&qu ...
- CSS3 选择器——基本选择器
CSS的选择器,我想大家并不会陌生吧,因为天天在使用,但对于CSS3的选择器,要运用的灵活到位,我想对很多朋友还是一定的难度,特别是CSS3中的:nth选择器.那么从现在开始我们先丢开他们版本的区别, ...
- CSS3选择器的研究，案例
在上一篇CSS3选择器的研究中列出了几乎所有的CSS3选择器,和伪类选择器,当是并没有做案例的研究,本想在那篇文章里面写,但想想如果把案例都写在那篇文章里面,对于查找来说就不是很方便,所有另开一篇来讲 ...
- css3 选择器（二）
接css3选择器(一) 八.结构性伪类选择器[:nth-child(n)] :nth-child(n)选择器用来匹配某个父元素的一个或多个特定的子元素,和jquery中一样. 其中"n&qu ...
随机推荐
- cobbler部署centos6与centos7系列
cobbler部署centos6与centos7系列 转载自:http://www.jianshu.com/p/a4bed77bf40d 版权声明:完全抄自 http://www.jianshu.co ...
- solr如何让全词匹配结果在最前面
在全文搜索中默认排序是按照匹配度权值score排序的,权值越大位置越靠前,那为什么有很多时候全词匹配反而不在最前面那,其实很简单因为全词匹配权值也就是100,但是还有很多权值大于100的排在了前面. ...
- c# 中实用包，实用dll。
Aspose.cell:用与操作Excel,生成,导入导出等. ICSharpCode.SharpZipLib.dll:用户压缩及解压ZIP包,根据需要也可以加密.
- vuejs实现瀑布流布局（三）
前面写过vuejs实现的瀑布流布局,<vuejs实现瀑布流布局(一)>和<vuejs实现瀑布流布局(二)>也确实实现了瀑布流布局,但是这个是基于SUI-Mobile实现的无限滚 ...
- [Unity移动端]Touch类
Touch类的信息只能在移动端(触摸屏)上能够获取,在编辑器上是不能获取到的.因此,为了方便测试,可以打包apk后在模拟器上跑: unity打包apk:https://www.jianshu.com/ ...
- 8.2.1.3 Range 优化
range access method 方法使用单个索引去取回数据表的子集,它包含一个或多个索引值区间.Rang它能对单个部分索引或者多个部分索引使用.以下章节给出详细的描述 去解释怎么从where语 ...
- 8.2.优化SQL语句
8.2.优化SQL语句 数据库应用程序核心操作逻辑都是通过执行SQL语句来执行,不管是直接通过解释器还是通过后台API提交. 调优手册里面的这一节内容帮助各种各样MySQL程序加快速度.手册包括SQL ...
- 省市区联动JS脚本
省市区联动JS脚本 /* ***说明:省市区联动JS脚本 ***作者:Jerry Yuan */ var province=[{id:0,name:'选择省'},{id:11,name:" ...
- RDD、DataFrame、Dataset
RDD是Spark建立之初的核心API.RDD是不可变分布式弹性数据集,在Spark集群中可跨节点分区,并提供分布式low-level API来操作RDD,包括transformation和actio ...
- asp.net(C#)文件操作
//创建文件夹路径 string path = "\\Files\\"; //判断文件夹是否存在 if (!Directory.Exists(path)) { Direct ...