一, 通配符选择器
作用: 给当前页面上所有的标签设置属性
(2) 格式:
*{属性: 值;}
(3) 注意点: 由于通配符选择器是给界面上所有的标签设置属性, 因此在设置之前会遍历所有的标签, 如果当前界面上的标签比较多, 那么性能就会比较差, 所以一般在企业开发过程中一般不会使用通配符选择器.
(4) 例子:
- *{
- color: red;
- }
........ 省略代码.......
- <h1>
- 我是标题
- </h1>
- <p>
- 我是段落
- </p>
- <a href="#">
- 我是一个链接
- </a>
二, 选择器综合练习
下面的这些方法都可以对 p 标签进行属性的设置
没有最好的方法, 只有更合适的做法, 对之前学习的选择器都练习了一遍
- <!DOCTYPE html>
- <HTML lang="en">
- <head>
- <meta charset="UTF-8">
- <title>
- d82_selector_comprehensive_exercise
- </title>
- <style>
- \ /* 标签选择器 */ p{ color: red; } /*id 选择器 */ #identity1{ color: green; }
- #identity2{ color: green; } /*class 选择器 */ .para{ color: blue; } /* 后代选择器
- */ div p{ color: yellow; } /* 子元素选择器 */ div>p{ color: red; } /* 交集选择器 */
- p.para{ color: green; } /* 并集选择器 */ #identity1,#identity2{ color:wheat;
- } /* 通用兄弟选择器 */ h1~p{ color: #37fa1e; } /* 序选择器 */ p:nth-of-type(n+1){
- color:green; } /* 属性选择器 */ p[id]{ color: #ff4b54; }
- </style>
- </head>
- <body>
- <h1>
- 我是标签
- </h1>
- <div>
- <p id="identity1" class="para">
- 我是段落 1
- </p>
- <p id="identity2" class="para">
- 我是段落 2
- </p>
- </div>
- </body>
- </HTML>
自己是一个 6 年的前端工程师, 希望本文对你有帮助!
这里推荐一下我的前端学习交流扣 qun:731771211 , 里面都是学习前端的, 如果你想制作酷炫的网页, 想学习编程. 自己整理了一份 2019 最全面前端学习资料, 从最基础的 HTML+CSS+JS[炫酷特效, 游戏, 插件封装, 设计模式] 到移动端 HTML5 的项目实战的学习资料都有整理, 送给每一位前端小伙伴, 每天分享技术
点击: 加入
来源: http://www.jianshu.com/p/666f24f5cd8f