1. CSS的选择器
基础选择器:
- 标签选择器:通过同名标签选择,同名标签可设置公共样式
<style> h3 { color:red;} p { color:blue;} </style> <p>段落</p>
- id选择器:通过标签的id属性选择
<style> #id1 { color:red;} </style> <p id="id1">段落</p>
- 类名选择器:通过class属性选择
<style> .pa { color:blue;} .paa { color:red;} </style> <p class="pa">段落</p> <p class="pa pas">段落</p>
- 通配符选择:选择包含html在内的所有标签,通常用来清除默认样式
<style> * { color:blue;} </style> <p>段落</p>
高级选择器:
- 后代选择器:注意后代关系可不为父子关系
<style> div ul li { color:blue;} </style>
- 交集选择器:多个选择器直接连接,中间无任何符号
<style> p.par { color:blue;} </style>
- 并集选择器:多个选择选择器,逗号分隔
<style> #id, .pa, p { color:blue;} </style>
2. 选择器的伪类
<a>标签的伪类
<style>
a:link {
color: red;
}
a:visited {
color: green;
}
a:hover {
color: yellow;
}
a:active {
color: blue;
}
</style>
<a href="https://www.baidu.com">点击跳转到百度</a>
普通选择器,如span等,有hover、active伪类
书写顺序:<a>标签有2~3个触发状态,严格按照书写顺序 link、visited、hover、active
执行
3. CSS的继承性和层叠性
继承性:后代标签继承祖先的文字样式
层叠性:选择器设置的样式被其它选择器覆盖,即层叠
id选择器 | class选择器 | 标签选择器 | |
---|---|---|---|
权重 | 100 | 010 | 001 |
选择器数量 | a | b | c |
总权重 | 100*a+10*b+c=abc |