一、关系选择器

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. Windows Server 2016 路由和远程访问
			
    本次实验是将Windows Server 2016 配置成一个路由器,为此网络上的客户端和服务器启用多重协议LAN到LAN,LAN到WAN,虚拟专用网络和网络地址转换路由服务.使用路由和远程访问需配置 ...
    
			
    2. 
						
  2. day25类的组合多态封装
			
    类的组合多态与封装类的组合 1. 什么是组合  组合指的是某一个对象拥有一个属性,该属性的值是另外一个类的对象 2. 为何要用组合  通过为某一个对象添加属性(属性的值是另外一个类的对象)的方式,可以 ...
    
			
    3. 
						
  3. JVM总结-虚拟机怎么执行字节码
			
    1. JRE,JDK JRE : 包含运行 Java 程序的必需组件,Java 虚拟机+ Java 核心类库等. JDK :  JRE + 一系列开发.诊断工具. 2. java字节码 编译器将 Ja ...
    
			
    4. 
						
  4. 零基础学习python_pickle（31课）
			
    上次我提到了对文件的读写等一系列操作,回想下,要想从文件内读取内容无论是read还是readline,读取出来的是不是都是字符串呢?那么如果想让字典.列表这些数据类型保存进文件到读取出来都是原来的类型 ...
    
			
    5. 
						
  5. Linux NTP
			
    1.Server 2.QuickStart last 1.Server 0.cn.pool.ntp.org 1.cn.pool.ntp.org 2.cn.pool.ntp.org 3.cn.pool. ...
    
			
    6. 
						
  6. 关于dumper和mysqldump的
			
    最近在做版本更新 使用dumper在连接阿里云的RDS的时候 老是提示 需要超级管理员权限 无能只能使用系统自带的mysqldump了  语句简单方便 而且导出的表 没有加载库信息 mysqldump ...
    
			
    7. 
						
  7. add_polygon_to_map
			
    var poly = new esri.geometry.Polygon({ "rings": [ [[117.008726, 30.931672], [117.009635, 3 ...
    
			
    8. 
						
  8. ADO.net之综合演练
			
    using ConsoleApplication4.App_Code; using System; using System.Collections.Generic; using System.Lin ...
    
			
    9. 
						
  9. 14. js字符串截取substring用法
			
    columnIds = columnIds.substring(0, columnIds.length-1);
    
			
    10. 
						
  10. JMeter做http接口功能测试
			
    1. 普通的以key-value传参的get请求 e.g. 获取用户信息 添加http请求:填写服务器域名或IP:方法选GET:填写路径:添加参数:运行并查看结果. 2. 以Json串传参的post请 ...
    
			
    11.