CSS类,ID,标签和伪类详细说明-蒲公英云

CSS类,ID,标签和伪类详细说明

Myth丶恋晨 2022-08-06 02:24 285阅读 0赞

CSS有4种定义方式：

1、类：名称前面是一个点，需要注意的是类实际上是属性，点前面如果没有其它内容，则默认是全局的，有的话，是专门那个对象的

2、ID：名称前面是个”#“，这种专门用于对象的id属性的，本质上作用就是当你使用id的时候如果又想设置样式, 那么就不必再写class属性了。

还能避免其它id使用此属性，因为id 必须唯一。当然，这种避免基本没用，因为你无需避免，不用就行了

3、标签：其实每个内置标签，比如p， a， img，都有预置好了的样式，当然还有其它作用。但是这个本质上和自定义标签是一样的，只不过内部已经定义好了

4、伪类：

伪类只有4种: link，hover，active，visited

从名称来看，是专门针对超链接标签a的，但是后来扩展到其它任何标签

伪类的本质是描述不同状态下的样式自动切换

如果不用伪类，你可以用JavaScript在相应的事件里自己处理。伪类提供了一个简单的方法

5、CSS标签伪类的写法：

  **伪类冒号的两端不能有空格，** 这说明，冒号其实是一个连接符，和点号是属性的连接符一样，
  因为**CSS的空格表示不同的对象，**也就是说，任何CSS样式名称如果之间有空格，那么就别认为是两个标签，而不是一个。
  **(1)**如果没空格，就被认为是一个标签，例如**div:hover\{color:red\}**
       这个CSS语句实际上只定义了一个CSS对象，就是div:hover，或者说给div添加了一个属性hover，
       这个属性不同于一般的属性，它响应鼠标移动过来的消息，使用的时候不用写hover，所有div都自动会响应鼠标移过来， 颜色变成红色
  **(2)**而**div.hover\{color:red\}**
      这个CSS语句也只定义了一个CSS对象，就是div.hover，
      这等于给div添加了一个普通属性hover， 这个属性怎么用呢？ 
      需要你在div标签里写class="hover"， 必须这么用，否则不起作用
  **(3)****div .hover\{color:red\}**又表示什么呢？
      因为div和.hover之间有个空格，这实际上是两个标签，但是描述了一种继承关系，
      我们定义的hover样式，必须在div的下一级标签里设置才起作用， div外边和div自身设置class="hover"都不起作用

更多的也是一样，div .hover .abc，

      表示3重继承关系, 想要这个样式起作用，就需要div下面的一个标签设置class为hover，这个标签内部的子标签再设置class为abc， 这样才行
  **(4)****div,.hover\{color:red\}**
      在div和.hover之间有个逗号， 这其实是一种并列关系，是一种简写，等价于div\{color:red\} .hover\{color:red\}这样两个标签定义

CSS样式标签可以重复定义，后面定义的样式会添加或者覆盖

  **(5)**还有更怪异的写法： **div.hover.abc\{color:red\}**，
      之间没有空格， 此时实际上定义的是div属性hover的属性abc的样式， 怎么使用它呢？
      因为这种基本没什么用，没有引入特殊的使用规则，就是<div class="hover abc">文本</div>这样
     (奇怪的是"abc hover"这样反着写也行，实际上是并列关系)，这和使用两个样式的情况会冲突，单看这里你不知道hover和abc是不是两个类。
      总之如果此时又有同名的全局，比如abc样式，hover样式，那么也会一股脑全用上， 当然, div.hover.abc会有优先权。
      没搞明白也没关系，基本不要这么用就行了