有关css的选择器优先级以及父子选择器
2018-06-24 02:20:51来源：未知 阅读 ()
css，又称样式重叠表，如今的网页的样式基本是div+css写出来的，功能十分强大，要想在html文件中引入css文件需要在<head></head>标签内输入一行：<link rel=" stylesheet " type=" text/css " href=" XXX.css ">
css的一些基本样式也不一 一做介绍了，这个在手册以及一些学习网站上都会有，大家可以自行查阅；
css中有四种不同的选择器：1.类选择器（class选择器）；2.id选择器；3.html元素选择器；4.通配符选择器；
1.class选择器的使用：
. 类选择器名{ //类选择器前面的 . 一定要加
属性名：属性值；
...
}
2.id选择器的使用：
# id选择器名{ //在样式表中，id选择器的优先级最高
属性名：属性值；
...
}
3.html元素选择器：
html标签名{ // eg： a{ } img{ } body{ } 等等
属性名：属性值； //当定义一个html元素选择器后，所有该元素的样式都会发生改变
...
}
//同一html元素选择器中也可进行分类处理
html标签名.类名{ // eg: a . cls1 { a . cls2 {
属性名：属性值； 属性名：属性值； 属性名：属性值；
... ... ...
} } }
/* 应用到页面中 <a class="cls1"> 这个会渲染出a.cls1的样式
<a class="cls2"> 这个会渲染出a.cls2的样式 */
4.通配符选择器：
* { //通配符选择器会作用于所有的样式，大部分用来定义初始化所有内外页边距，但是其优先级是最低的
属性名：属性值； //通常一些有经验的web前端工程师习惯性把页边距清零
... //margin：0px ； padding：0px；
}
四个选择器的优先级： id选择器 > class选择器 > html元素选择器 > 通配符选择器 ；
父子选择器： //eg： <span="id">我<span>这里</span>有<span>一段</span>代码</span>
# id { // " 我 "，“ 有 ” ，“ 代码 ” 会渲染这个样式
属性名：属性值；
}
# id span{ // “ <span>这里</span>” 会渲染这个样式
属性名：属性值；
}
# id span span { // “ <span>一段</span> ” 会渲染这个样式
属性名：属性值；
}
父子选择器总结：父子选择器中可以有多层级（但在实际开发中不建议超过三层），
父子选择器有严格的层级关系；
任何类型的选择器都可以有父子选择器；
多个css文件可以相互引用，使用@import url（“被引入的路径和文件名”）指令引入 ；
标签：
版权申明：本站文章部分自网络，如有侵权，请联系：west999com@outlook.com
特别注意：本站所有转载文章言论不代表本站观点，本站所提供的摄影照片，插画，设计作品，如需使用，请与原作者联系，版权归原作者所有
- DIV居中的经典方法 2020-06-13
- CSS中的float和margin的混合使用 2020-06-11
- Html/css 列表项 区分列表首尾 2020-06-11
- css与javascript重难点，学前端，基础不好一切白费！ 2020-06-11
- ie8下透明度处理 2020-06-11
IDC资讯： 主机资讯 注册资讯 托管资讯 vps资讯 网站建设
网站运营： 建站经验 策划盈利 搜索优化 网站推广 免费资源
网络编程： Asp.Net编程 Asp编程 Php编程 Xml编程 Access Mssql Mysql 其它
服务器技术： Web服务器 Ftp服务器 Mail服务器 Dns服务器 安全防护
软件技巧： 其它软件 Word Excel Powerpoint Ghost Vista QQ空间 QQ FlashGet 迅雷
网页制作： FrontPages Dreamweaver Javascript css photoshop fireworks Flash
