40.CSS基础与选择器
【一】css基础
1）概念
- 就是给HTML标签添加样式的
2）注释语法
/*注释*/
3）语法结构
选择符 {
样式属性: 样式属性值;
样式属性: 样式属性值;
样式属性: 样式属性值, 样式属性值, 样式属性值;
}
4）三种引入
1.styble标签内部直接使用
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<!--方式一-->
<style>
#x {color: goldenrod}
</style>
</head>
<body>
<h1 id="x">一级标签</h1>
</body>
</html>
2.直接在标签定义一个style标签
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<!--方式二-->
<h1 style="color: goldenrod">一级标签</h1>
</body>
</html>
3.通过link标签引入css文件
/*CSS*/
x{color:goldenrod}
<!--html-->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<!--方式三-->
<link rel="stylesheet" href="css文件名">
</head>
<body>
<h1 style="color: goldenrod">一级标签</h1>
</body>
</html>
【二】CSS的选择器
1）基本选择器
1.id选择器
- 通过元素的id属性进行选择
- 每个页面的id都是唯一的，最好在CSS中不要重复使用
# + id属性值 + {css属性名:css属性值}
<h1 id="x">Hello, World!</h1>
#x{color: firebrick;}
2.类选择器
- 通过元素的class属性进行选择
- 多个元素可共享一个class，其为应用样式的最佳方式
. + 类属性值 + {css属性名:css属性值}
<h1 class="title">Hello, World!</h1>
.title {color: fuchsia}
3.元素/标签选择器
- 通过元素的标签名进行选取
标签名 + {css属性名:css属性值}
<span>元素/标签选择器</span>
span {color: darkgrey}
4.通用选择器
- *表示所有元素
* + {css属性名:css属性值}
<h6 >通用选择器1</h6>
<h6 >通用选择器2</h6>
*{color: cyan}
2）关系选择器
| 选择器 | 名称 | 版本 | 描述 |
|---|---|---|---|
| E F | 包含选择器 | CSS1 | 选择所有低于E级别的F |
| E>F | 子选择器 | CSS2 | 只选择属于E下一级别的F |
| E+F | 相邻选择器 | CSS2 | 只选择一个与E同级别，在E之后且相邻的F |
| E~F | 兄弟选择器 | CSS3 | 选择与E同级别的所有F |
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
/*div下的所有span标签*/
div span {color: fuchsia}
/*仅div下一级的span*/
div > span {color: aqua}
/*div同级的邻近的span*/
div + span {color: darkcyan}
/*div同级的所有span*/
div ~ span {color: darkgreen}
</style>
</head>
<body>
<div>div标签
<p>div下的第一个p标签</p>
<p>div下的第二个p标签
<span>diva下p内的span标签</span>
</p>
<span>div下的第一个span标签</span>
<span>div下的第二个span标签</span>
</div>
<span>第一个span标签</span>
<span>第二个span标签</span>
</body>
</html>
3）属性选择器
| 选择器 | 版本 | 描述 |
|---|---|---|
| E[att] | CSS2 | 选择具有att属性的E元素。 |
| E[att="val"] | CSS2 | 选择具有att属性且属性值等于val的E元素。 |
| E[att~="val"] | CSS2 | 选择具有att属性且属性值为一用空格分隔的字词列表，其中一个等于val的E元素。 |
| E[att^="val"] | CSS3 | 选择具有att属性且属性值为以val开头的字符串的E元素。 |
| E[att$="val"] | CSS3 | 选择具有att属性且属性值为以val结尾的字符串的E元素。 |
| E[att*="val"] | CSS3 | 选择具有att属性且属性值为包含val的字符串的E元素。 |
| E[att|="val"] | CSS2 | 选择具有att属性且属性值为以val开头并用连接符"-"分隔的字符串的E元素，如果属性值仅为val，也将被选择。 |
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
/*所有带有XXX属性的元素*/
[XXX] {color: blue}
/*所有带有XXX且值为'ST1'属性的元素*/
[XXX='ST1'] {color: cornflowerblue }
/*所有带有XXX且值为'ST1'属性的p元素*/
p[XXX='ST1'] {color: darkviolet}
</style>
</head>
<body>
<input type="text" XXX>
<input type="text" XXX="ST1">
<input type="text" XXX="ST2">
<p XXX="ST1">p标签 ST1</p>
<div XXX="ST1">div标签 ST1</div>
</body>
</html>
4）伪类选择器
| 选择符 | 版本 | 描述 |
|---|---|---|
| E:link | CSS1 | 设置超链接a在未被访问前的样式。 |
| E:visited | CSS1 | 设置超链接a在其链接地址已被访问过时的样式。 |
| E:hover | CSS1/2 | 设置元素在其鼠标悬停时的样式。 |
| E:active | CSS1/2 | 设置元素在被用户激活（在鼠标点击与释放之间发生的事件）时的样式。 |
| E:focus | CSS1/2 | 设置元素在成为输入焦点（该元素的onfocus事件发生）时的样式。 |
| E:lang(fr) | CSS2 | 匹配使用特殊语言的E元素。 |
| E:not(s) | CSS3 | 匹配不含有s选择符的元素E。 |
| E:root | CSS3 | 匹配E元素在文档的根元素。 |
| E:first-child | CSS2 | 匹配父元素的第一个子元素E。 |
| E:last-child | CSS3 | 匹配父元素的最后一个子元素E。 |
| E:only-child | CSS3 | 匹配父元素仅有的一个子元素E。 |
| E:nth-child(n) | CSS3 | 匹配父元素的第n个子元素E。 |
| E:nth-last-child(n) | CSS3 | 匹配父元素的倒数第n个子元素E。 |
| E:first-of-type | CSS3 | 匹配父元素下第一个类型为E的子元素。 |
| E:last-of-type | CSS3 | 匹配父元素下的所有E子元素中的倒数第一个。 |
| E:only-of-type | CSS3 | 匹配父元素的所有子元素中唯一的那个子元素E。 |
| E:nth-of-type(n) | CSS3 | 匹配父元素的第n个子元素E。 |
| E:nth-last-of-type(n) | CSS3 | 匹配父元素的倒数第n个子元素E。 |
| E:empty | CSS3 | 匹配没有任何子元素（包括text节点）的元素E。 |
| E:checked | CSS3 | 匹配用户界面上处于选中状态的元素E。(用于input type为radio与checkbox时) |
| E:enabled | CSS3 | 匹配用户界面上处于可用状态的元素E。 |
| E:disabled | CSS3 | 匹配用户界面上处于禁用状态的元素E。 |
| E:target | CSS3 | 匹配相关URL指向的E元素。 |
| @page:first | CSS2 | 设置页面容器第一页使用的样式。仅用于@page规则 |
| @page:left | CSS2 | 设置页面容器位于装订线左边的所有页面使用的样式。仅用于@page规则 |
| @page:right | CSS2 | 设置页面容器位于装订线右边的所有页面使用的样式。仅用于@page规则 |
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
/*输入框被选中时变色*/
input:focus{background-color: lightslategrey}
/*常态*/
a:link{color: mistyrose}
/*访问之后修改颜色*/
a:visited {color: springgreen}
p:visited {color: springgreen}
/*鼠标悬停在上方时变色*/
a:hover{color: darkorange}
p:hover{color: darkorange}
/*鼠标点击时改颜色*/
a:active{color: darkturquoise}
p:active{color: darkturquoise}
</style>
</head>
<body>
<p><a href="https://www.xxx.com/" target="_blank">不存在的网页</a></p>
<p>text <input type="text"></p>
<p>p标签</p>
</body>
</html>
5）伪元素选择器
| 选择符 | 版本 | 描述 |
|---|---|---|
| E:first-letter/E::first-letter | CSS1/3 | 设置对象内的第一个字符的样式。 |
| E:first-line/E::first-line | CSS1/3 | 设置对象内的第一行的样式。 |
| E:before/E::before | CSS2/3 | 设置在对象前（依据对象树的逻辑结构）发生的内容。用来和content属性一起使用 |
| E:after/E::after | CSS2/3 | 设置在对象后（依据对象树的逻辑结构）发生的内容。用来和content属性一起使用 |
| E::placeholder | CSS3 | 设置对象文字占位符的样式。 |
| E::selection | CSS3 | 设置对象被选择时的颜色。 |
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
/*开头第一个文件加效果*/
p:first-letter{color: deepskyblue}
/*文本开头添加内容*/
p:before{content: '开头';color: darkgoldenrod }
/*文本结尾添加内容*/
p:after{content: '结尾';color: greenyellow }
</style>
</head>
<body>
<p>p标签</p>
</body>
</html>
6）分组与嵌套
1.分组
div,p{color:red}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
div,p{color:red}
</style>
</head>
<body>
<div>第一个div标签</div>
<div id='i1'>第二个div标签</div>
<div class='c1'>第二个div标签</div>
<p>第一个a标签</p>
<span>第一个span标签</span>
</body>
</html>
2.嵌套
#i1,.c1{color:red}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
#i1,p.c1{color:red}
</style>
</head>
<body>
<div id='i1'>第二个div标签</div>
<div class='c1'>第二个div标签</div>
<p class='c1'>第一个p标签</p>
<span class='c1'>第一个span标签</span>
</body>
</html>
7）选择器优先级（从高到低）
- !important
- style 行内标签样式
- id 选择器
- class 选择器
- 标签选择器
- 通用选择器
浙公网安备 33010602011771号