HTML第三讲（选择符）

本次课程讲CSS中的选择符

1.基本选择符

基本选择符有三个

　　1.标记名选择符

　　　　所谓的标记名选择符就是直接在样式中使用标记名定义，譬如以下代码：

　　　　(此种选择符的特点是所有相同的标记名可以同时定义不需要单独写，比如下列第二段代码)

p{

     font-size:15pt;

     color：#FF0000；

}

 <!DOCTYPE html>

 <html lang="en">

 <head>

     <meta charset="UTF-8">

     <title>Title</title>

     <style type="text/css">

         p{

             font-size:15px;

             color:#FF0000;

         }

     </style>

 </head>

 <body>

     <p>这是第一段文字</p>

     <p>这是第二段文字</p>

     <p>这是第三段文字</p>

 </body>

 </html>

　　2.ID选择符

　　　　所谓ID，即唯一，每个元素都有一个唯一的ID，就像每个人都有唯一的一个身份证一样，用来标识身份。ID需要在标记名内部定义，CSS中使用#定义的ID名称来定义样式。

　　　　（此选择符的特点是唯一性，只有唯一定义的ID才有样式效果。）以下是例子：

 <!DOCTYPE html>

 <html lang="en">

 <head>

     <meta charset="UTF-8">

     <title>Title</title>

     <style type="text/css">

         #p1{

             font-size:15px;

             color:#FF0000;

         }

     </style>

 </head>

 <body>

     <p id="p1">这是第一段文字,有样式效果</p>

     <p>这是第二段文字，无样式效果</p>

 </body>

 </html>

　　3.class类选择符

　　　所谓类选择符，即定义为一个类的样式效果相同。比如你一个班的班级名称都是一样的，班级名称就是这个班里所有同学的一个类。

　　（此选择符是定义在同一个类下的显示效果是相同的，而没有定义在同一个类中的将不会显示相同的效果。定义时需要在CSS中以.class_name定义）以下给出案例代码：

 <!DOCTYPE html>

 <html lang="en">

 <head>

     <meta charset="UTF-8">

     <title>Title</title>

     <style type="text/css">

         .p1{

             font-size:15px;

             color:#FF0000;

         }

     </style>

 </head>

 <body>

     <p class="p1">这是第一段文字,有样式效果</p>

     <p>这是第二段文字，无样式效果</p>

 </body>

 </html>

这时候有同学想到了，如果一个标记名中定义两个class类选择符改怎么办呢？我们可以是使用一下方法定义

多个class之间用空格隔开，来实现一次引用两个类

 <!DOCTYPE html>

 <html lang="en">

 <head>

     <meta charset="UTF-8">

     <title>Title</title>

     <style type="text/css">

         .p1{

             color:#00FF00;

         }

         .p2{

             font-size:18px;

         }

     </style>

 </head>

 <body>

 <p>这是第一段文字,没有引用样式效果的</p>

 <p class="p1 p2" >这是第二段文字，是引用两个类样式效果的</p>

 <p class="p2">这是第三段文字，引用一个类样式效果的</p>

 </body>

 </html>

现在给出三种选择符一起使用的效果会有什么不同呢？

 <!DOCTYPE html>

 <html lang="en">

 <head>

     <meta charset="UTF-8">

     <title>Title</title>

     <style type="text/css">

         p{

             font-size:12px;

             color:#00FF00;

         }

         .p1{

             font-size:15px;

             color:#FF0000;

         }

         #p2{

             font-size:18px;

             color:#0000FF;

         }

     </style>

 </head>

 <body>

     <p>这是第一段文字,是标记名的样式效果</p>

     <p class="p1">这是第二段文字，是class类的样式效果</p>

     <p id="p2">这是第三段文字，是ID选择符的效果</p>

 </body>

 </html>

这是执行效果如果把颜色值都改成相同的我们来看一下效果

有些同学就发现了，这个颜色值一样，标记名相同。应该显示效果是完全相同，为什么字体不同呢？

那是因为这三个基本选择符是有优先级的。

优先级由高到低分别是：ID选择符 > Class类选择符 > 标记名选择符

优先级高的选择符定义的样式如果与优先级低的选择符样式冲突会把低级的覆盖掉。这是选择符优先级的问题，后面我会单独讲解选择符优先级的问题。

2.群组选择符与通用选择符

1.群组选择符

何为群组，即多个标记名选择符，ID选择符，class类选择符等使用逗号隔开来定义相同样式

