语法
h1 {
color: wheat;
font-size: 14px;
}
h1 表示选择器
链接
外链(推荐)
<link type="text/css" rel="stylesheet" href="static/css/style.css" >
嵌入
<!--在html文件中-->
<style>
li {
margin: 0;
list-style: none;
}
p {
margin: 10px;
}
</style>
内链
<!--在标签中-->
<p style="margin: 10px">Example Content</p>
选择器
id选择器
/* #id id选择器选择某个元素 id通常唯一 */
#book{
font-size: 60px;
font-weight: 200;
}
class选择器
/* .class 类选择器选择某一类元素*/
.header{
color: #e5ff4c;
text-decoration: line-through;
}
属性选择器
<!-- [属性] 属性选择器选择有disable属性就会选中 -->
<input value="wang" disabled/>
<style>
[disabled] {
background: red;
color: white;
}
</style>
属性选择器有模糊匹配
[abc^="def"] 选择 abc 属性值以 "def" 开头的所有元素
[abc$="def"] 选择 abc 属性值以 "def" 结尾的所有元素
[abc*="def"] 选择 abc 属性值中包含子串 "def" 的所有元素
伪类
状态伪类选择器
标签处于某一状态下才会被选中,比如链接在被访问过后显示不同颜色
:link 超链接点击之前
:visited 链接被访问过之后
:hover “悬停”，鼠标放到标签上的时候
:active “激活”，鼠标点击标签，但是不松手时。
:focus 是某个标签获得焦点时的样式（比如某个输入框获得焦点
<a href="https://juejin.cn/">
掘金
</a>
<style>
/* a标签默认状态下为黑色 */
a:link{
color: black;
}
/* a标签访问过为灰色 */
a:visited{
color: gray;
}
/* a标签鼠标移到这个链接上下为橙色 */
a:hover{
color: orange;
}
</style>
结构伪类选择器
根据根据dom节点在dom树中出现的位置来判断是否选中
父子元素结构
父元素是指E的父元素
E:first-child 匹配父元素的第一个子元素E。
E:last-child 匹配父元素的最后一个子元素E。
E:nth-child(n) 匹配父元素的第n个子元素E。注意，盒子的编号是从1开始算起，不是从0开始算起。
E:nth-child(odd) 匹配奇数
E:nth-child(even)` 匹配偶数
E:nth-last-child(n)` 匹配父元素的倒数第n个子元素E
兄弟元素结构
E:first-of-type 匹配同类型中的第一个同级兄弟元素E。
E:last-of-type 匹配同类型中的最后一个同级兄弟元素E。
E:nth-of-type(n) 匹配同类型中的第n个同级兄弟元素E。
E:nth-last-of-type(n) 匹配同类型中的倒数第n个同级兄弟元素E。
<ol>
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
</ol>
<style>
/* */
li {
list-style-position: inside;
border-bottom: 1px solid;
padding: 0.5em;
}
/* 如果这个li是父级的第一个子节点,就选中它 */
li:first-child {
color: coral;
}
/* 如果这个li是父级的最后一个子节点,就选中它 */
li:last-child {
border-bottom: none;
}
</style>
组合
名称 语法 说明 实例 实例说明
直接组合 AB 满足A的同时满足B input：focus input标签在focus状态下险种
后代组合 A B 选中B,如果它是A的子孙 div a a是div的后代(无论字还是孙)时选中
亲自组合 A>B 选中B,如果它是A的子元素 section > p p是section子元素时选中
兄弟选择器 A~B 选中B,如果它在A后且与A同级 h2~p p在h2后面且与h2同级时选中
相邻选择器 A+B 选中B,如果他紧跟在A的后面 h2+p p在h2的下一个标签时选中
深入CSS
选择器的特异度
当多个选择器同时选中同一个标签时，通过选择器的特异度(Specificity)判断哪一个选择器生效
# . E
id (伪)类 标签
#nav .list li a:link 1 2 2
.hd ul.lingks a 0 2 2
理解为第一个特异度为 122，第二个特异度为 022，第一个的特异度高于第二个，第一个生效，覆盖第二个属性的值，可以用覆盖的能力做一些工程化的设计，例如
<button class="btn">普通按钮</button>
<button class="btn primary">特殊按钮</button>
<style>
.btn {
display: inline-block;
padding: .36em .8em;
margin-right: .5em;
line-height: 1.5;
text-align: center;
cursor: pointer;
border-radius: .3em;
border: none;
background: #e6e6e6;
color: #218de6;
}
.btn.primary {
color: #fff;
background: #218de6;
}
</style>
继承
某些属性会自动继承其父元素的计算值，除非显示指定一个值
一般跟文字相关的属性可以继承，盒模型相关的尺寸一般不可继承
<p>This is a
<em>text</em>
of
<strong>inherit</strong>
</p>
<style>
body {
font-size: 20px;
}
p {
color: blue;
}
em {
color: red;
}
</style>
em标签和strong标签继承了p标签的font-size属性，strong标签又继承了p标签的color属性
显式继承
一个不可继承的属性需要继承父标签属性时，可以将属性设置为 inherit 来显式继承
* {
/* *号表示选中所有标签 */
box-sizing: inherit;
}
html {
box-sizing: border-box;
}
.some-widget {
box-sizing: content-box;
}
初始值
CSS中，每个属性都有一个初始值
background-color的数是指为transparent
margin-left的初始值文0
可以使用 initial 关键字显示重置为初始值
background-color：initial
