CSS导入方式和六种选择器
1.css的导入方式
1.1 行内嵌式

1.2 内部方式
1.2.1含义:
css代码写在<head>的<style>标签中
1.2.2 优点
方便在同页面中修改样式
1.2.3 缺点
不利于在多页面间共享复用代码及维护,对内容与样式的分离也不彻底
1.3 外部方式

1.4 @import方式

备注:link和@import区别:
1.link所有浏览器都支持,@import某些版本低的IE不支持
2.@import是等待html加载完成才加载
3.@import不支持js动态修改
1.5 css样式优先级
行内样式>内部样式表>外部样式表
2.css选择器
2.1标签选择器

2.2类选择器


2.3 ID选择器


下面的三个为css高级应用(复合选择器):后代选择器,并集选择器,交集选择器
2.4 后代选择器
在css选择器中通过嵌套的方式,对特殊位置的HTML标签进行声明
外层的标签写在前面,内层的标签写在后面,之间用空格分隔
嵌套标签的时候,内层的标签成为外层标签的后代

2.5交集选择器
由两个选择器直接连接构成,选中二者各自元素范围的交集
第一个必须是标签选择器,第二个必须是类选择器或者ID选择器
选择器之间不能有空格,必须连续书写

2.6并集选择器多个选择器通过逗号连接而成
利用并集选择器同时声明风格相同样式

2.7选择器的优先级
ID选择器>类选择器>标签选择器
CSS导入方式和六种选择器的更多相关文章
- css基础语法一(选择器与css导入方式)
页面中,所有的CSS代码,需要写入到<style></style>标签中.style标签的type属性应该选择text/css,但是type属性可以省略. CSS修改页面中的所 ...
- 第一篇 css导入方式 及选择器
一 推荐资料 推荐书籍 css Zen Garden 中文(css禅意花园) 二.css样式 1.css样式表特征 继承性 大多数css的样式规则可以被继承 层叠性 1)可以定义 多个样式 2)不冲 ...
- web@css引入方式,基本选择器,3大特性,高效运行
4.高效的css 所谓高效就是让浏览器查找更少的元素标签来确定匹配的style元素. 1.不要再ID选择器前使用标签名 解释:ID选择是唯一的,加上标签名相当于画蛇添足了,没必 ...
- CSS hack方式一览【转】
做前端多年,虽然不是经常需要hack,但是我们经常会遇到各浏览器表现不一致的情况.基于此,某些情况我们会极不情愿的使用这个不太友好的方式来达到大家要求的页面表现.我个人是不太推荐使用hack的,要知道 ...
- 史上最全的CSS hack方式一览
做前端多年,虽然不是经常需要hack,但是我们经常会遇到各浏览器表现不一致的情况.基于此,某些情况我们会极不情愿的使用这个不太友好的方式来达到大家要求的页面表现.我个人是不太推荐使用hack的,要知道 ...
- [转]史上最全的CSS hack方式一览
做前端多年,虽然不是经常需要hack,但是我们经常会遇到各浏览器表现不一致的情况.基于此,某些情况我们会极不情愿的使用这个不太友好的方式来达到大家要求的页面表现.我个人是不太推荐使用hack的,要知道 ...
- CSS hack方式
史上最全的CSS hack方式一览 做前端多年,虽然不是经常需要hack,但是我们经常会遇到各浏览器表现不一致的情况.基于此,某些情况我们会极不情愿的使用这个不太友好的方式来达到大家要求的页面表现 ...
- 史上最全的CSS hack方式一览(转)
做前端多年,虽然不是经常需要hack,但是我们经常会遇到各浏览器表现不一致的情况.基于此,某些情况我们会极不情愿的使用这个不太友好的方式来达到大家要求的页面表现.我个人是不太推荐使用hack的,要知道 ...
- 史上最全的CSS hack方式一览 jQuery 图片轮播的代码分离 JQuery中的动画 C#中Trim()、TrimStart()、TrimEnd()的用法 marquee 标签的使用详情 js鼠标事件 js添加遮罩层 页面上通过地址栏传值时出现乱码的两种解决方法 ref和out的区别在c#中 总结
史上最全的CSS hack方式一览 2013年09月28日 15:57:08 阅读数:175473 做前端多年,虽然不是经常需要hack,但是我们经常会遇到各浏览器表现不一致的情况.基于此,某些情况我 ...
随机推荐
- python基础修改haproxy配置文件
1.通过eval(),可以将字符串转为字典类型. 2.Encode过程,是把python对象转换成json对象的一个过程,常用的两个函数是dumps和dump函数.两个函数的唯一区别就是dump把py ...
- 2016/11/10 吃吃喝喝Hacking Thursday Night聚餐活动 at Dunkin Donuts
店名:Dunkin Donuts 唐恩都乐 点评:http://www.dianping.com/shop/21378231 地址:静安区南京西路1649号静安公园内(近静安公园) 走法:地铁2号线静 ...
- 当鼠标hover的时候,使用tip将overflow:hidden隐藏的文字显示完全
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...
- iOS多线程之Thread
多线程 • Thread 是苹果官方提供的,简单已用,可以直接操作线程对象.不过需要程序员自己管理线程的生命周期,主要是创建那部分 优缺点 面向对象,简单易用 直接操作线程对象 需要自己管理线程生命周 ...
- 8.【Spring Cloud Alibaba】配置管理-Nacos
使用Nacos管理配置 架构图 配置文件遵循的格式 bootstrap.yml pom.xml <dependency> <groupId>org.springframewor ...
- python版md-to-html编辑器
用PyQt5封装python-markdown,支持自定义样式. 详情:https://blog.phyer.cn/article/4523
- 组件化思路:以selection为例子,使用prop-types实现组件化控制,重用
需求 书接上文,UI 积累之select section 这里又来两个需求了. 当我点击选择了option后,我应该看到的是我选择的option的内容 多例重用,即同样是个selection,我只是需 ...
- 前端每日实战:27# 视频演示如何用纯 CSS 创作一个精彩的彩虹 loading 特效
效果预览 按下右侧的"点击预览"按钮可以在当前页面预览,点击链接可以全屏预览. https://codepen.io/comehope/pen/vjvoow 可交互视频教程 此视频 ...
- Python - loguru日志库,高效输出控制台日志和日志记录
一.安装loguru loguru的PyPI地址为:https://pypi.org/project/loguru/ GitHub仓库地址为:https://github.com/Delgan/log ...
- Layabox 预制体prefab使用
//腊鸭官方api不详细系列之ui预制体 // 创建预制体文件,随便拖一个场景中的预制体到 Assets的任意文件夹中,要规范的话则放在Prefab中 // 上一步操作完后就可以在文件夹中看到.pre ...