CSS的选择器

CSS基础选择器

标签选择器
就是用标签名来当做选择器。
1) 所有标签都能够当做选择器,比如body、h1、dl、ul、span等等
2) 不管这个标签藏的多深,都能够被选择上。
3) 选择的是所有的,而不是某一个。所以是共性,而不是特性。
id选择器
#表示选择id
1       #lj1{
2           font-size: 60px;
3           font-weight: bold;
4           color:black;
5       }
1)任何的标签都可以有id,id的命名要以字母开头,可以有数字、下划线。大小写严格区别,也就是说mm和MM是两个不同的id。
2)同一个页面内id不能重复,即使不一样的标签,也不能是相同的id。
也就是说,如果有一个p的id叫做haha,这个页面内,其他所有的元素的id都不能叫做haha。
类选择器
.就是类的符号。类的英语叫做class。
所谓的类,就是class属性,class属性和id非常相似,任何的标签都可以携带class属性。
class属性可以重复,比如,页面上可能有很多标签都有teshu这个类:
1   <h3>我是一个h3啊</h3>
2   <h3 class="teshu">我是一个h3啊</h3>
3   <h3>我是一个h3啊</h3>
4   <p>我是一个段落啊</p>
5   <p class="teshu">我是一个段落啊</p>
6   <p class="teshu">我是一个段落啊</p>
css里面用.来表示类:
1       .teshu{
2           color: red;
3       }

同一个标签,可能同时属于多个类,用空格隔开:
1<h3 class="teshu  zhongyao">我是一个h3啊</h3>
这样,这个h3就同时属于teshu类,也同时属于zhongyao类。

初学者常见的错误,就是写成了两个class:
1<h3 class="teshu" class="zhongyao">我是一个h3啊</h3>

所以要总结两条:
1) class可以重复,也就是说,同一个页面上可能有多个标签同时属于某一个类;
2) 同一个标签可以同时携带多个类。
正确的思路,就是用所谓“公共类”的思路,就是我们类就是提供“公共服务”,比如有绿、大、线,一旦携带这个类名,就有相应的样式变化:
1   <style type="text/css">
2       .lv{
3           color:green;
4       }
5       .da{
6           font-size: 60px;
7       }
8       .xian{
9           text-decoration: underline;
10      }
11  </style>
每个标签,就去选取自己想要的类:
1    <p class="lv da">段落1</p>
2   <p class="lv xian">段落2</p>
3   <p class="da xian">段落3</p>

也就是说:
1) 不要去试图用一个类名,把某个标签的所有样式写完。这个标签要多携带几个类,共同造成这个标签的样式。
2) 每一个类要尽可能小,有“公共”的概念,能够让更多的标签使用。

到底用id还是用class?
答案:尽可能的用class,除非极特殊的情况可以用id。
原因:id是js用的。也就是说,js要通过id属性得到标签,所以我们css层面尽量不用id,要不然js就很别扭。另一层面,我们会认为一个有id的元素,有动态效果。

CSS高级选择器

后代选择器
1   <style type="text/css">
2       .div1 p{
3           color:red;
4       }
5   </style>

空格就表示后代,.div1 p 就是.div1的后代所有的p。
强调一下,选择的是后代,不一定是儿子。

比如:
1   <div class="div1">
2       <ul>
3           <li>
4               <p>段落</p>
5               <p>段落</p>
6               <p>段落</p>
7           </li>
8       </ul>
9   </div>
能够被下面的选择器选择上:
1       .div1 p{
2           color:red;
3       }
所以,看见这个选择器要知道是后代,而不是儿子。选择的是所有.div1“中的”p,就是后代p。

空格可以多次出现。
1       .div1 .li2 p{
2           color:red;
3       }
就是.div1里面的后代.li2里面的p。

后代选择器,就是一种平衡:共性、特性的平衡。当要把某一个部分的所有的什么,进行样式改变,就要想到后代选择器。

