4. css语法
* 格式:
选择器{
属性名1:属性值1;
属性名2:属性值2;
...
}
* 选择器:筛选具有相似特征的元素
* 注意:
* 每一对属性需要使用;隔开,最后一对属性可以不加;
5. 选择器:筛选具有相似特征的元素
* 分类:
1. 基础选择器
1. id选择器:选择器具体的id属性值的元素.建议在一个html页面中id值唯一
* 语法: #id属性值{}
* 注意: id选择器的优先级最高
2. 元素选择器:选择具有相同标签名称的元素
* 语法:标签名称{}
* 注意:id选择器优先级高于元素选择器
3. 类选择器:选择具有相同的class属性值的元素。
* 语法:.class属性值{}
* 注意: 类选择器的优先级高于元素选择器
2. 扩展选择器
1. 选择所有元素:
* 语法:* {}
2. 并集选择器
* 选择器1,选择器2{}
3. 子选择器:筛选选择器1元素下的选择器2元素
* 语法: 选择器1 选择器2{}
4. 父选择器:筛选选择器2的父元素选择器1
* 语法:选择器1>选择器2{}
5. 属性选择器:选择元素名称,属性名=属性值的元素
* 语法:元素名称[属性名="属性值"]{}
* 一般用于input类型的标签
6. 伪类选择器:选择一些元素具有的状态
* 语法:元素:状态{}
* 如:<a>
* 状态:
* link:初始化的状态
* visited:被访问过的状态
* active:正在访问状态
* hover:鼠标悬浮状态
6. 属性
p{
color: red;
font-size:30px;
}
<p>呵呵</p>
<style type="text/css">
#div1{
color: red;
}
div{
color: green;
}
.cls1{
color: blue;
}
</style>
<div id="div1">传智播客</div>
<div class="cls1">黑马程序员</div>
<p class="cls1">传智学院</p>
<!--子选择器-->
<style type="text/css">
div p{
color: red;
}
</style>
<div>
<p>传智播客</p>
</div>
<p>黑马程序员</p>
<!--父选择器-->
<style type="text/css">
div > p{
boder: 1px solid;
}
</style>
<div>
<p>传智播客</p>
</div>
<p>黑马程序员</p>
<div>aaa</div>
<!--属性选择器-->
input[type='text']{
border: 5px solid;
}
<input type="text" >
<input type="password" >
a:link{
color:pink;
}
a:hover{
color:green;
}
a:active{
color:yellow;
}
a:visited{
color:red;
}
<br>
<a href="#">传智播客</a>
<br>
<a href="#">黑马程序员</a>
<br>
css语法和选择器
最新推荐文章于 2023-04-02 15:12:45 发布