下面举个例子：

 <!DOCTYPE html>

 <html lang="en">

 <head>

     <meta charset="UTF-8">

     <title>Title</title>

     <style type="text/css">

         .p1 , #p2 , p{

             font-size: 15px;

             color:#00FF00;

         }

     </style>

 </head>

 <body>

     <p>这是第1段文字</p>

     <p class="p1">这是第2段文字</p>

     <p id="p2">这是第3段文字</p>

 </body>

 </html>

2.通用选择符

通用选择符使用*号定义，定以后所有的标记名都会有里面定义的样式也不需要你单独去指定。

 <!DOCTYPE html>

 <html lang="en">

 <head>

     <meta charset="UTF-8">

     <title>Title</title>

     <style type="text/css">

         *{

             font-size: 15px;

             color:#00FF00;

         }

     </style>

 </head>

 <body>

 <p>这是第1段文字</p>

 <span id="p2">这是第2段文字</span><br />

 <a class="p1">这是第3段文字</a>

 </body>

 </html>

3.包含选择符（又称为派生选择符）

包含选择符即多个选择符用空格隔开的组合，仅对包含在指定父元素内符合条件的子元素有效。就好比你爹的钱只能给你花，不能给别人家的孩子花。下面给大家举个例子：

 <!DOCTYPE html>

 <html lang="en">

 <head>

     <meta charset="UTF-8">

     <title>Title</title>

     <style type="text/css">

         p span{

             font-size: 15px;

             color:#00FF00;

         }

     </style>

 </head>

 <body>

     <p><span>这是第1段文字,有样式效果</span></p>

     <p>这是第2段文字，无样式效果</p>

     <span>这是第3段文字,无样式效果</span>

 </body>

 </html>

有的同学就想问了为什么第一段效果而第三段没有效果呢？

其实包含选择符必须要在父元素下有指定的子元素才可以显示定义的样式效果。第三段并不是p标记的子元素，所以不会有样式效果。如果是相邻选择符就会有效果

4.相邻选择符

刚才提到了这个相邻选择符我就讲一下吧，其实到此为止，主要的选择符已经讲完了。

所谓相邻选择符就是以前一个标记名为标记，定义下一个选择符的样式。给你个例子你就明白了：

 <!DOCTYPE html>

 <html lang="en">

 <head>

     <meta charset="UTF-8">

     <title>Title</title>

     <style type="text/css">

         p + span{

             font-size: 15px;

             color:#00FF00;

         }

     </style>

 </head>

 <body>

     <p><span>这是第1段文字,有样式效果</span></p>

     <p>这是第2段文字，无样式效果</p>

     <span>这是第3段文字,无样式效果</span>

 </body>

 </html>

自己仔细观察一下这个代码与上面的包含选择符的区别之处你就会明白！

5.不常用的三种选择符

1.子对象选择符

2.属性选择符

3.伪对象（伪元素）选择符

这三个不常用，有兴趣的可以去W3C上自己去学习一下。

6.！important提高样式的优先级

!important只是用来提高样式的优先级的，可以将优先级提升到最高。下面是例子：

 <!DOCTYPE html>

 <html lang="en">

 <head>

     <meta charset="UTF-8">

     <title>Title</title>

     <style type="text/css">

         p{

             color: #0000FF !important;

         }

         .p1{

             color:#00FF00 ;

         }

         #p2{

             color: #FF0000;

         }

     </style>

 </head>

 <body>

     <p>这是第1段文字</p>

     <p class="p1">这是第2段文字，无样式效果</p>

     <p id="p2">这是第3段文字,无样式效果</p>

 </body>

 </html>

7.样式规则的优先级原则

按照情况给大家介绍

1.如果只有内联样式。在标记名内部定义，不需要考虑样式的优先级。定义的什么样式会显示什么样的效果。

2.如果只有内嵌样式

*{规则0}

p{规则1}

.p1{规则2}

#p2{规则3}

其优先级顺序由高到低是：#p2{规则3}--->.p1{规则2}--->p{规则1}--->*{规则0}

如果定义的样式有冲突，以优先级高的为主。（其实大家可以记住一句话，后定义的优先级高（前提是相同级别的选择符））

3.如果有内嵌样式和内联样式，首先内联的样式优先级会永远高于内嵌中定义的样式。其他内嵌中的样式按2中的顺序

4.如果有外部样式表定义和内联与内嵌三种同时使用：

这种情况内联的样式优先级最高，然后分情况，看是外部定义在前还是内嵌定义在前。那个在前那个里面定义的优先级低（如果冲突以优先级高的为准），后定义的优先级高（需要好好体会如何才是后定义的优先级高）。

这次内容就算讲完了，下次会讲盒子模型。本次内容主要就是讲选择符，以及选择符的优先级。

HTML第三讲（选择符）的更多相关文章

