CSS3中，选择器的分类很多，有元素选择器、类选择器、ID选择器、属性选择器、后代选择器、子元素选择器、相邻兄弟选择器。

1、最常见的选择器就是元素选择器，文档的元素就是最基本的选择器，例如，h1{},a{}

2、选择器分组：h1,h2{}、*{}

3、类选择器允许以一种独立于文档元素的方式来指定样式：.class{}；

可以结合元素选择器：a.class{}；

多类选择器：.class.class{}

4、ID选择器与类选择器相似，不过也有一些重要差别，例如：#id{}

ID选择器与类选择器的区别：ID只能在文档中使用一次，而类可以使用多次；ID选择器不能结合使用；当使用Js时，需要使用Id:GetElementById()

5、属性选择器：[title]{} ，title是属性的名称

也可以根据具体的属性值进行选择：除了选择拥有某些元素，还可以进一步缩小选择范围，只选择有特定属性值的元素，例如：a[href="www.baidu.com"]{};

也可以指定属性和属性值完全匹配；

也可以根据部分属性值选择。

6、后代选择器：后代选择器

7、子元素选择器：与后代选择器相比，子元素选择器只能选择作为某元素子元素的元素,即只支持一层关系，不支持多层关系：h1>strong{}

8、相邻兄弟选择器：可选择紧接在另一个元素后的元素，且二者有相同父元素，例如：h1+p{},h1和p有相同父类

  1.  <!doctype html>
  2.  <html>
  3.  <head>
  4.      <meta charset="utf-8">
  5.      <title></title>
  6.      <link href="1.css" type="text/css" rel="stylesheet">
  7.      <style>
  8.          /*简单属性选择*/
  9.          [title]{
  10.              font-size: 100px;
  11.          }
  12.          [href] {
  13.              font-size: 20px;
  14.          }
  15.  
  16.          /*属性和属性值完全匹配*/
  17.          [href="http://www.jikexueyuan.com"]{
  18.              font-size: 40px;
  19.          }
  20.  
  21.          /*部分属性选择器*/
  22.          [title~="title"]{
  23.              font-size: 100px;
  24.          }
  25.      </style>
  26.  </head>
  27.  <body>
  28.      <p>Hello World !</p>
  29.      <h1>标题1</h1>
  30.      <h2>标题2</h2>
  31.      <div class="div">Hello Css</div>
  32.      <a class="div">hello a class</a>
  33.      <p class="p1">this is p class p1</p>
  34.      <p class="p2">this is p class p2</p>
  35.      <!--class=p1 p2 的这个元素，包含了类p1 p2的属性，同时还可以自己再定义属性-->
  36.      <p class="p1 p2">this is p class p3</p>
  37.      <div id="mydiv">Hello Selector1</div>
  38.  
  39.      <!--以下操作允许，class可以重复-->
  40.      <div class="div1"></div>
  41.      <div class="div1"></div>
  42.      <div class="div1"></div>
  43.  
  44.      <!--以下操作不允许，id不能重复-->
  45.      <!--<div id="div1"></div>-->
  46.      <!--<div id="div1"></div>-->
  47.      <!--<div id="div1"></div>-->
  48.  
  49.      <p title="">Hello 属性选择器</p>
  50.      <a href="">极客学院</a>
  51.      <a href="http://www.jikexueyuan.com">极客学院</a>
  52.      <p title="title hello">hello部分属性选择器</p>
  53.      <p>这是<strong>父<i>级</i></strong></p>
  54.  
  55.      <div>
  56.          <ul>
  57.              <li>item1</li>
  58.              <li>item2</li>
  59.              <li>item3</li>
  60.              <li>item4</li>
  61.          </ul>
  62.          <ol>
  63.              <li>item11</li>
  64.              <li>item12</li>
  65.              <li>item13</li>
  66.          </ol>
  67.      </div>
  68.  </body>
  69.  </html>

对应的CSS文件：

  1.  /*选择器分组-通配符*/
  2.  *{
  3.      font-size: 50px;
  4.      margin: 0px;
  5.      padding: 0px;
  6.  }
  7.  
  8.  /*元素选择器*/
  9.  p{
  10.      color: coral;
  11.  }
  12.  
  13.  /*选择器分组*/
  14.  h1,h2{
  15.      color: red;
  16.  }
  17.  
  18.  /*类选择器*/
  19.  .div{
  20.      color: aqua;
  21.  }
  22.  
  23.  /*类选择器结合元素选择器*/
  24.  a.div{
  25.      color:darkgoldenrod;
  26.  }
  27.  
  28.  .p1{
  29.      color: darkgoldenrod;
  30.  }
  31.  .p2{
  32.      font-size: 30px;
  33.  }
  34.  
  35.  /*多类选择器*/
  36.  .p1.p2{
  37.      font-style:italic;
  38.  }
  39.  
  40.  /*id 选择器*/
  41.  #mydiv{
  42.      color: chocolate;
  43.  }
  44.  
  45.  /*后代选择器*/
  46.  /*p strong{*/
  47.      /*color: aquamarine;*/
  48.  /*}*/
  49.  /*p strong i{*/
  50.      /*font-style: italic;*/
  51.  /*}*/
  52.  
  53.  /*子元素选择器只能一层*/
  54.  p>strong{
  55.      color: fuchsia;
  56.      font-size: 30px;
  57.  }
  58.  
  59.  /*相邻兄弟选择器*/
  60.  li+li{
  61.      font-size: 50px;
  62.      color:blanchedalmond;
  63.  }

