8.7 CSS_语法格式
- 格式：
选择器 {
属性名1:属性值1;
属性名2:属性值2;
...
}
- 选择器 : 筛选具有相似特征的元素。
- 注意： 每一对属性需要使用“;”隔开，最后一对属性可以不加";"。
8.8 CSS_选择器_基础选择器
- 基础选择器
- id选择器： 选择具体的id属性值的元素.建议在一个html页面中id值唯一。
- 语法：
#id属性值{}
- 语法：
- 元素选择器： 选择具有相同标签名称的元素
- 语法：
标签名称{} - note： id选择器优先级高于元素选择器。
- 语法：
- 类选择器： 选择具有相同的class属性值的元素。
- 语法：
.class属性值{} - note： 类选择器选择器优先级高于元素选择器
- 语法：
- id选择器： 选择具体的id属性值的元素.建议在一个html页面中id值唯一。
- 示例：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>基础选择器</title>
<style>
/*id选择器 */
#id1{
color:red;
}
/*元素选择器*/
div{
color: yellow;
}
/* 类选择器*/
.class1{
color: blue;
}
</style>
</head>
<body>
<div id="id1">jee</div>
<div>hee</div>
<div class="class1">eee</div>
</body>
</html>
8.9 CSS_选择器_扩展选择器
- 扩展选择器：
- 选择所有元素：
- 语法：
*{}
- 语法：
- 并集选择器：
- 语法：
选择器1,选择器2{}
- 语法：
- 子选择器：筛选选择器1元素下的选择器2元素
- 语法：
选择器1 选择器2{}
- 语法：
- 父选择器：筛选选择器2的父元素选择器1
- 语法：
选择器1 > 选择器2{}
- 语法：
- 属性选择器：选择元素名称，属性名=属性值的元素
- 语法：
元素名称[属性名="属性值"]{}
- 语法：
- 伪类选择器：选择一些元素具有的状态
- 语法：
元素:状态{} - 如：
<a>- 状态：
- link： 初始化的状态
- visited： 被访问过的状态
- active： 正在访问状态
- hover： 鼠标悬浮状态
- 状态：
- 语法：
- 选择所有元素：
- 示例：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>扩展选择器</title>
<style>
/*子选择器*/
div p{
color:red;
}
/*父选择器*/
div > p {
border: 1px solid;
}
/*属性选择器*/
input[type='text']{
border: 5px solid;
}
/*伪类选择器*/
a:link{
color: pink;
}
a:hover{
color: green;
}
a:active{
color: yellow;
}
a:visited{
color: red;
}
</style>
</head>
<body>
<div>
<p>传智播客</p>
</div>
<p>黑马程序员</p>
<div>aaa</div>
<input type="text" >
<input type="password" >
<br>
<a href="#">黑马程序员</a>
</body>
</html>
326
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
