选择器
- 通配符选择器
* /* 少用，一般用于清除浏览器自身样式、定义全局fonts */
- 元素选择器
/* 元素名称作为选择器 */
p {
color: #444;
}
div {
color: #444;
height: 200px;
width: 100%;
margin-top: 20px;
text-align: center;
}
- 类选择器(classname)
.content /* 定义一组类名(公共样式) */
- 分类选择器
p.content /* 元素选择器.分类选择器 */
- id选择器
#content /* 定义id */
- 后代选择器
/* 定义某个元素的后代元素(以空格分隔) */
p span {
color: #444;
}
- 子代选择器
/* 定义某个元素的子代元素(以大于符号 > 连接) */
p > span {
color: #444;
}
- 伪类选择器
/** 链接伪类：**/
:link /* 未访问过 */
:visited /* 访问过 */
/** 动态伪类：**/
:hover /* 鼠标悬停 */
:active /* 元素被激活 */
:focus /* 多用于文本框 */
/** 目标伪类：**/
:target /* 活动的HTML锚元素 */
/** 状态伪类：**/
:enabled /* 启用状态，多用于表单元素 */
:disabled /* 禁用状态，与👆配合 */
:checked /* 被选中状态(radio、checkbox) */
/** 结构伪类(一般搭配其它选择使用)： **/
:first-child /* 第一个元素 */
:last-child
:empty /* 无子元素的元素(文本内容也没有) */
:only-child /* 独子 */
:nth-child(num) /* 第num个 */
/* eg: */
li:nth-child(2) { /* 第2个li元素 */
color: #555;
}
- 兄弟选择器
/**
相邻兄弟：以加号(+)连接
eg: selector1 + selector2
表示紧跟着selector1的selector2
**/
div + p { /* 紧挨着div后面的p元素*/
background-color: #ccc;
}
/**
通用兄弟：以加号[～]连接
eg: selector1 ～ selector2
表示selector1之后的所有selector2
**/
div + p { /* div后面的所有p元素*/
background-color: #ff9800;
}
- 属性选择器
/**
元素具有的属性(及其属性值)，用[]包括起来
语法：[id]、[id=value]、[id][class][...]
[class~=value] ---> class属性值是一组单词列表，其中包含value(value是一个单独完整的classname)
[class*=value] ---> class属性中包含value
[class^=value] ---> class属性值以value开始
[class$=value] ---> class属性值以value结尾
**/
p[class="content"][id="content"] {
border: 1px solid #e4e4e4;
border-radius: 3px;
}
- 群组选择器
/* 为多个元素定义相同css规则，以上选择器随意组合(以逗号(,)分隔) */
/*eg: */
p,span,#content,.content {
color: #444;
}
盒模型
文本属性
Layout
/* 最最最常用 */
.clearfix::after { /* 这里有时候会遇到是 .clearfix:after 单冒号 规范性问题 解释：https://www.jianshu.com/p/93027d85aaa6*/
content: ""; /* 内容生成 */
clear: both;
display: table;
}
