代码实现：

 <!DOCTYPE html>

 <html lang="en">

     <head>

         <meta charset="utf-8">

         <title>css的综合使用</title>

         <style>

             div {

                 color: #daa520;

             }

             .red {    /*上面点声明，下面class调用。*/

                 color: red;

             }

             #green {

                 color: green;

             }

             * {

                 /*css选择器的优先级：!important > 行内样式>ID选择器 > 类选择器 > 标签 > 通配符 > 继承 > 浏览器默认属性*/

                 /*color: orange!important;*/

                 color: green;

             }

             div ul li ol li {

                 color: skyblue;

             }

             .blue {

                 color: blue;

             }

             h4.blue {

                 color: purple;

             }

             h2,h6,hr {

                 text-align: center;

             }

             a:link {

             /*未访问过的链接状态*/

             color: red;

             font-size: 25px;

             text-decoration: none; /*取消下划线*/

             font-weight: 700;    /*字体加粗*/

         }

         a:visited {

             /*已经访问过的链接*/

             color:#0e0e0e;

         }

         a:hover {

                 /*鼠标经过的状态*/

             color: green;

         }

         a:active {

                 /*鼠标按下的状态*/

             color: skyblue;

         }

         </style>

     </head>

     <body>

         <!-- 1.基本选择器：标签选择器、类选择器、id选择器、通配符选择器 -->

         <!-- 标签选择器：可以选择某一类标签 -->

         <div>标签选择器</div>

         <div>标签选择器</div>

         <div>标签选择器</div>

         <div>标签选择器</div>

         <!-- 类选择器:可以选择一个或者多个标签-->

         <div>

             <ul>

                 <li><a href="#" class="red">类选择器</a></li>

             </ul>

             <h5 class="red">类选择器</h5>

         </div>

         <!-- id选择器：#声明，id调用。 -->

         <div id="green">id选择器</div>

         <div id="green">id选择器</div>

         <div>id选择器</div>

         <!-- 通配符选择器 -->

         <span>通配符选择器</span>

         <span>通配符选择器</span>

         <span>通配符选择器</span>

         <span>通配符选择器</span>

         <!-- 2.复合选择器：后代选择器、子代选择器、交集选择器、并集选择器 -->

         <!-- 后代选择器：用空格隔开，选取子孙后代 -->

         <div>

             <ul>

                 <li>

                     <ol>

                         <li>后代选择器</li>

                     </ol>

                             后代选择器

                 </li>

             </ul>

         </div>

         <!-- 交集选择器 -->

         <h4 class="blue">交集选择器</h4>

         <h4>交集选择器</h4>

         <h4>交集选择器</h4>

         <h4>交集选择器</h4>

         <!-- 并集选择器 :用逗号隔开,集体声明,相同样式的时候-->

         <h2>并集选择器</h2>

         <h6>并集选择器</h6>

         <hr />

         <!-- 3.链接伪类选择器：a:link{}、a:visited{}、a:hover{}、a:active{} -->

         <a href="http://www.cnblogs.com/SophiaBlog/">三水舌田心</a>

     </body>

 </html>

代码

运行结果：

具体知识导图：

以上是css最常用的各种选择器，具体的还是需要看手册。css选择器存在优先级，即它的优先级顺序为：!important > 行内样式>ID选择器 > 类选择器 > 标签 > 通配符 > 继承 > 浏览器默认属性。通配符选择器中，*代表所有的意思,使用较少。