后代选择器,描述的是祖先结构。
交集选择器
1h3.special{
2   color:red;
3}
选择的元素是同时满足两个条件:必须是h3标签,然后必须是special标签。
交集选择器没有空格。
所以有没有空格
1div.red
和
1div .red
不是一个意思。
并集选择器(分组选择器)
1h3,li{
2   color:red;
3}
用逗号就表示并集。
通配符*
*就表示所有元素。
1*{
2   color:red;
3}
效率不高,如果页面上的标签越多,效率越低,所以页面上不能出现这个选择器。

一些CSS3选择器

儿子选择器>

IE7开始兼容,IE6不兼容。

1 div>p{
2   color:red;
3}
div的儿子p。和div的后代p的截然不同。
能够选择:
1   <div>
2       <p>我是div的儿子</p>
3   </div>
不能选择:
1   <div>
2       <ul>
3           <li>
4               <p>我是div的重孙子</p>
5           </li>
6       </ul>
7   </div>
序选择器

IE8开始兼容;IE6、7都不兼容

选择第1个li:
1   <style type="text/css">
2       ul li:first-child{
3           color:red;
4       }
5   </style>

选择最后一个1i:
1       ul li:last-child{
2           color:blue;
3       }
由于浏览器的更新需要过程,所以现在如果公司还要求兼容IE6、7,那么就要自己写类名:
1   <ul>
2       <li class="first">项目</li>
3       <li>项目</li>
4       <li>项目</li>
5       <li>项目</li>
6       <li>项目</li>
7       <li>项目</li>
8       <li>项目</li>
9       <li>项目</li>
10      <li>项目</li>
11      <li class="last">项目</li>
12  </ul>
用类选择器来选择第一个或者最后一个:
1       ul li.first{
2           color:red;
3       }
4
5       ul li.last{
6           color:blue;
7       }
下一个兄弟选择器

IE7开始兼容,IE6不兼容。

+表示选择下一个兄弟
1   <style type="text/css">
2       h3+p{
3           color:red;
4       }
5   </style>
选择上的是h3元素后面紧挨着的第一个兄弟。
1    <h3>我是一个标题</h3>
2   <p>我是一个段落</p>
3   <p>我是一个段落</p>
4   <p>我是一个段落</p>
5   <h3>我是一个标题</h3>
6   <p>我是一个段落</p>
7   <p>我是一个段落</p>
8   <p>我是一个段落</p>
9   <h3>我是一个标题</h3>
10  <p>我是一个段落</p>
11  <p>我是一个段落</p>
12  <p>我是一个段落</p>
13  <h3>我是一个标题</h3>

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏Google Dart

AngularDart Material Design 扩展面板 顶

一个或多个面板在扩展面板集中组合在一起。 单击面板时,面板内容将展开。 面板由名称,值,可选的辅助文本和展开的面板内容组成。

10320
来自专栏较真的前端

Vue相关的前端面试题,每道题都很经典~

6.8K30
来自专栏西安-晁州

关于vue.js中slot的理解

16230
来自专栏大壮

UIKit框架 - TextKit

24540
来自专栏西安-晁州

关于vue.js中slot的理解

slot这块看官网文档,起初有点不懂,仔细研究还是最终理解了,slot是用来干嘛的呢,先看下一个例子:

1.2K20
来自专栏进击的君君的前端之路

事件

21230
来自专栏python学习路

一、HTML

html概述和基本结构 html概述 HTML是 HyperText Mark-up Language 的首字母简写,意思是超文本标记语言,超文本指的是超链接,...

1.8K40
来自专栏十月梦想

vue入门基础详解之组件元素不对应以及ref用法

在我们使用table时候,table的结构是table>tbody>tr>td,但是我们之间在table下面定义一个包含详情的组件,在table下使用多个会出现...

19720
来自专栏xingoo, 一个梦想做发明家的程序员

用vc++做滚动条控件

  首先用应用向导产生一名为scro的基于对话框的应用,再利用对话框编辑器加入两个一样的水平滚动条,两个滚动条的id分别取idc—scr1和idc—scr2,结...

20170
来自专栏DannyHoo的专栏

不让按钮进入高亮(HighLighted)状态

版权声明:本文为博主原创文章,未经博主允许不得转载。 https://blog.csdn.net/u010105969/article/details/...

13920

扫码关注云+社区

领取腾讯云代金券