元素样式来源和选择器
元素样式来源
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可以任意命名
更多相关文章
- Android(安卓)开发布局 线性布局---LinearLayout
- Android(安卓)写一个属于自己的印象笔记
- Android布局文件的属性值解析
- 自定义android的tab样式
- android中数据存储及对xml的解析
- Android自定义Button按钮显示样式
- Android(安卓)背景透明度设置和设置GridView元素间距
- [androidUI]一些布局
- Android周学习Step By Step（4）--界面布局