css选择器的综合使用的更多相关文章

  1. Html 之div+css布局之css选择器

    CSS选择器 什么叫选择器?通俗的来说就是 我想改变html 中某个地方的  字体大小 或者背景色 或者其它属性 内边距 外边距,宽度高度 等等 一些Css 样式. 那么我们如何找到对应的 元素呢? ...

  2. 网站CSS选择器性能讨论

    CSS选择符由一些初始化参数组成,这些参数指明了要应用这个CSS规则的页面元素.作为一个网站的前端开发工程师,应该避免编写一些常见的开销很大的CSS选择符模式,尽量编写高效的CSS选择符,从而加快页面 ...

  3. 第二天（CSS 选择器）

    1.常用的CSS选择器         类型选择器: 例如: p { color : red ; }         后代选择器: 例如: h2 span { font-weight : bold ; ...

  4. {前端CSS} 语法 Css的几种引入方式 css选择器 选择器的优先级 CSS属性相关 背景属性 边框 CSS盒子模型 清除浮动 overflow溢出属性　　定位（position）z-index

    前端CSS CSS介绍 CSS(Cascading Style Sheet,层叠样式表)定义如何显示HTML元素,给HTML设置样式,让它更加美观. 当浏览器读到一个样式表,它就会按照这个样式表来对文 ...

  5. CSS选择器的优化

    前面花了几个篇幅着重介绍了CSS的选择器的使用,我将其分成三个部分:CSS基本选择器.CSS属性选择器以及CSS伪类选择器.那么今天我主要想和大家一起来学习——CSS选择器方面的性能优化.因为对性能这 ...

  6. Html学习之七（CSS选择器的使用--基础选择器优先级问题）

    二.基础选择器的综合使用 优先级顺序:id选择器>class选择器>元素选择器.也就是说,如果这三种选择器同时为某一个元素设定样式,那么冲突的部分按优先级的顺序依次决定. <!DOC ...

  7. css — 选择器、盒子模型

    目录 1. css引入方式 2. css选择器 3. css的盒模型 css: 层叠样式表 1. css引入方式 行内样式 <div style='color:red;'>mjj</ ...

  8. selenium元素定位之css选择器

    在selenium元素定位时会用到css选择器选取元素,虽说xpath在定位元素时能解决大部分问题,但使用css选择器选取元素也是一种不错的选择. css相较与xpath选择元素优点如下: 表达式更加 ...

  9. Day 31：CSS选择器、常用CSS样式、盒子模型

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

随机推荐

  1. 第五节：web爬虫之urllib（一）

    一.urllib.request.urlopen(url, data=None, [timeout, ]*, cafile=None, capath=None, cadefault=False,    ...

  2. JavaSE 学习笔记之内部类（九）

    内部类:如果A类需要直接访问B类中的成员,而B类又需要建立A类的对象.这时,为了方便设计和访问,直接将A类定义在B类中.就可以了.A类就称为内部类.内部类可以直接访问外部类中的成员.而外部类想要访问内 ...

  3. BNUOJ 1021 信息战（七）——情报传递

    信息战(七)——情报传递 Time Limit: 3000ms Memory Limit: 262144KB 64-bit integer IO format: %lld      Java clas ...

  4. Object Detection: To Be Higher Accuracy and Faster

    本系列文章由 @yhl_leo 出品,转载请注明出处. 文章链接: http://blog.csdn.net/yhl_leo/article/details/51597496 在深度学习中有一类研究热 ...

  5. Docker在Windows 7下安装

    前言&一些资料: Docker之父:Solomon Hykes Docker生日:2013年3月 Docker历史小故事 1.下载地址:(daocloud是一个中国的docker服务商,知不知 ...

  6. B - Oulipo

    The French author Georges Perec (1936�C1982) once wrote a book, La disparition, without the letter ' ...

  7. Oracle-时间与字符串转换

    --UPDATE_TIME 是时间,直接转成字符串 SELECT to_char(MAX(UPDATE_TIME), 'yyyy-mm-dd hh24:mi:ss') as lastUpdateTim ...

  8. 【LeetCode】Longest Substring Without Repeating Characters 解题报告

    [题意] Given a string, find the length of the longest substring without repeating characters. For exam ...

  9. OC第六课

    主要内容:Block(Block语法.Block使用.Block实现数组排序) 一.Block语法 Block:块语法.本质上是匿名函数(没有函数名称的函数),和函数指针非常相似 函数回想: 实现了某 ...

  10. Unreal Engine 4 Camera Lag(摄影机延迟)

    以官方的Third Person Template为样例,Character蓝图中的USpringArmComponent就实现了摄影机和场景碰撞和交互等大部分的功能了. 要实现摄影机延时,仅仅须要改 ...