元素样式来源和选择器

元素样式来源

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可以任意命名