[CSS3] 学习笔记-CSS选择器的更多相关文章

  1. css权威指南学习笔记 —— css选择器

    1,选择器:选择器的一些基本常用规则基本都记得,w3c上都有,平时也常用,不常用的一些后代选择器经常就忘记了.一些归纳一下后代选择器,加深一下印象: a:子选择器:   p>a  a是直接是p的 ...

  2. 前端学习笔记——CSS选择器

    学习css选择器之前我们先了解下css规则: CSS 规则由两个主要的部分构成:选择器,以及一条或多条声明: 选择器通常是需要改变样式的 HTML 元素. 每条声明由一个属性和一个值组成. 1.id选 ...

  3. HTML 学习笔记 CSS(选择器3)

    CSS 属性选择器 属性选择器可以根据元素的额属性以及属性值来选择元素 例子1 如果 你希望把包含title的所有元素变成红色 *[title] {color:red} 例子2 与上面类似 可以只对有 ...

  4. HTML 学习笔记 CSS(选择器)

    CSS元素选择器 最常见的CSS 选择器就是元素选择器 换句话说 文档的元素就是最基本的选择器 如果设置HTML样式 选择器通常就是某个HTML元素 比如p h1 em a 甚至可以是HTML本身 h ...

  5. HTML 学习笔记 CSS(选择器4)

    CSS 后代选择器 后代选择器(descendant selector)又称为包含选择器.后代选择器可以选择作为某元素后代的元素. 根据上下文选择元素 我们可以定义后代选择器来创建一些规则,使这些规则 ...

  6. HTML 学习笔记 CSS(选择器2)

    CSS 类选择器 类选择器允许以一种独立于文档元素的方式来指定样式 CSS 类选择器 类选择器允许以一种独立于文档元素的方式来指定样式 该选择器可以单独使用 也可以和其他元素结合使用 提示 只要适当的 ...

  7. [CSS3] 学习笔记-CSS动画特效

    在CSS3中,出现了很多出彩的效果,例如2D.3D以及过度.动画和多列等.这些效果为页面设计添加了很多的可选设计. 1.2D.3D转换 转换,是使元素改变尺寸.形状.位置的一种效果:通过CSS3转换, ...

  8. [CSS3] 学习笔记-CSS定位

    页面的设计需要通过摆放不同的模块在不同的位置,这个时候需要使用到定位和浮动的知识点,CSS3定位功能是很强大的,利用它你可以做出各种各样的网络布局. 1.CSS定位 1)定位机制 普通流:元素按照其在 ...

  9. [CSS3] 学习笔记-CSS入门基本知识

    1.CSS概述 CSS指层叠样式表 CSS样式表极大的提高了工作效率 1)CSS基础语法: selector{ propery:value } 例1:h1{color:red;font-size:14 ...

随机推荐

  1. Ubuntu Server PHP常用扩展库的安装

    sudo apt-get install php5-gd curl libcurl3 libcurl3-dev php5-curl

  2. Unity 3d中Shader是什么，可以吃吗？

    众所周知,Unity3d是一款跨平台非常广的游戏引擎,上手容易,界面友好,集成功能众多,是目前开发手游的主流引擎.本人有幸使用Unity 3d进行开发已一年多时间,已领略了这歀引擎的强大之处. 编写s ...

  3. mysql迁移-----拷贝mysql目录/load data/mysqldump/into outfile

    摘要:本文简单介绍了mysql的三种备份,并解答了有一些实际备份中会遇到的问题.备份恢复有三种(除了用从库做备份之外), 直接拷贝文件,load data 和 mysqldump命令.少量数据使用my ...

  4. SpringMVC和mybatis的框架

    1.首先以一个项目做例子,该项目用到的框架即为SpringMVC+mybatis,项目环境为MyEclipse+sqlserver+tomcat6,项目的地址(项目+数据库备份文件)大家可以上我的百度 ...

  5. AFNetworking封装思路简析

    http://blog.csdn.net/qq_34101611/article/details/51698473 一.AFNetworking的发展 1. AFN 1.0版本 AFN 的基础部分是 ...

  6. 使用virsh搭建虚拟机管理环境

    这里简单的说说需要安装的依赖库 1. 安装kvm centos yum install kvm ubuntu apt-get install kvm 2. 安装qemu yum install qem ...

  7. 深度残差网(deep residual networks)的训练过程

    这里介绍一种深度残差网(deep residual networks)的训练过程: 1.通过下面的地址下载基于python的训练代码: https://github.com/dnlcrl/deep-r ...

  8. 安装ARM交叉编译器

    1.开发平台 虚拟机:VMware 12 操作系统:Ubuntu 14.04 64bit 2.准备ARM交叉编译工具包 编译uboot和linux kernel都需要ARM交叉工具链支持,这里使用Li ...

  9. 最新的thinkphp 后台入口的问题

    新的thinkphp后台入口绑定了单独了文件 admin.php 要注意.

  10. centos7 安装R和Rstudio客户端

    #官网下载R和Rstudio 我下载的是 R-3.2.1.tar.gz和rstudio-0.99.467-x86_64.rpm两个版本 rstudio没有看见有centos版的,下的这个RStudio ...