CSS基础篇之选择符2
属性选择符: 选择符版本描述 E[att] CSS2 选择具有att属性的E元素. E[att="val"] CSS2 选择具有att属性且属性值等于val的E元素. E[at ...
CSS基础篇之选择符
关系选择符 E F 包含选择符(Descendant combinator) CSS1 选择所有被E元素包含的F元素. <html> <head> <meta chars ...
30个你必须记住的CSS选择符
所以你学会了基础的id,类和后代选择符,然后你就一直用它们了吗?如果是这样,你丢失了(css的)巨大的灵活性.在本文中提到的很多选择器属于CSS3规范的一部分,因此,只有在现代浏览器中才可使用. 1. ...
DOM扩展-Selectors API(选择符 API)、元素遍历
DOM扩展对DOM的两个主要扩展是SelectorsAPI(选择符API)和HTML5 SelectorsAPI(选择符API)是由W3C发起制定的一个标准,致力于浏览器原生支持CSS查询,Sele ...
html基本选择符的使用
一.选择符在运用在CSS设计样式时对HTML的指定有至关重要的作用! 二.研究普通选择符: 1.类型选择符:它可以选择同一个类型的元素! 例如:h1,h2 { color: ...
CSS属性选择符
属性选择符: E[att] 选择具有att属性的E元素. <style type="text/css"> a[class]{ background-color: red ...
css选择符
E>F:子选择符,选择所有作为E元素的子元素F.<style type="text/css">li>a {color: #ccc;}</style&g ...
CSS高级选择符
2016-11-07 <css入门经典>第八章 1.属性选择器选择器描述 [attribute] 用于选取带有指定属性的元素. [attribute=value] 用于选取带有指定属性 ...
#8.10.16总结# 属性选择符伪对象选择符 CSS的常用样式
属性选择符 E[att] E[att="val"] E[att~="val"] E[att^="val"] E[att$="val ...

随机推荐

personal evolution
自我清醒认知自我的行为和心理你确定你自己是出于理智而发出某种行为? 首先需要确定哪些是人的天性认知失调理论从众效应晕轮效应霍桑效应马太效应期望效应刻板效应破窗效应安排思维安排闲 ...
封装JS实现Ajax
这两天仔细理解了一下Ajax,然后整理封装了一下,如果有什么不对的地方,请指教,谢谢! AJAX AJAX = Asynchronous JavaScript and XML(异步的 JavaScri ...
Vmware 设置NAT模式
NAT模式,就是让虚拟系统借助NAT(网络地址转换)功能,通过宿主机器所在的网络来访问公网.也就是说,使用NAT模式可以实现在虚拟系统里访问互联网. NAT模式下的虚拟系统的TCP/IP配置信息是由V ...
第四章 consul cluster
1.vagrant 为了模拟集群效果,使用vagrant. 1.1.首先下载vagrant https://www.vagrantup.com/downloads.html 说明:浏览器下载可能比较慢 ...
SDOI2011_染色
SDOI_染色背景:很早就想学习树链剖分,趁着最近有点自由安排的时间去学习一下,发现有个很重要的前置知识--线段树.(其实不一定是线段树,但是线段树应该是最常见的),和同学吐槽说树剖的剖和分都很死板 ...
JDK 1.8 ConcurrentHashMap 源码剖析
转载两篇不错的文章: 第一篇: 前言 HashMap是我们平时开发过程中用的比较多的集合,但它是非线程安全的,在涉及到多线程并发的情况,进行put操作有可能会引起死循环,导致CPU利用率接近100%. ...
(CLR via C#学习笔记)线程基础
一使用线程的理由 1.可响应性(通常是对于客户端GUI应用程序);2.性能,多个CPU(或多核CPU)能并发执行多个线程,同时执行多个操作能提升性能. 二线程开销线程有空间(内存耗用)和时间(运 ...
Command（命令）
意图: 将一个请求封装为一个对象,从而使你可用不同的请求对客户进行参数化:对请求排队或记录请求日志,以及支持可撤消的操作. 适用性: 抽象出待执行的动作以参数化某对象,你可用过程语言中的回调(call ...
GetLastError()数字_转换为_文字
1.具体参数可参看 http://blog.csdn.net/hongweigg/article/details/6821536 或其它文章或 MSDN 2.VC6 测试代码: #include ...
实用性较强的idea插件
1. .ignore 生成各种ignore文件,一键创建git ignore文件的模板,免得自己去写 2. GsonFormat 一键根据json文本生成java类非常方便 3.Maven Hel ...

HTML第三讲（选择符）

HTML第三讲（选择符）的更多相关文章

随机推荐

热门专题