子元素选择器：

　　div>p{background：yellow；}

相邻的后兄弟选择器（必须相邻）

　　h1+p{padding-top：20px；}

后兄弟选择器（同级的当前元素后面的元素）

　　div~p{color：red；}

属性选择器：（属性可以自己定义，例如：class=abc）

　　[abc=value] 属性值为value的元素

　　[abc~="value1"]属性值包含value1的元素（多个值之间用空格区分）

　　[abc*="val"]模糊匹配 属性值中包含val的元素

　　[abc^="val"]匹配属性值以val开头

　　[abc$="val"]匹配属性值以val结尾

　　[abc=val]属性值为val的元素

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>css3选择器 | 属性选择器</title>
  <style type="text/css">
    /*li { border: 1px solid red; }*/
    /*li.active { border: 1px solid red; }*/
    /*li[class] { border: 1px solid red; }*/
    /*li[class='active'] { border: 1px solid red; }*/
    /*li[class='active clear'] { border: 1px solid red; }*/
    /*li[class~='active'] { border: 1px solid red; }*/
    /*li[abc] { border: 1px solid red; }*/
    /*li[abc~='d'] { border: 1px solid red; }*/
    li[class*='c'] { border: 1px solid red; }
    /*li[class^='act'] { border: 1px solid red; }*/
    /*li[class$='ve'] { border: 1px solid red; }*/
   /* li[class|='act'] { border: 1px solid red; }*/
  </style>
</head>
<body>
 
  <ul class="list">
    <li>
      <h2>第一级菜单</h2>
      <ul>
        <li>
          <h2>第二级菜单</h2>
        </li>
        <li class="act">
          <h2>第二级菜单</h2>
        </li>
        <li>
          <h2>第二级菜单</h2>
        </li>
        <li class="act focus">
          <h2>第二级菜单</h2>
        </li>
        <li>
          <h2>第二级菜单</h2>
        </li>
      </ul>
    </li>
    <li abc="d f"><h2>第一级菜单</h2></li>
    <li class="clear active"><h2>第一级菜单</h2></li>
    <li><h2>第一级菜单</h2></li>
    <li class="abc"><h2>第一级菜单</h2></li>
  </ul>

</body>
</html>

伪类选择器：

　　input：disabled

　　a:hover/:active/a:visited/a:link

　　:before/:after

　　:nth-child(n)第n个元素（p:nth-child,限制标签名）

　　:nth-last-child(n)倒数第n个元素（p:nth-last-child）

　　:nth-of-type(n)所有符合选择器要求的第n个元素

　　:nth-last-of-type()同上，倒序

　　:first-child/:last-child第一个/最后一个子元素

　　p:first-child第一个子元素并且标签名必须为p

　　p:last-child最后一个子元素，并且标签名必须为p

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>伪类选择器</title>
  <style type="text/css">
    /*body { background: pink; }*/
    /*:nth-child(2) {
      border: 1px solid #333;
    }

div :nth-child(3){
      color: green;
    }*/

/*div:nth-child(3){
      color: green;
    }*/

/*div p:nth-child(2){
       div 的第二个子标签，并且标签类型为 p标签的元素
      color: green;
    }*/

/*:first-child {
      font-size: 20px;
    }*/

/*p:first-child {
      font-size: 20px;
    }*/
    /*div :first-child {
      font-size: 30px; color: red;
    }*/

/*   :nth-child(3) {
      color: red; font-size: 20px;
    }*/

/*:nth-of-type(3) {
      color: red; font-size: 20px;
    }*/

.div1 :nth-child(odd) {
      color: red;
    }

/*#div1 .div2*/

/*
      伪类选择器：

*/
  </style>
</head>
<body>

<div class="div1">
    <h2>fdsafafafaf</h2>
    <p>123131231</p>
    <div>fdsf123131313</div>
    <h2>fdsafafafaf</h2>
    <p>123131231</p>
    <div>
      <span>fdsf123131313</span>
      <p>fsafaffafaf</p>
      <div>123131313</div>
    </div>
    <h2>fdsafafafaf</h2>
    <p>123131231</p>
    <div>fdsf123131313</div>
  </div>
 
  <div class="div2">
    <h2>fdsafafafaf</h2>
    <p>123131231</p>
    <div>fdsf123131313</div>
    <h2>fdsafafafaf</h2>
    <p>123131231</p>
    <div>
      <span>fdsf123131313</span>
      <p>fsafaffafaf</p>
      <div>123131313</div>
    </div>
    <h2>fdsafafafaf</h2>
    <p>123131231</p>
    <div>fdsf123131313</div>
  </div>
 
</body>
</html>

