css(Cascading Style Sheet)层叠样式表
概念
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style type="text/css">
/*
问题:
1.样式表的全称?cascading style sheets
2.样式表的组成?
3.浏览器读取编译css的顺序?
*/
/*
1.样式表
2.规则
3.选择器+声明块
4.css属性名+css属性值组成的键值对
*/
*{
margin: 0;
padding: 0;
}
/*
浏览器读取选择器的顺序是从右往左
例:从右开始找到#box直接结束查找
*/
div ul li #box {}
</style>
</head>
<body>
</body>
</html>
选择器
- 基本选择器
坑点: 可继承样式,不会被选择器影响
/* id选择器 */
#wrap { color: pink; }
/* 类选择器 */
.box { font-size: 14px; }
/* 标签选择器 */
div { background: green; }
/* 通配符选择器 */
* { margin :0; padding: 0;}
/* 后代选择器 */
ul li { color: aqua; }
/* 分组选择器 ,(结合符) */
h1,h2,h3 { font-size: 20px; }
/* 子元素选择器 */
.wrap > .bar { border: 1px solid rebeccapurple; }
/* 相邻兄弟选择器 */
/* 紧跟着的!!! */
#box > .outer + p { text-align: center; }
/* 通用兄弟选择器 */
/* 跟着的! */
#box > .outer ~ p { text-align: center; }
- 属性选择器
/* 属性选择器 */
div[name] { border: 1px solid #eee; }
/* 属性值选择器 */
div[name="msk"] { border: 1px solid #eee; }
/* |属性值只有msk自身 msk- 开头才可以匹配 */
div[name|="msk"] { border: 1px solid #eee; }
/* ^属性值以msk开头 */
div[name^="msk"] { border: 1px solid #eee; }
/* $属性值以msk结尾 */
div[name$="msk"] { border: 1px solid #eee; }
/* *属性值包含msk */
div[name*="msk"] { border: 1px solid #eee; }
/* 属性值以msk必须以空格分隔 */
div[name~="sky"] { border: 5px solid pink; }
/*
例:可被~=选中
<div name="sky aaa">1</div>
<div name="bbb sky aa">2</div>
*/
- 伪类和伪元素选择器
注意:伪类和伪元素不存在与DOM树中
坑点:注意先后顺序不能混乱
原因:link和visited已经可以把a标签所有状态含盖住了, 所有只能写在前面
链接伪类和动态类型
/* 默认状态 只能链接使用 */
a:link { color: #333; }
/* 已经访问后的状态 只能链接使用,只能修饰关于颜色的属性 */
a:visited { color: salmon; }
/* 鼠标覆盖时的状态 */
a:hover { color: seagreen; }
/* 鼠标点住按住时的效果 */
a:active { color: yellow; }
表单伪类
/* 可编辑状态 */
input:enabled { background-color: pink; }
/* 禁用状态 */
input:disabled{ background-color: aquamarine; }
/* 禁用状态 */
input:disabled{ background-color: aquamarine; }
/* 选中状态 */
input:checked { background-color: brown; }
/* 获取焦点状态 */
input:focus { border-bottom: 1px solid blue; }
/* 内容为空的标签(空格都不能存在!!) */
div:empty{ background-color: brown; }
结构型伪类
坑点:nth-of-type 只对标签选择器有效
/* #wrap下的所有子元素, 选中第一个子元素,并且必须是ele */
#wrap ele:nth-child(1) { color: red; }
/* 选中#wrap下第一个/最后一个子元素, 并且必须是div */
#wrap div:first-child { color: chartreuse; }
#wrap div:last-child { color: chartreuse; }
/* #wrap下的所有子元素, 选中倒数第二个子元素,并且必须是ele */
#wrap ele:nth-last-child(2) { color: red; }
/* #wrap下只有p一个标签时才生效(独生子) */
#wrap p:only-child { color: coral; }
/* #wrap下的所有子元素, 选中第一个ele元素,*/
#wrap ele:nth-child(1) { color: red; }
/* 选中#wrap下第一个/最后一个div子元素, */
#wrap div:first-child { color: chartreuse; }
#wrap div:last-child { color: chartreuse; }
/* #wrap下只包含一个p标签时才生效(独生子) */
#wrap p:only-of-child { color: coral; }
/* #wrap下的所有子元素, 选中倒数第二个ele 子元素*/
#wrap p:nth-last-of-type(2) { color: coral; }
/* not 设置除了个选择器以外的样式 */
#wrap li:not(:last-child) { border-right: 1px solid; }
/* 如下案例: 去除最后一个样式 */
伪元素选择器
注意:不存在于DOM树中
/* ::before和::after 必须有content: "", after一般用于清除浮动 */
/* ::first-letter 选中第一个字 ::first-line 选中第一行 */
.box p::first-line { color: red; }
.box p::first-letter { font-size: 24px;font-weight: bold; }
.box p::selection { background: coral; }