CSS有4种定义方式--类+ ID+ 标签+ 伪类
来源:互联网 发布:网络钟点工陪人聊天 编辑:程序博客网 时间:2024/06/05 07:58
CSS有4种定义方式:
1.类, 名称前面是一个点, 需要注意的是类实际上是属性, 点前面如果没有其它内容, 则默认是全局的, 有的话, 是专门那个对象的.
2. ID, 名称前面是个"#", 这种专门用于对象的id属性的, 本质上作用就是当你使用id的时候如果又想设置样式, 那么就不比再写class属性了. 还能避免其它id使用此属性, 因为id必须唯一. 当然, 这种避免基本没用, 因为你无需避免, 不用就行了.
3. 标签, 其实每个内置标签, 比如p, a, img, 都有预置好了的样式, 当然还有其它作用. 但是这个本质上和自定义标签是一样的, 只不过内部已经定义好了.
4. 伪类, 伪类只有4种: link,hover,active,visited. 从名称来看, 是专门针对超链接标签a的, 但是后来扩展到其它任何标签. 伪类的本质是描述不同状态下的样式自动切换. 如果不用伪类, 你可以用JavaScript在相应的事件里自己处理. 伪类提供了一个简单的方法.
下面是关键的内容, 就是CSS标签的写法.
伪类冒号的两端不能有空格, 这说明, 冒号其实是一个连接符, 和点号是属性的连接符一样, 因为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会有优先权. 没搞明白也没关系, 基本不要这么用就行了.
1.类, 名称前面是一个点, 需要注意的是类实际上是属性, 点前面如果没有其它内容, 则默认是全局的, 有的话, 是专门那个对象的.
2. ID, 名称前面是个"#", 这种专门用于对象的id属性的, 本质上作用就是当你使用id的时候如果又想设置样式, 那么就不比再写class属性了. 还能避免其它id使用此属性, 因为id必须唯一. 当然, 这种避免基本没用, 因为你无需避免, 不用就行了.
3. 标签, 其实每个内置标签, 比如p, a, img, 都有预置好了的样式, 当然还有其它作用. 但是这个本质上和自定义标签是一样的, 只不过内部已经定义好了.
4. 伪类, 伪类只有4种: link,hover,active,visited. 从名称来看, 是专门针对超链接标签a的, 但是后来扩展到其它任何标签. 伪类的本质是描述不同状态下的样式自动切换. 如果不用伪类, 你可以用JavaScript在相应的事件里自己处理. 伪类提供了一个简单的方法.
下面是关键的内容, 就是CSS标签的写法.
伪类冒号的两端不能有空格, 这说明, 冒号其实是一个连接符, 和点号是属性的连接符一样, 因为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会有优先权. 没搞明白也没关系, 基本不要这么用就行了.
0 0
- CSS有4种定义方式--类+ ID+ 标签+ 伪类
- CSS类,ID,标签和伪类详细说明
- CSS类,ID,标签和伪类详细说明
- CSS的种类:类/标签样式/ID选择符/伪类
- css伪类,a标签的四种状态
- CSS 伪类(a标签) 背景
- css id 类名 标签名定义元素样式-----权重分析
- Div+CSS如何正确的定义CSS伪类
- css中类,ID,伪类等的学习心得
- CSS的id、class、pseudo-class(伪类)
- <学习CSS>第二天笔记-选择器(标签选择器、类选择器、css命名规范、谷歌案例、多类名选择器、id选择器、通配符选择器、伪类选择器)
- CSS中定义链接样式的四个伪类
- DivCSS中如何正确的定义CSS伪类?
- CSS :hover伪类选择定义和用法
- css a标签的visied伪类失效。
- HTML/CSS: 浅谈<a>标签及伪类选择器
- 学习日记-a标签伪类css属性查找
- css 伪类 伪元素
- 游戏服务器数据库踩过的坑
- ios开发多线程篇——创建线程
- 游戏服务器,每秒需要处理百来次数据库的读写操作,如何设计比较好?
- Selenium - Why there is no need of external firefox driver like IE and chrome in selenium2.0?
- C++ 类的static成员
- CSS有4种定义方式--类+ ID+ 标签+ 伪类
- 音视频开发需要的一些工具总结
- Linear Programming Learning Notes (3) Degeneracy
- windows svn命令行客户端
- Redis测试分析(pipeline模式)
- 棋牌游戏服务器架构: 详细设计(三) 数据库设计
- 第八周上机实践项目-项目三-指向学生类的指针
- iOS: ARC和非ARC下使用Block属性的问题
- PCA方法的应用场景