代码实现：

 <!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. css3部分注意事项

    CSS 选择符有哪些?哪些属性可以继承?优先级算法如何计算? CSS3新增伪类有那些? 1.选择器 id选择器( # myid) 类选择器(.myclassname) 标签选择器(div, h1, p ...

  2. dp有哪些种类

    dp有哪些种类 一.总结 一句话总结: 二.dp动态规划分类详解 动态规划一直是ACM竞赛中的重点,同时又是难点,因为该算法时间效率高,代码量少,多元性强,主要考察思维能力.建模抽象能力.灵活度. * ...

  3. Java Web项目实战第1篇之环境搭建

    写在前面的话 从今天开始一个Java Web实战项目,参考自 http://blog.csdn.net/eson_15/article/details/51277324 这个博客(非常感谢博主的分享精 ...

  4. SpringMVC demo 小例子，实现简单的登录和注册

    1.创建一个动态的web工程 2.导入springMvc所需要的jar包(这里可以去网上找,资源有很多) 前两部就不详细描述了,后面才是正经代码~ 首先有一个web.xml文件,这个属于大配置文件,由 ...

  5. 关于PyQt5，在pycharm上的安装步骤及使用技巧

    前序 之前学习了一款GUI图形界面设计的Tkinter库,但是经大佬的介绍,PyQT5全宇宙最强,一脸的苦笑 毫不犹豫的选择转战PyQT5,在学习之前需要先安装一些必须程序,在一番查阅后,发现PyQt ...

  6. 【codeforces 801B】Valued Keys

    [题目链接]:http://codeforces.com/contest/801/problem/B [题意] 定义一个对两个字符串x,y的f(x,y)函数; 返回的是一个字符串; 这个返回的字符串的 ...

  7. NetworkManager

    网络管理器(NetworManager)是检测网络.自动连接网络的程序.无论是无线还是有线连接,它都可以令您轻松管理.对于无线网络,网络管理器优先连接已知的网络并可以自动切换到最可靠的无线网络.利用网 ...

  8. PHP array_diff_assoc()

    定义和用法 array_diff_assoc() 函数返回两个数组的差集数组.返回的数组的元素都取自被比较的数组(既第一个数组). 和 array_diff() 函数 不同,本函数要求键名和键值都进行 ...

  9. HDU 4598

    这道题其实不需要考虑具体数值,但可以肯定的是,相连边的两端点必定有一正一负,至于谁正谁负,并不重要,这是可以思考的,很明显的一个二分图性质,如果不满足此条件,是不可能满足题目第二个条件的.所以首先对题 ...

  10. 使用Hive的正则解析器RegexSerDe分析nginx日志

    1.环境: hadoop-2.6.0 + apache-hive-1.2.0-bin 2.使用Hive分析nginx日志,站点的訪问日志部分内容为: cat /home/hadoop/hivetest ...