(一)CSS基本语法:
1.CSS样式规则 = 选择器 +样式声明(一条或多条),每条声明由一个属性和一个值组成,属性和值用冒号间隔,样式声明用分号间隔,样式声明组用{}间隔.
2.内部样式表:
(1)内联样式:写在标签中的style属性中(仅控制当前标签)
(2)写在body体的style标签中(可以控制多个标签)
(3)写在head头的style标签中(也可以控制多个标签)
(4)优先级:(1)>(2)>(3)
3.外部样式表:
利用link标签从外部引入css样式
4.选择器优先级:标签选择器<类class选择器<id选择器<内联样式style属性
5.CSS基本选择器:
(1)标签选择器: h3{border:1px dashed red;} 选择所有<h3>标签
(2)层级选择器: ul li{list-style-type:none;} 选择<ul>下边所有<li>标签
(3)id选择器: #bg-blue {background-color: lightblue;} 选择所有id="bg-blue "的元素
(4)类class选择器: .bg-green {background-color: lightgreen;} 选择所有class="bg-green"的元素
(5)属性选择器: li[id="bg-blue"] {border: 2px solid red;} 选择id="bg-blue"的所有<li>标签
(6)群组选择器: #bg-blue, .bg-green {border: 2px solid blue;} 选择所有id="bg-blue"和class="bg-green"的元素
(7)相邻选择器: #bg-blue + * {background-color: yellow;} 选择id="bg-blue"的下一个同级元素
(8)兄弟选择器: #bg-blue ~ * {background-color: yellow; } 选择id="bg-blue"后面的所有同级兄弟元素
6.CSS伪类选择器
(1)子元素选择器
ul :first-child {background-color: coral; }指定只有当<ul>元素是其父级的第一个子级的样式。
ul :last-child {background-color: coral; }指定只有当<ul>元素是其父级的最后一个子级的样式。
ul :nth-child(6) {background-color: coral; }指定只有当<ul>元素是其父级的第六个子级的样式。
ul :nth-last-child(3) {background-color: coral; }指定只有当<ul>元素是其父级的倒数第三个子级的样式。
(2)类型选择器
ul li:first-of-type {background-color: darkorchid; }选择每个<li>元素是其父级<ul>的第一个<li>元素
ul li:last-of-type {background-color: darkorchid; }选择每个<li>元素是其父级<ul>的最后一个<li>元素
ul li:nth-of-type(6) {background-color: darkorchid; }选择每个<li>元素是其父级<ul>的第六个<li>元素
(我们发现, 伪类中的子元素选择器与类型选择器的功能几乎是一样的,那我们应该用哪个呢?
这两类伪类选择器关注点不同, 子元素选择器的重点是 "child" 关键字上,关注的是子元素位置
而类型选择器关注点在 "type" 关键字上,重点是元素的类型 )
(3)表单控件
form :enabled {background-color: wheat;}选择每一个已启用的表单
form :checked + * {color: red;}将单选按钮中的文本前景色设置为红色,使用了伪类和相邻选择器
form :invalid {color: red;}当在控件中输入无效值文本自动变成红色
form :focus {background-color: lightgreen;}设置控件获取到焦点时的样式
button:hover {width: 56px;height: 28px;background-color: black;color: white;}设置鼠标悬停时的样式
实例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>css常用选择器与优先级(selector)</title>
<!--如果将css样式写到当前html文档中的style标签中则只适用于当前文档的各个标签-->
<style>
/* 标签选择器 */
h3 {
/* 设置背景色 */
background-color: lightgreen;
color: red;
}
/* 类class选择器 */
.bg-blue {
background-color: lightblue;
}
/* 类class选择器的优先级大于标签选择器 */
/* id选择器 */
#bg-yellow {
background-color: yellow;
}
</style>
</head>
<body>
<!-- 选择器层面上: 标签选择器 < 类class选择器 < id选择器 -->
<h3>样式规则 = 选择器 + 声明</h3>
<h3 class="bg-blue">样式规则 = 选择器 + 声明</h3>
<h3 class="bg-blue" id="bg-yellow">样式规则 = 选择器 + 声明</h3>
<!-- 内联样式style属性优先级大于id选择器 -->
<h3 class="bg-blue" id="bg-yellow" style="background-color:pink;">样式规则 = 选择器 + 声明</h3>
<!-- <script>
document.getElementById('bg-yellow').style.backgroundColor = 'black';
</script> -->
</body>
</html>运行实例 »
点击 "运行实例" 按钮查看在线实例
