基本选择器
首先来说一下,什么是选择器。在一个HTML页面中会有很多很多的元素,不同的元素可能会有不同的样式,
某些元素又需要设置相同的样式,选择器就是用来从HTML页面中查找特定元素的,找到元素之后就可以为
它们设置样式了。 选择器为样式规则指定一个作用范围。
基础选择器包括:
- 标签选择器
- 类选择器
- ID选择器
- 通用选择器
标签选择器
ID选择器
类选择器
通用选择器
总结:
<!-- css的选择器:1.基本选择器 2.高级选择器 1.标签选择器 标签选择器可以选中所有的标签元素,比如div,ul,li ,p等等 不管标签藏的多深,都能选中 选中的是所有的,而不是某一个,所以说 "共性" 而不是 ”特性“ 2.id选择器 # 选中id 同一个页面中id不能重复。 任何的标签都可以设置id id命名规范 要以字母 可以有数字 下划线 - 大小写严格区分 aa和AA 3.类选择器 1.所谓类 就是class . class与id非常相似 任何的标签都可以加类 但是类是可以重复 归类 2.同一个标签中可以携带多个类 用空格隔开 类的使用 能够决定前端工程师的css水平到底有多牛逼? 一定要有”公共类“的概念 总结: 1.不要去试图用一个类将我们的页面写完。这个标签要携带多个类,共同设置样式 2.每个类要尽可能的小,有公共的概念,能够让更多的标签使用 玩好了类 就等于玩好了css中的1/2 到底使用id还是用class? 答案:尽可能的用class。除非一些特殊情况可以用id 原因:id一般是用在js的。也就是说 js是通过id来获取到标签 -->
小练习
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>小练习myself</title> <style type="text/css"> /*.lv{*/ /*color: #4cae4c;font-size: 20px;*/ /*}*/ /*.lv2{*/ /*color: #2aabd2;*/ /*}*/ /*.lv3{*/ /*color: #c7254e;*/ /*text-decoration: underline;*/ /*}*/ /*设置公共的 下面直接调用*/ .big{ color: #4cae4c;font-size: 20px; } .lv{ color: #2aabd2; } .line{ text-decoration: underline; } </style> </head> <body> <div> <!--<p class="lv">The best revenge is massive success. </p>--> <!--<p class="lv2">The best revenge is massive success. </p>--> <!--<p class="lv3">The best revenge is massive success. </p>--> <!--直接调用上面公共的定义的class接口--> <!--2.同一个标签中可以携带多个类 用空格隔开--> <p class="lv big">The best revenge is massive success. </p> <p class="lv">The best revenge is massive success. </p> <p class="lv big line">The best revenge is massive success. </p> </div> <div></div> <div></div> </body> </html>