一、关系选择器

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选择器补充的更多相关文章
	

    
								
  1. css3选择器（一）
		
    直接开始正文. 一.css3同级元素通用选择器[update20161228] 选择器:E~F 匹配任何在E元素之后的同级F元素 Note:E~F选择器选中的是E元素后面同级元素中的全部F元素. 例: ...
    
		
    2. 
						
  2. 总结30个CSS3选择器
		
    或许大家平时总是在用的选择器都是:#id  .class  以及标签选择器.可是这些还远远不够,为了在开发中更加得心应手,本文总结了30个CSS3选择器,希望对大家有所帮助. 1 *:通用选择器 ;; ...
    
		
    3. 
						
  3. 总结30个CSS3选择器（转载）
		
    或许大家平时总是在用的选择器都是:#id  .class  以及标签选择器.可是这些还远远不够,为了在开发中更加得心应手,本文总结了30个CSS3选择器,希望对大家有所帮助. 1 *:通用选择器 *  ...
    
		
    4. 
						
  4. CSS3 选择器——属性选择器
		
    上一节在<CSS3选择器——基本选择器>中主要介绍了CSS3选择器的第一部分,这节主要和大家一起来学习CSS3选择器的第二部分——属性选择器.属性选择器早在CSS2中就被引入了,其主要作用 ...
    
		
    5. 
						
  5. css3 选择器（三）
		
    接css3选择器(一) 接css3 选择器(二) 这篇和前两篇内容相关性不大,主要是涉及到一些css3的状态选择器,所以标题从一开始. 一.[:enabled]选择器 一看这个属性就知道是专为表单元素 ...
    
		
    6. 
						
  6. CSS3选择器介绍
		
    1.css3属性选择器 <!DOCTYPE html> <html lang="en"> <head> <meta charset=&qu ...
    
		
    7. 
						
  7. CSS3 选择器——基本选择器
		
    CSS的选择器,我想大家并不会陌生吧,因为天天在使用,但对于CSS3的选择器,要运用的灵活到位,我想对很多朋友还是一定的难度,特别是CSS3中的:nth选择器.那么从现在开始我们先丢开他们版本的区别, ...
    
		
    8. 
						
  8. CSS3选择器的研究，案例
		
    在上一篇CSS3选择器的研究中列出了几乎所有的CSS3选择器,和伪类选择器,当是并没有做案例的研究,本想在那篇文章里面写,但想想如果把案例都写在那篇文章里面,对于查找来说就不是很方便,所有另开一篇来讲 ...
    
		
    9. 
						
  9. css3 选择器（二）
		
    接css3选择器(一) 八.结构性伪类选择器[:nth-child(n)] :nth-child(n)选择器用来匹配某个父元素的一个或多个特定的子元素,和jquery中一样. 其中"n&qu ...
    
		
    10. 
		

	


随机推荐
	

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