一、关系选择器

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. Device supprts x86,armeabi-v7a,but APK only aupports armeabi；模拟机不能运行。
			
    在真机可以运行,模拟机却不可以: 这个是模拟机: 修改: defaultConfig { ndk{ abiFilters "armeabi" } } 为: defaultConfi ...
    
			
    2. 
						
  2. Spring boot 下使用 Swagger
			
    通过Swagger 可以更好的将后台的RESTfull API文档化,如下图所示: 1. Swagger 主要依赖以下两个jar包: <!-- https://mvnrepository.com ...
    
			
    3. 
						
  3. Windows Defender 无法启动
			
    最近win10 企业版操作系统中,Windows Defender  无法 启动,并提示消息 : to allow this app run , contact your security admin ...
    
			
    4. 
						
  4. java list按照 对象 指定多个字段属性进行排序
			
    ListUtils.Java---功能类 package PjectUtils; import java.lang.reflect.Field; import java.text.NumberForm ...
    
			
    5. 
						
  5. 背景图片的移动----background-attach-----background-repeat
			
    background-repeat:默认是平铺的,也即是还有空间的话将一张接着一张显示 设置为 no-repeat  就最多显示一张 background-attachment:设置是否固定图片,在有 ...
    
			
    6. 
						
  6. ace admin
			
    .svg             image/svg+xml.woff            application/x-font-woff.woff2          application/x- ...
    
			
    7. 
						
  7. Java课程作业之动手动脑（二）
			
    纯随机数发生器 编写一个方法,使用以下算法生成指定数目(比如1000个)的随机整数. import java.util.Scanner; public class test { public stat ...
    
			
    8. 
						
  8. 【Python爬虫实战】多线程爬虫---糗事百科段子爬取
			
    多线程爬虫:即程序中的某些程序段并行执行,合理地设置多线程,可以让爬虫效率更高糗事百科段子普通爬虫和多线程爬虫分析该网址链接得出:https://www.qiushibaike.com/8hr/pag ...
    
			
    9. 
						
  9. try or install Ubuntu on MeegoPad T01
			
    Ref: Install Ubuntu on Meego Pad T01 with a Live ISO Image MeegoPad T01 has recently been shown to b ...
    
			
    10. 
						
  10. uva-10720-贪心
			
    题意:对于一个简单图(不存在平行边和自旋边),输入所有的点的度,问,能不能变成一个简单图. 解题思路: 可图化定理.https://blog.csdn.net/shuangde800/article/ ...
    
			
    11.