程序地带

css语法和选择器


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>

版权声明:本文为博主原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。
本文链接:https://blog.csdn.net/qq_44336097/article/details/109757190

随机推荐

ubuntu16.04, 18.04安装python3.7

1.安装依赖包sudoapt-getupdatesudoapt-getinstallbuild-essentialpython-devpython-setuptoolspython-pippython...

uiop_uiop_uiop 阅读(968)

Java后端SDK接取验证

文章目录@[toc]一、Google1.登录2.充值二、IOS1.登录2.充值三、Facebook1.登录2.拉取好友列表一、Google1.登录文档参考:https://developers.goo...

上限下线 阅读(545)

SpringBoot如何进行参数校验

为安全考虑,我们开发经常会需要进行参数校验,这里简单记录下Springboot的方式。话不多说我们直接开始,首先创建一个实体类:importlo...

Baldness Is Power 阅读(613)

VUE循环日期格式化

html部分<span>{{time|renderTime}}</span>js部分data(){return{item:1607674958}}filters:{//时间戳转...

lw402532041 阅读(287)

C语言学习1

运算符运算符分为:单目运算符,双目运算符,三目运算符三目运算符“?:”单目运算符是指运算所需变量为一个的运算符,即在运算当中只有一个操作数&#x...

qq_43361844 阅读(929)