一、关系选择器

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. Java第一次上机实验源代码
			
    小学生计算题: package 第一次上机实验_; import java.util.*; public class 小学计算题 { public static void main(String[]  ...
    
			
    2. 
						
  2. Struts2学习：Action使用@Autowired注入为null的解决方案
			
    1.pom.xml引入struts2-spring-plugin <dependency> <groupId>org.apache.struts</groupId> ...
    
			
    3. 
						
  3. StanFord ML 笔记 第十部分
			
    第十部分: 1.PCA降维 2.LDA 注释:一直看理论感觉坚持不了,现在进行<机器学习实战>的边写代码边看理论
    
			
    4. 
						
  4. git push异常
			
    git push异常:! [remote rejected] HEAD -> refs/for/master ([3149246] missing Change-Id in commit mes ...
    
			
    5. 
						
  5. python读取grib grib2气象数据
			
    如何读取GRIB数据?快看Python大神整理的干货! 橙子心法 百家号17-11-0116:30 GRIB是WMO开发的一种用于交换和存储规则分布数据的二进制文件格式,主要用来表示数值天气预报的产品 ...
    
			
    6. 
						
  6. 1.如何在Cloud Studio上执行Python代码？
			
    1.在python文件下新建python文件,输入文件名后按Enter键生成,比如: one.py . 2.简单输入python代码: print "haha" 3.打开左下角的终 ...
    
			
    7. 
						
  7. 24.纯 CSS 创作出平滑的层叠海浪特效
			
    原文地址:https://segmentfault.com/a/1190000014895634 感想:这里的波浪只是侧面的,利用几个平面一部分弧旋转得到. HTML代码: <div class ...
    
			
    8. 
						
  8. 《算法》第四章部分程序 part 9
			
    ▶ 书中第四章部分程序,包括在加上自己补充的代码,两种拓扑排序的方法 ● 拓扑排序 1 package package01; import edu.princeton.cs.algs4.Digraph ...
    
			
    9. 
						
  9. ucenter
			
    1 UCenter 的目录结构 2API接口 3返回标签数据示例 (PHP) 4应用接口函数 5短消息接口函数 6积分接口函数 7邮件接口函数 8事件接口函数 9头像接口函数 10好友接口函数 11用 ...
    
			
    10. 
						
  10. 使用Shiro登录成功后，跳转到之前访问的页面实现
			
    转:http://blog.csdn.net/lhacker/article/details/20450855 很多时候,我们需要做到,当用户登录成功后,跳转回登录前的页面.如果用户是点击" ...
    
			
    11.