伪类选择器和盒模型常用属性

伪类选择器和盒模型常用属性

伪类选择器(结构伪类、状态伪类)

1. 结构伪类:根据元素位置获取元素

伪类的权重与 class 一样

<ul class="list">
  <li class="first">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) a : 系数,从0递增 n : 参数,从0递增 b : 偏移量,从0开始
计算出来的索引必须有效,必须从1开始 选择的元素只有两种情况(1.一个 2.一组)

获取一个元素

/* 获取当前第一个元素 */
/* 用class查找 */
.list > .first {
  background-color: red;
}
/* 伪类获取.list下第一个子元素 */
.list > li:nth-of-type(0n + 1) {
  background-color: aqua;
}
.list > li:nth-of-type(1) {
  background-color: aqua;
}

获取一组元素

a = 1 时,获取元素位置
/* 从第三个开始匹配 */
.list > li:nth-of-type(1n+3) {
  background-color: aqua;
}
/* 获取到前三个,从第三个递减,a取负数 */
.list > li:nth-of-type(-1n + 3) {
  background-color: aqua;
}

a = 2 时,获取元素的奇偶
/* 2n 偶数 */
.list > li:nth-of-type(2n) {
  background-color: aqua;
}
/* 2n+1/2n-1奇数 */
.list > li:nth-of-type(2n + 1) {
  background-color: aqua;
}

/* 获取最后三个 */
/* :nth-last-of-type */
.list > li:nth-last-of-type(-n + 3) {
  background-color: green;
}

语法糖:快捷方式

/* 获取第一个 :first-of-type */
.list > li:first-of-type {
  background-color: green;
}
/* 获取最后一个 :last-of-type */
.list > li:last-of-type {
  background-color: green;
}
/* 奇偶  even=偶数/odd奇数  */
.list > li:nth-of-type(even/odd) {
  background-color: green;
}

结构伪类实例演示

1.代码

/* 1.改变列表第一个元素背景颜色 */
ul.list > li:first-of-type {
  background-color: aqua;
}
/* 2.改变列表最后一个背景颜色 */
ul.list > li:last-of-type {
  background-color: lightblue;
}
/* 3.改变偶数列表边框宽度 */
ul.list > li:nth-of-type(even) {
  border: 2px solid black;
}
/* 4.改变奇数列表边框颜色 */
ul.list > li:nth-of-type(odd) {
  border: 1px solid red;
}
/* 5.改变列表前三个字体颜色 */
ul.list > li:nth-of-type(-n + 3) {
  color: blue;
}
/* 6.改变列表最后三个字体颜色 */
ul.list > li:nth-last-of-type(-n + 3) {
  color: magenta;
}

2.图片

2. 状态伪类:根据元素的状态获取元素

/* 获取焦点 */
input:focus {
  color: green;
}
/* 获取被禁用的元素 */
input:disabled {
  color: red;
}
/* 获取选中的单选按钮 */
input:checked + label {
  color: yellow;
}
/* button{
    cursor: pointer;
} */
/* 鼠标移入变化 */
button:hover {
  cursor: pointer;
}

状态伪类实例演示

1.代码

/* 用户名输入框字体颜色改为绿色 */
/* 获取焦点 */
input:focus {
  color: green;
}
/* 警告框字体变为红色 */
/* 获取被禁用的元素 */
input:disabled {
  background-color: white;
  border: none;
  color: red;
}
/* 默认单选按钮字体变为黄色 */
/* 获取选中的单选按钮的兄弟元素 */
input:checked + label {
  color: yellow;
}
/* 提交按钮鼠标悬停变为手指 */
/* 鼠标移入变化 */
button:hover {
  cursor: pointer;
}

2.图片

盒模型常用属性

边框与内外边距

div是块元素 display:block; 默认占一行,不管有多宽,垂直排列 margin(外边距) >
boder(边框) > padding(内边距) > conetnt(内容) margin :
控制当前元素与其他元素之间的缝隙 padding : 内容与边框之间的填充物
两者都是不可见属性,只能设置宽度,不能设置特征(颜色、样式)
页面中计算盒子的实际宽高,不包括外边距 总宽度 = boder-left-width +
padding-left-width + conetnt-width + boder-right-width + padding-right-width
总高度 = boder-left-height + padding-left-height + conetnt-height +
boder-right-height + padding-right-height

/* border: 宽度 样式 颜色; */
div.box {
  border: 1px solid red;
  /* border-top/bottom/left/right: ; */
  /* 不可见元素只能设置宽度 */
  /* 顺时针方向编写 */
  /* 四值 padding: 上 右 下 左; */
  padding: 5px 6px 10px 20px;
  /* 三值 padding: 上 左右 下; */
  /* 两值 padding: 上下 左右; */
  /* 单值 padding: 上右下左; */
}

元素样式初始化

* {
  margin: 0;
  padding: 0;
  /* 盒子的宽高包括内边距 */
  box-sizing: border-box;
  /* 还原到w3c默认标准盒子的计算方式 */
  /* box-sizing: content-box; */
}

背景裁切

/* 背景裁切,让内容只覆盖到内容区(不包括padding) */
div.box {
  background-clip: content-box;
}

盒模型实例演示

1.代码

/* 元素样式初始化 */
*{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}
/* 最外层边框属性 */
div.outside{
    width: 1200px;
    height: 900px;
    border: 2px solid;
}
/* 参照div属性 */
div.outside > div.initial{
    width: 100px;
    height: 100px;
    border: 1px solid red;
    color: red;
}
/* padding设定 */
div.outside > div.padding{
    padding: 10px;
    width: 100px;
    height: 100px;
    border: 1px solid;
    background-color: aqua;
    /* 边框裁剪 */
    background-clip: content-box;
}
/* margin设定 */
div.outside > div.margin{
    width: 100px;
    height: 100px;
    border: 1px solid;
    margin: 10px;
}
/* border四边框 */
div.outside > div.border{
    width: 100px;
    height: 100px;
    /* 四条边框一致 */
    /* border: 1px solid red; */
    /* 四条边框不一致 */
    border-top: 3px solid red;
    border-right: 6px dashed green;
    border-bottom: 2px solid tan;
    border-left: 5px dashed yellow;
}
/* margin/padding四边框 */
div.outside > div.padding_boder{
    width: 100px;
    height: 100px;
    border: 1px solid;
    padding: 5px 6px 10px 20px;
    /* 四值 padding: 上 右 下 左; */
    /* 三值 padding: 上 左右 下; */
    /* 两值 padding: 上下 左右; */
    /* 单值 padding: 上右下左; */
}

2.图片