选择器提权，以及盒模型

3.选择器

1.简单选择器

序号	简单选择器	值
1	标签选择器	页面中的元素标签
2	属性选择器	分为 id 选择器和类选择器 class

分为两种标签选择器，属性选择器（class，id）

<ul>
  <li>item1</li>
  <li class="foo">item2</li>
  <li>item3</li>
  <li class="foo">item4</li>
  <li id="roo">item5</li>
</ul>

/* 1.标签选择器 */
li {
  background-color: yellowgreen;
}
/* 2.类选择器 ,两者皆可*/
li[class="foo"] {
  background-color: blue;
}
.foo {
  background-color: blue;
}
/* 3.id选择器 ，两者皆可*/
li[id="roo"] {
  background-color: darkred;
}
#roo {
  background-color: deeppink;
}

2.上下文选择器

html 是一个结构化的文档，每一个元素在文档中都有确切的位置
所以用上下文选择器是没有问题的

序号	属性	值
1	空格	后代选择器,标签所有层级
2	>	子元素选择器：仅父子层
3	+	同级相邻选择器，紧选中与之相邻的第一兄弟个元素
4	~	同级所有选择器:选中与之相邻的后面所有的兄弟元素

<ul>
  <li class="start">item1</li>
  <li>item2</li>
  <li>
    <ul>
      <li>item1</li>
      <li>item2</li>
      <li>item3</li>
    </ul>
  </li>
  <li>item3</li>
  <li>item4</li>
</ul>

/* 引文html是一个结构化的文档，
        每一个元素在文档中都有确切的位置
        所以根据元素的上下文环境来选择是完全没问题的
      /* 1.后代选择器：所有层级 */
ul li {
  background-color: deepskyblue;
}
/* ------------------------------- */
/* 子元素选择器：仅父子层 */
body > ul > li {
  background-color: rgb(180, 75, 154);
}
/* ------------------------------- */
/* 同级相邻选择器:选中与之相邻的第一个兄弟元素 */
.start + li {
  background-color: magenta;
}
/* ---------------------- */
/* 4.同级所有选择器：选中与之相邻的后面所有的兄弟元素 */
.start ~ li {
  background-color: red;
}

3.伪类选择器

序号	属性	值
1	nth-of-type(an+b)	匹配任意位置的元素,an 起点。b 偏移量
2	nth-last-of-type(an+b)	反向选取任意位置的元素
3	nth-of-type(odd)	odd 选取为基数的元素
4	nth-of-type(even)	even 选取为偶数的元素
5	first-of-type	选取第一个元素
6	last-of-type	选取最后一个元素

<ul>
  <li>item1</li>
  <li>item2</li>
  <li>item3</li>
  <li>item4</li>
  <li>item5</li>
  <li>item6</li>
  <li>item7</li>
  <li>item8</li>
  <li>item9</li>
  <li>item10</li>
</ul>

nth-of-type(an+b) 用法

/* 1.匹配任意位置的元素：:nth-of-type（an+b） */
/* an+b:an是起点，b是偏移量，n=（0,1,2,3...） */
/* 匹配第3个li ,0乘以任何元素都等于0，通常直接写偏移量就可以*/
ul li:nth-of-type(0n + 3) {
  background-color: aquamarine;
}
ul li:nth-of-type(3) {
  background-color: blue;
}
/* 选中所有元素,只为全选，用伪类没有任何意义 */
ul li:nth-of-type(1n) {
  background-color: chartreuse;
}
/* 从第三个元素开始全选 */
ul li:nth-of-type(1n + 3) {
  background-color: aqua;
}
/* 1乘以任何数都等于自己，所以可以省去1 */
ul li:nth-of-type(n + 3) {
  background-color: blue;
}
/* 从第8个选取到结尾 */
ul li:nth-of-type(n + 8) {
  background-color: brown;
}
/* 2，反向选取任意位置的元素：'nth-last-of-type(an+b)'' */
ul li:nth-last-of-type(-n + 3) {
  background-color: brown;
}
/* 我只选择第三个 */
ul li:nth-last-of-type(3) {
  background-color: brown;
}
/* 选择所有索引为偶数的子元素，2，4，6,8... */
ul li:nth-of-type(2n) {
  background-color: brown;
}
/* 选择所有索引为基数的子元素，2，4，6,8... */
/* 2n+1也是对的 */
ul li:nth-of-type(2n-1) {
  background-color: cadetblue;
}

反向选取任意位置的元素:nth-last-of-type(an+b)

/* 从末尾开始，选择倒数三个 */
ul li:nth-last-of-type(-n + 3) {
      background-color: brown;
    }
