一、关系选择器

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. Python三级菜单增删改查
			
    #主要知识点是,字典,列表是使用menu = {'北京':{ '朝阳':{ '国贸':{ 'CICC':{}, 'HP':{}, '渣打银行':{}, 'CCTV':{} }, '望京':{ '陌陌' ...
    
			
    2. 
						
  2. Spring中@Component的作用
			
    今天在写程序的时候看见一个以前没有见过的注解(@Component),在网上查找过后,经过实践,决定把它记录下来. 1.@controller 控制器(注入服务) 用于标注控制层,相当于struts中 ...
    
			
    3. 
						
  3. Session原理
			
    详情移步:https://www.jianshu.com/p/2b7c10291aad
    
			
    4. 
						
  4. Cannot run Eclipse; JVM terminated. Exit code=13
			
    在myeclipse 上运行好好的, 在 eclipse 上就运行不了了. 运行eclipse.exe 就出现: Cannot run Eclipse; JVM terminated. Exit co ...
    
			
    5. 
						
  5. Mybatis五（一级二级缓存、第三方缓存）
			
    一级缓存 Mybatis对缓存提供支持,但是在没有配置的默认情况下,它只开启一级缓存,一级缓存只是相对于同一个SqlSession而言.所以在参数和SQL完全一样的情况下,我们使用同一个SqlSess ...
    
			
    6. 
						
  6. react-native启动页面设置，react-native-splash-screen
			
    用于解决iOS和Android启动白屏问题及简单的启动页面展示 下载 react-native-splash-screen yarn add react-native-splash-screen re ...
    
			
    7. 
						
  7. QtCreator中F1帮助不能使用的解决方法
			
    环境:ubuntu11.04 在Qt中按F1跳转帮助是一个很方便的东东,点击左边的Help图标也是一样的功能.我今天遇到的问题是F1跳转出错,找不到文档: “No documentation avai ...
    
			
    8. 
						
  8. Hadoop 基本原理
			
    Hadoop 有2大核心HDFS  (Hadoop Distributed File System)分布式文件系统  , MapRedurce 归约计算 HDFS  把文件按块存储, NameNode ...
    
			
    9. 
						
  9. 构建模式--Adapter模式（JAVA）
			
    适配器模式: 适配器就相当于我们的转接头,比如手机充电器插头(小米和华为的手机充电器不能共用,这时候就可以给华为的充电器按一个转接头,就可以给小米手机充电). 同理,当一个类(充电器 HuaweiCh ...
    
			
    10. 
						
  10. jq时间戳动画
			
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...
    
			
    11.