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 ...
随机推荐
- CF235C Cyclical Quest(SAM)
/* 统计串的出现次数显然可以在自动机上匹配出来即可 但是每次都挨个匹配的话会时间爆炸 那么考虑我们把串复制一份, 然后一起在后缀自动机上跑, 当我们匹配长度大于该串长度的时候强行失配即可 可能会有旋 ...
- three.js学习:初学three.js,从立方体开始
目前three.js是浏览器展现3D效果的一个很强大的js工具,遗憾的是没有特别系统而全面的文档(threejs官方文档感觉有些缺漏,可以和WebGL中文网的threejs教程对比着看).好了,根据W ...
- Linux 文件,目录,压缩,解压缩操作
2018/11/20 1.find -name 'pom.xml' | xargs perl -pi -e 's|oldString|newString|g' (批量替换) ( 命令行中使用Perl ...
- activiti源代码的细节
由于activiti-explorer-5.14的web演示程序使用的是vaadin服务器端ui组件,程序关键点找起来还是有些麻烦,vaadin的这种web框架,就是不需要专门美术界面人员,只需要程序 ...
- Eclipse中JSP生成的class文件去了哪里?
转自:http://www.cnblogs.com/xing901022/p/4352999.html 首先应该了解的是Tomcat在Eclipse的映射关系,参考前一篇博文所述:Tomcat的服务器 ...
- UVA-10020-贪心
题意:给你一些数轴上的线段,要求寻找出某些线段能够完全覆盖[0,M],并且取的线段数目最小. 解题思路: 贪心思路, 1.每个线段都有一个L和R,代表它的起点和终点,对于所有R <= 0 , ...
- 关于php中的exec命令
这个命令 一般是被禁用的 一些特殊需求的时刻 可以启用 比如 调用系统上的一些数据或者命令 $command ='/www/wwwroot/t.6328.net/Public/cfile/test' ...
- javax.validation.UnexpectedTypeException: HV000030: No validator could be found for constraint 'javax.validation.constraints.Size' validating type 'java.util.Date'.
开始是 javax.validation.UnexpectedTypeException: No validator could be found for type: java.lang.Intege ...
- 34. Win7_x64安装oracle11g出现DIM-00019
Win7_x64安装oracle11g出现如下异常处理方式 DIM-00019:创建服务时出错. O/S-ERROR:(OS 1726)远程过程调用失败. 点击弹出的错误框上的确定按钮后,继续弹出错误 ...
- jquery下的正反选操作
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...