/* 我只选择第三个 */
ul li:nth-last-of-type(3) {
background-color: brown;

快速选偶奇元素方式

/* 偶数行:even */
ul li:nth-of-type(even) {
  background-color: cadetblue;
}
/* 奇数行:odd */
ul li:nth-of-type(odd) {
  background-color: red;
}

快捷选取首尾元素

/* 3,选择第一个子元素：first-of-type */
ul li:first-of-type {
background-color: red;
/* 选择最后一个:last-of-type */
background-color: red;

4.伪类选择器状态匹配

序号	a 标签 属性	注释
1	:link	默认状态下属性
2	:visited	访问过属性
3	:hover	鼠标滑过属性
4	:active	点击时属性

<a href="https:www.baidu.com">百度一下</a>

/* 1. 默认,没有访问/点击 */
a:link {
  color: red;
  text-decoration: none;
}
/* 2. 已访问过的状态 */
a:visited {
  color: seagreen;
}
/* 3. 悬停的状态 */
a:hover {
  color: violet;
}
/* 4. 激活,当鼠标点击压下去的时候 */
a:active {
  color: yellow;
}

序号	css 属性	对应 input 属性	注释
1	:read-only	readonly	只读状态下属性匹配
2	: focus	autofocus	默认聚焦状态下属性匹配
3	:required	required	必写字段属性匹配
4	:disabled	disabled	禁止输入的表单属性匹配

<form action="">
  <p>用户名:<input type="text" name="" value="admin" readonly autofocus /></p>
  <p>邮箱:<input type="email" name="" value="" required /></p>
  <p>密码:<input type="password" name="" value="123456" disabled /></p>
  <p><button>提交</button></p>
</form>

/* 只读状态下属性匹配 */
input:read-only {
  background-color: yellow;
}
/* 默认聚焦状态下属性匹配 */
input:focus {
  background-color: red;
}
/* 必写字段属性匹配*/
input:required {
  background-color: royalblue;
}
/* 禁用输入的表单属性匹配*/
input:disabled {
  background-color: seagreen;
}

5.细说选择器优先级

<h2 class="on os" id="foo">helloword</h2>

1,当选择器级别相同时，根据源码顺序，后面有效

h2 {
  color: red;
}
h2 {
  color: blue;
}

2,选择器优先权为 id>class>tag(标签) ,无先后顺序

.on {
  color: red;
}
#foo {
  color: blueviolet;
}
h2 {
  color: yellow;
}

3,选择器组合提权
计算公式[id 选择器数量, class 选择器的数量, tag 选择器的数量]

/* [0,0,1] */
/* h2 {
        color: red;
      } */
/* [0,0,2] */
/* body h2 {
        color: blue;
      } */
/* ------------------------ */
/* [0,1,1] */
/* h2.on {
        color: red;
      } */
/* [0,1,2] */
/* body h2.on {
        color: yellow;
      } */
/* ------------------------------------ */
/* [1,0,1] */
/* h2#foo {
        color: red;
      } */
/* [1,0,2] */
/* body h2#foo {
        color: greenyellow;
      } */
/* ------------------------------------- */
/* .on {
  color: red;
}
.on.os {
  color: blueviolet;
} */

4.常用属性以及盒模型

1.引入 iconfont 字体

1.去阿里云图标库选择字体下载

阿里云图标
https://www.iconfont.cn/

2.然后把字体复制到项目引入

<!-- 头部引入 -->
<link rel="stylesheet" href="font/iconfont.css" / >
<span class="iconfont icon-shouye"></span>
<span class="iconfont icon-tupian"></span>
<span class="iconfont icon-wode"></span>

.iconfont {
  font-family: sans-serif;
  font-size: 32px;
  color: royalblue;
}

2.常用字体属性

序号	属性	值	注释
1	font	italic lighter 36px sans-serif	字体缩写模式
2	font-family	sans-serif	无衬线字体 ，浏览器默认字体
3	font-size	16px	字体大小
4	font-style	normal,italic	定义字体的风格
5	font-weight	bold,lighter	加粗，加细

3.引入阿里云图标

去阿里云网址下载相应的图标，然后使用引用
<link rel=”stylesheet” href=”icon-font/iconfont.css”> > <span class=”iconfont icon-kehuguanli”></span>

4.背景图片样式

属性	值	注释
background-image	url(https://img.php.cn/upload)	引入图片
background-repeat	no-repeat	取消平移
background-position	top，多少 px，	绝对定位
background-clip	content-box	裁剪背景到内容区，一般与 padding 使用。
background-size	100px	背景图片大小

5.盒模型属性缩写

属性	值
padding	外边距，具有浮动
margin	内边距

/* 内边距 */
/* padding: 上 右 下 左; 按顺时针方向*/
padding: 5px 10px 15px 20px;
/* 页面看不到是因为padding是透明的,且背景色会自动扩展到padding */
/* 将背景色裁切到到内容区 */
background-clip: content-box;
/* 当左右相等，而上下不相等，使用三值语法 */
padding: 10px 20px 15px;
/* 当左右相等，上下也相等，使用二值语法 */
padding: 10px 30px;
/* 如果四个方向全相等，使用单值语法 */
padding: 10px;
/* 外边距:控制多个盒子之间的排列间距 */
/* 四值,顺时针,上右下左 */
margin: 5px 8px 10px 15px;
/* 三值,左右相等，上下不等 */
margin: 10px 30px 15px;
/* 二值,左右相等,上下也相等 */
margin: 10px 15px;
/* 单值,四个方向全相等 */
margin: 8px;