CSS3--选择器的更多相关文章

  1. 总结30个CSS3选择器

    或许大家平时总是在用的选择器都是:#id  .class  以及标签选择器.可是这些还远远不够,为了在开发中更加得心应手,本文总结了30个CSS3选择器,希望对大家有所帮助. 1 *:通用选择器 ;; ...

  2. 总结30个CSS3选择器（转载）

    或许大家平时总是在用的选择器都是:#id  .class  以及标签选择器.可是这些还远远不够,为了在开发中更加得心应手,本文总结了30个CSS3选择器,希望对大家有所帮助. 1 *:通用选择器 * ...

  3. CSS3 选择器——属性选择器

    上一节在<CSS3选择器——基本选择器>中主要介绍了CSS3选择器的第一部分,这节主要和大家一起来学习CSS3选择器的第二部分——属性选择器.属性选择器早在CSS2中就被引入了,其主要作用 ...

  4. css3 选择器（三）

    接css3选择器(一) 接css3 选择器(二) 这篇和前两篇内容相关性不大,主要是涉及到一些css3的状态选择器,所以标题从一开始. 一.[:enabled]选择器 一看这个属性就知道是专为表单元素 ...

  5. CSS3选择器介绍

    1.css3属性选择器 <!DOCTYPE html> <html lang="en"> <head> <meta charset=&qu ...

  6. CSS3 选择器——基本选择器

    CSS的选择器,我想大家并不会陌生吧,因为天天在使用,但对于CSS3的选择器,要运用的灵活到位,我想对很多朋友还是一定的难度,特别是CSS3中的:nth选择器.那么从现在开始我们先丢开他们版本的区别, ...

  7. CSS3选择器的研究，案例

    在上一篇CSS3选择器的研究中列出了几乎所有的CSS3选择器,和伪类选择器,当是并没有做案例的研究,本想在那篇文章里面写,但想想如果把案例都写在那篇文章里面,对于查找来说就不是很方便,所有另开一篇来讲 ...

  8. css3选择器（一）

    直接开始正文. 一.css3同级元素通用选择器[update20161228] 选择器:E~F 匹配任何在E元素之后的同级F元素 Note:E~F选择器选中的是E元素后面同级元素中的全部F元素. 例: ...

  9. css3 选择器（二）

    接css3选择器(一) 八.结构性伪类选择器[:nth-child(n)] :nth-child(n)选择器用来匹配某个父元素的一个或多个特定的子元素,和jquery中一样. 其中"n&qu ...

  10. [css3]CSS3选择器:nth-child和:nth-of-type之间的差异

    by zhangxinxu from http://www.zhangxinxu.com本文地址:http://www.zhangxinxu.com/wordpress/?p=1709 一.深呼吸,直 ...

随机推荐

  1. Whats meaning of “EXPORT_SYMBOL” in Linux kernel code?

    EXPORT_SYMBOL的作用是什么? EXPORT_SYMBOL标签内定义的函数或者符号对全部内核代码公开,不用修改内核代码就可以在您的内核模块中直接调用,即使用EXPORT_SYMBOL可以将一 ...

  2. 第三节：视图（Views）和模板（Templates）

    目录 概览 编写视图 编辑视图实际做一些事情 抛出404异常 使用模板系统 移除在代码中的硬编码网址 Url名称的命名空间 概览 视图是Django应用的网页的“类型”,一般服务于特定的功能并且有特定 ...

  3. 学习laravel之路由问题 404

    今天配置路由的时候,只有原来的自带路由可用: Route::get('/', function(){    return View::make('hello');}); 再网上搜索了办法:来自:htt ...

  4. [工具开发] keepalived使用nagios监控脚本

    最近在做开发和办公环境的高可用,采用的是keepalived:keepalived基于Linux内核支持的LVS,既能实现高可用,又能实现负载均衡,非常实用. keepalived监控服务状态时可以用 ...

  5. 从头来之【图解针对虚拟机iOS开发环境搭建】

    1.下载Mac OSX10.9. 点击下载 2.下载VMware Workstation 10,点击下载,网页中包含序列号.安装VM. 3.VM10-MacOS补丁.用于创建苹果虚拟机. 安装VM就不 ...

  6. ucenter 整合外部网站，实现登录等操作

    最近公司网站要出手机版,由于与论坛要有互通,实现会员的共享,由于对discuz不熟悉,起先考虑的是直接读取discuz的用户表,然后进行判断等操作,发现过于复杂,而且安全也不好. 前一段时间进行过论坛 ...

  7. oracle10g在rh6上安装缺少libXtst*的包导致不能出OUI

    由于测试需要,今天在linux6.0上装了下oracle10g,确实是知道oracle10g已经不支持redhat5.0以后的版本了,但是根据自己以往在redhat5.0上装oracle的经验就鲁莽下 ...

  8. Quartz.NET管理周期性任务

    Quartz.NET是一个开源的作业调度框架,非常适合在平时的工作中,定时轮询数据库同步,定时邮件通知,定时处理数据等. Quartz.NET允许开发人员根据时间间隔(或天)来调度作业.它实现了作业和 ...

  9. “请运行Chkdsk工具”怎么解决

    今天重新系统,想从移动硬盘中拷贝数据,但是老是提示:“请运行Chkdsk工具” 于是在百度搜索一下,有人提供的解决方案很不错,在些引用一下,以备忘! 电脑上经常遇到这样的提示“某某某文件已损坏且无法读 ...

  10. 49. Search in Rotated Sorted Array && Search in Rotated Sorted Array II

    Search in Rotated Sorted Array Suppose a sorted array is rotated at some pivot unknown to you before ...