css选择器的综合使用

代码实现：

  1 <!DOCTYPE html>
  2 <html lang="en">
  3     <head>
  4         <meta charset="utf-8">
  5         <title>css的综合使用</title>
  6         <style>
  7             div {  8                 color: #daa520;
  9             }
 10             .red {    /*上面点声明，下面class调用。*/
 11                 color: red;
 12             }
 13             #green { 14                 color: green;
 15             }
 16             * { 17                 /*css选择器的优先级：!important > 行内样式>ID选择器 > 类选择器 > 标签 > 通配符 > 继承 > 浏览器默认属性*/
 18                 /*color: orange!important;*/
 19                 color: green;
 20
 21             }
 22             div ul li ol li { 23                 color: skyblue;
 24             }
 25             .blue { 26                 color: blue;
 27             }
 28             h4.blue { 29                 color: purple;
 30             }
 31             h2,h6,hr { 32                 text-align: center;
 33             }
 34             a:link { 35             /*未访问过的链接状态*/
 36             color: red;
 37             font-size: 25px;
 38             text-decoration: none; /*取消下划线*/
 39             font-weight: 700;    /*字体加粗*/
 40
 41         }
 42         a:visited { 43             /*已经访问过的链接*/
 44             color:#0e0e0e;
 45         }
 46         a:hover { 47                 /*鼠标经过的状态*/
 48             color: green;
 49         }
 50         a:active { 51                 /*鼠标按下的状态*/
 52             color: skyblue;
 53         }
 54         </style>
 55     </head>
 56     <body>
 57         <!-- 1.基本选择器：标签选择器、类选择器、id选择器、通配符选择器 -->
 58         <!-- 标签选择器：可以选择某一类标签 -->
 59         <div>标签选择器</div>
 60         <div>标签选择器</div>
 61         <div>标签选择器</div>
 62         <div>标签选择器</div>
 63
 64         <!-- 类选择器:可以选择一个或者多个标签-->
 65         <div>
 66             <ul>
 67                 <li><a href="#" class="red">类选择器</a></li>
 68             </ul>
 69             <h5 class="red">类选择器</h5>
 70         </div>
 71
 72         <!-- id选择器：#声明，id调用。 -->
 73         <div id="green">id选择器</div>
 74         <div id="green">id选择器</div>
 75         <div>id选择器</div>
 76
 77         <!-- 通配符选择器 -->
 78         <span>通配符选择器</span>
 79         <span>通配符选择器</span>
 80         <span>通配符选择器</span>
 81         <span>通配符选择器</span>
 82
 83         <!-- 2.复合选择器：后代选择器、子代选择器、交集选择器、并集选择器 -->
 84         <!-- 后代选择器：用空格隔开，选取子孙后代 -->
 85         <div>
 86             <ul>
 87                 <li>
 88                     <ol>
 89                         <li>后代选择器</li>
 90                     </ol>
 91                             后代选择器
 92                 </li>
 93             </ul>
 94         </div>
 95
 96         <!-- 交集选择器 -->
 97         <h4 class="blue">交集选择器</h4>
 98         <h4>交集选择器</h4>
 99         <h4>交集选择器</h4>
100         <h4>交集选择器</h4>
101
102         <!-- 并集选择器 :用逗号隔开,集体声明,相同样式的时候-->
103         <h2>并集选择器</h2>
104         <h6>并集选择器</h6>
105         <hr />
106
107         <!-- 3.链接伪类选择器：a:link{}、a:visited{}、a:hover{}、a:active{} -->
108         <a href="http://www.cnblogs.com/SophiaBlog/">三水舌田心</a>
109     </body>
110 </html>

代码

运行结果：

具体知识导图：

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

转载于:https://www.cnblogs.com/SophiaBlog/p/8826552.html

css选择器的综合使用相关推荐

前端--CSS选择器，盒子模型学习
文章目录一.CSS 1.概述 2.入门案例二.CSS选择器 1.概述 1)标签名选择器:根据属性条件选中网页中的所有元素 2)class选择器:根据class属性的选中元素(添加class属性,通 ...
CSS选择器/CSS字体文本属性/CSS引入方式/案例
CSS 1.CSS简介 1.1 HTML的局限性虽然 HTML 可以做简单的样式,但是带来的是无尽的臃肿和繁琐 1.2 CSS-网页的美容师 CSS 是层叠样式表 ( Cascading Style ...
CSS 选择器：BeautifulSoup4解析器
和 lxml 一样,Beautiful Soup 也是一个HTML/XML的解析器,主要的功能也是如何解析和提取 HTML/XML 数据. lxml 只会局部遍历,而Beautiful Soup 是基 ...
最常用的css选择器及兼容性 +几个好用却不多见的 nth-child等
你也许已经掌握了id.class.后台选择器这些基本的css选择器.但这远远不是css的全部.下面向大家系统的解析css中30个最常用的选择器,包括我们最头痛的浏览器兼容性问题.掌握了它们,才能真正领 ...
css 选择器伪元素_CSS伪元素-解释选择器之前和之后
css 选择器伪元素选择器之前 (Before Selector) The CSS ::before selector can be used to insert content before t ...
Spoooooky CSS 选择器
2019独角兽企业重金招聘Python工程师标准>>> 让我们今年有一些万圣节主题的帖子精神!我会从超过 GRAVE.eR.CSS选择器中挑选一些将冻结你骨头的选择器.也许不可能,但 ...
如何提升 CSS 选择器的性能？
CSS选择器对性能的影响源于浏览器匹配选择器和文档元素时所消耗的时间,所以优化选择器的原则是应尽量避免使用消耗更多匹配时间的选择器.而在这之前我们需要了解CSS选择器匹配的机制, 如子选择器规则: # ...
谈一谈浏览器解析CSS选择器的过程【前端每日一题-6】
谈一谈浏览器解析CSS选择器的过程? 这是一道发散题,可以根据自己的理解自行解答. 在开始前,我们必须了解一个真相:为什么排版引擎解析 CSS 选择器时一定要从右往左解析? 简单的来说:浏览器从右到左 ...
css 选择器（标签选择器、类选择器、层级选择器、id选择器、组选择器、伪类选择器、通配符选择器）
css 选择器的定义 css 选择器是用来选择标签的,选出来以后给标签加样式. css 选择器的种类标签选择器类选择器层级选择器(后代选择器) id选择器组选择器伪类选择器通配符选择器标 ...

css选择器的综合使用

css选择器的综合使用相关推荐

最新文章

热门文章