CSS有4种定义⽅式--类+ID+标签+伪类
CSS有4种定义⽅式:
1. 类，名称前⾯是⼀个点, 需要注意的是类实际上是属性, 点前⾯如果没有其它内容, 则默认是全局的, 有的话, 是专门那个对象的.
2. ID, 名称前⾯是个"#", 这种专门⽤于对象的id属性的, 本质上作⽤就是当你使⽤id的时候如果⼜想设置样式, 那么就不⽐再写class属性了. 还能避免其它id使⽤此属性, 因为id必须唯⼀. 当然, 这种避免基本没⽤, 因为你⽆需避免, 不⽤就⾏了.
3. 标签, 其实每个内置标签, ⽐如p, a, img, 都有预置好了的样式, 当然还有其它作⽤. 但是这个本质上和⾃定义标签是⼀样的，只不过内部已经定义好了.
4. 伪类, 伪类只有4种: link,hover,active,visited. 从名称来看, 是专门针对超链接标签a的, 但是后来扩展到其它任何标签. 伪类的本质是描述不同状态下的样式⾃动切换. 如果不⽤伪类, 你可以⽤JavaScript在相应的事件⾥⾃⼰处理. 伪类提供了⼀个简单的⽅法.
下⾯是关键的内容, 就是CSS标签的写法.cssclass属性
伪类冒号的两端不能有空格, 这说明, 冒号其实是⼀个连接符, 和点号是属性的连接符⼀样, 因为CSS的空格表⽰不同的对象，也就是说，任何CSS样式名称如果之间有空格, 那么就认为是两个标签, ⽽不是⼀个. 如果没空格, 就被认为是⼀个标签例
如div:hover{color:red}这个CSS语句实际上只定义了⼀个CSS对象, 就是div:hover, 或者说给div添加了⼀个属性hover, 这个属性不同于⼀般的属性, 它响应⿏标移动过来的消息, 使⽤的时候不⽤写hover, 所有div都⾃动会响应⿏标移过来, 颜⾊变成红⾊.
⽽div.hover{color:red}这个CSS语句也只定义了⼀个CSS对象, 就是div.hover, 这等于给div添加了⼀个普通属性hover, 这个属性怎么⽤呢? 需要你在div标签⾥写class="hover", 必须这么⽤, 否则不起作⽤.
div .hover{color:red}⼜表⽰什么呢? 因为div和.hover之间有个空格, 这实际上是两个标签, 但是描述了⼀种继承关系, 我们定义的hover样式, 必须在div的下⼀级标签⾥设置才起作⽤, div外边和div⾃⾝设置class="hover"都不起作⽤. 更多的也是⼀样, div .hover .abc, 表⽰3重继承关系, 想要这个样式起作⽤, 就需要div下⾯的⼀个标签设置class为hover, 这个标签内部的⼦标签再设置class为abc, 这样才⾏.
div,.hover{color:red}在div和.hover之间有个逗号, 这其实是⼀种并列关系, 是⼀种简写, 等价于div{color:red} .hover{color:red}这样两个标签定义.
CSS样式标签可以重复定义, 后⾯定义的样式会添加或者覆盖.
还有更怪异的写法: div.hover.abc{color:red}, 之间没有空格, 此时实际上定义的是div属性hover的属性abc的样式, 怎么使⽤它呢? 因为这种基本没什么⽤, 没有引⼊特殊的使⽤规则, 就是<div class="hover abc">⽂本</div>这样⽤(奇怪的是"abc hover"这样反着写也⾏, 实际上是并列关系), 这和使⽤两个样式的情况会冲突, 单看这⾥你不知道hover和abc是不是两个类.
总之如果此时⼜有同名的全局, ⽐如abc样式, hover样式, 那么也会⼀股脑全⽤上, 当然, div.hover.abc会有优先权. 没搞明⽩也没关系, 基本不要这么⽤就⾏了.

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。