欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页

元素样式来源和选择器

程序员文章站 2022-06-02 19:33:42
...

元素样式来源

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