元素样式来源和选择器
元素样式来源
1.默认样式 用户代理(浏览器)的样式<h2>hello world</h2>
2.自定义样式
行内样式 style=”” <h2 style="color: green">hello world</h2>
文档样式 <style></style> <style>
p {
color: red;
}
</style>
外部样式 style.css
<link rel="stylesheet" href="./style.css" />
3.继承样式 通常颜色,字体,字号等都可以被继承,而盒模型的属性不行
<div>
<p>这是一段文字</p>
</div>
<style>
div {
border: 1px solid;
color: blue;
}
p {
color: green;
color: inherit;
}div是父级p是子级,p继承div
样式书写顺序 写到后面的会覆盖前面的样式
基本选择器
标签 h2 {
color: hotpink;
}
属性[…] id class h2[title=”hello”] {
color: khaki;
}
群组 用逗号分隔
h2#a,
h2.b {
color: darkgreen;
}
通配
html body {
background-color: red;
}
上下文选择器
子元素 > <style>
.list > li {
border: 1px solid;
}
</style>
后代 空格
<style>
.list li {
border: 1px solid;
}
相邻兄弟 + .item.second + li {
background-color: darkgreen;
}
所有兄弟 ~
.item.second ~ li {
background-color: darkkhaki;
}
选择器权重
id,class,tag看成一个“三位整数”
id:百位 class:十位 tag:个位
h2 001
div h3 002 002>001即div h3>h3
.top 010 010>002即.top>div h3
.top h3 011 011>010即.top h3>.top
title 100 100>011即#tiltle>.top h3
class,id,tag
class 用于多个元素
id 用于唯一元素,权重太高,为了让你的代码具有弹性,尽可能用class
tag 标签数量有限,class可以任意命名
上一篇: ThinkPHP快捷步骤D和M的区别
下一篇: PHP实例制作水印图片