CSS的最基础最简单最常用的选择器
一、选择器的简单介绍
通过不同的选择器,来选定html中指定的标签,然后给选定的一些标签或单独的一个标签设置样式,看一下使用的基本格式吧!
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>选择器的使用</title>
<style>
/*这里使用的是内部样式,方便阅读*/
div{
border: 1px solid red;
width: 100px;
height: 100px;
}
/*
语法:
选择器{
属性:属性值;
...
属性:属性值;
}
*/
</style>
</head>
<body>
<div></div>
</body>
</html>
二、基本选择器
选择器 | 语法 |
---|---|
ID选择器 | #id的值{} |
类选择器 | .类的值{} |
标签选择器 | 标签名{} |
三、扩展选择器
选择器 | 语法 |
---|---|
层级选择器 | 父选择器 子孙选择器{ } |
属性选择器 | 标签名[属性名]{ } 、标签名[属性名=“属性值”]{ } |
伪类选择器 | a:link{ } 正常状态 、a:visited{ } 访问过的 、a:hover{ } 鼠标悬停 、a:active{ } 正在激活 |
并集选择器 | 选择器1,选择器2{ } |