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有相同父类

 <!doctype html>
 <html>
 <head>
     <meta charset="utf-8">
     <title></title>
     <link href="1.css" type="text/css" rel="stylesheet">
     <style>
         /*简单属性选择*/
         [title]{
             font-size: 100px;
         }
         [href] {
             font-size: 20px;
         }

         /*属性和属性值完全匹配*/
         [href="http://www.jikexueyuan.com"]{
             font-size: 40px;
         }

         /*部分属性选择器*/
         [title~="title"]{
             font-size: 100px;
         }
     </style>
 </head>
 <body>
     <p>Hello World !</p>
     <h1>标题1</h1>
     <h2>标题2</h2>
     <div class="div">Hello Css</div>
     <a class="div">hello a class</a>
     <p class="p1">this is p class p1</p>
     <p class="p2">this is p class p2</p>
     <!--class=p1 p2 的这个元素，包含了类p1 p2的属性，同时还可以自己再定义属性-->
     <p class="p1 p2">this is p class p3</p>
     <div id="mydiv">Hello Selector1</div>

     <!--以下操作允许，class可以重复-->
     <div class="div1"></div>
     <div class="div1"></div>
     <div class="div1"></div>

     <!--以下操作不允许，id不能重复-->
     <!--<div id="div1"></div>-->
     <!--<div id="div1"></div>-->
     <!--<div id="div1"></div>-->

     <p title="">Hello 属性选择器</p>
     <a href="">极客学院</a>
     <a href="http://www.jikexueyuan.com">极客学院</a>
     <p title="title hello">hello部分属性选择器</p>
     <p>这是<strong>父<i>级</i></strong></p>

     <div>
         <ul>
             <li>item1</li>
             <li>item2</li>
             <li>item3</li>
             <li>item4</li>
         </ul>
         <ol>
             <li>item11</li>
             <li>item12</li>
             <li>item13</li>
         </ol>
     </div>
 </body>
 </html>

对应的CSS文件：

 /*选择器分组-通配符*/
 *{
     font-size: 50px;
     margin: 0px;
     padding: 0px;
 }

 /*元素选择器*/
 p{
     color: coral;
 }

 /*选择器分组*/
 h1,h2{
     color: red;
 }

 /*类选择器*/
 .div{
     color: aqua;
 }

 /*类选择器结合元素选择器*/
 a.div{
     color:darkgoldenrod;
 }

 .p1{
     color: darkgoldenrod;
 }
 .p2{
     font-size: 30px;
 }

 /*多类选择器*/
 .p1.p2{
     font-style:italic;
 }

 /*id 选择器*/
 #mydiv{
     color: chocolate;
 }

 /*后代选择器*/
 /*p strong{*/
     /*color: aquamarine;*/
 /*}*/
 /*p strong i{*/
     /*font-style: italic;*/
 /*}*/

 /*子元素选择器只能一层*/
 p>strong{
     color: fuchsia;
     font-size: 30px;
 }

 /*相邻兄弟选择器*/
 li+li{
     font-size: 50px;
     color:blanchedalmond;
 }

[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. [JSP] c:forEach 如何输出序号 - luotangsha的专栏 - 博客频道 - CSDN.NET

    [JSP] c:forEach 如何输出序号 分类: JSP 2011-06-24 01:36 13018人阅读 评论(2) 收藏 举报 jspcbordertable 关键在于<c:forEa ...

  2. Ubuntu如何备份和恢复系统 - 落花往事的日志 - 网易博客

    在 使用Ubuntu之前,相信很多人都有过使用Windows系统的经历.如果你备份过Windows系统,那么你一定记忆犹新:首先需要找到一个备份工 具(通常都是私有软件),然后重启电脑进入备份工具提供 ...

  3. JAVA中浅复制与深复制 - coolmist - ITeye技术网站

    body{ font-family: "Microsoft YaHei UI","Microsoft YaHei",SimSun,"Segoe UI& ...

  4. HDU 5677 ztr loves substring

    Manacher+二维费用多重背包 二进制优化 这题是一眼标算....先计算出每个长度的回文串有几种,然后用二维费用的多重背包判断是否有解. 多重背包做的时候需要二进制优化. #include< ...

  5. opencv图像特征检测之斑点检测

    前面说过,图像特征点检测包括角点和斑点,今天来说说斑点,斑点是指二维图像中和周围颜色有颜色差异和灰度差异的区域,因为斑点代表的是一个区域,所以其相对于单纯的角点,具有更好的稳定性和更好的抗干扰能力. ...

  6. 一、什么是hadoop？

    一.什么是hadoop 1. 背景 Hadoop为分布式文件系统和计算的基础框架系统,其中包含hadoop程序,hdfs系统等.   2. 名词解释 1.Hadoop, Apache开源的分布式框架. ...

  7. HDU 5652 India and China Origins

    二分答案+验证,注意一开始就不连通的话输出0 #include<cstdio> #include<cstring> #include<cmath> #include ...

  8. realm-java 源码疑问

    JNIEXPORT void JNICALL Java_io_realm_internal_Group_nativeWriteToFile( JNIEnv* env, jobject, jlong n ...

  9. HCSR04超声波传感器驱动

    HC_SR04是一款使用较为广泛的超声波测距模块,模块图如下 该模块具有四个引脚,分别为VCC GND TRIG ECHO,其中VCC GND为供电脚 TRIG为测距触发引脚,ECHO为测距输入引脚 ...

  10. unicode转GBK,GNK转unicode,解决FATFS中文码表占用ROM问题（转）

    源:unicode转GBK,GNK转unicode,解决FATFS中文码表占用ROM问题 之前一直使用的512KB ROM的STM32,但是最近使用的只有128KB,想用FATFS显示支持长文件名,发 ...