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


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会有优先权。

 


免责声明!

本站转载的文章为个人学习借鉴使用,本站对版权不负任何法律责任。如果侵犯了您的隐私权益,请联系本站邮箱yoyou2525@163.com删除。



 
粤ICP备18138465号  © 2018-2025 CODEPRJ.COM