1.CSS伪类选择器

结构伪类选择器：

结构伪类选择器的公式:nth-of-type(an+b)
正向取值演示：

正向取值演示

* A的值是0,0乘以任何数都等于0,所以B的值就填写1,取第一行数据.
* 当前也可也取一组数据.

正向取值演示

* 反向取值演示：

反向取值演示

* 获取倒数一组数据演示：

倒数一组数据演示

* 取奇偶数：

取偶数

* 取偶数的快捷方式：:nth-of-type(even)

取奇数

* 取奇数的快捷方式：:nth-of-type(odd)
* 语法糖总结：first-of-type=取第一个值 | last-of-type=取最后一个值

状态伪类选择器：

* 获取有状态的元素方法：input:状态.这段代码指的是获取一个input标签,这个标签有一个状态.比如禁用状态就是：input:disabled

状态伪类选择器的总结：
- 鼠标悬停：hover
- 获取焦点：focus
  2.盒模型常用属性
margin[外边距-控制当前盒子与其他盒子的距离]
border[边框]
padding[内边距-内容区与边框之间的填充区块]
content[内容区]
且要注意的是,margin和padding属于不可见属性,只能设置宽度,除此之外不能设置任何属性.在页面中看不到.
- 需要注意的是,尽管我们在CSS中设置的是200像素的宽度和100像素的高度,但是在浏览器中我们看到的却是250像素的宽度和150像素的高度,这是因为浏览器自动把padding和boder的四条边的值也算进去了.这点需要注意！！！
- 而如果必须要设置成CSS中设置的像素,也是有办法的.我们要用到一个属性：box-sizing
- box-sizing这个属性需要注意的点是,你设置的宽高度,其实是包括了边框的.
- 还原尺寸也很简单,用到的属性是：box-sizing: content-box;
- 对border边框进行设置可以用到如下属性：比如对上边框进行设置：border-top
- border-top属性参数：宽度样式前景色
- 那么左右下边框一样的道理：border-left、border-right、border-bottom
- 当然也有简化写法：
  - 当四条边都一样时,只写border:宽度样式前景色,即可.
  - 当四条边都不一样时,可以用如下方法：
  - padding: 10px 15px 20px 25px;他的顺序是上、右、下、左
  - 当上下值不一样，左右值一样时,我们可以用如下方法：padding:10px 15px 20px;
  - 我们通过对比可以发现,第一个值对应的是上边,第三个值对应的是下边,第二个值对应的是左右两边.
  - 当上下值一样,左右值一样时,我们可以用如下方法：padding:10px 15px;
  - 我们通过对比可以发现,第一个值对应的是上下两条边,第二个值对应的是左右两条边.
  - 三值和二值的记忆方法为：第二个值永远表示左右.
  - 当四个方向全部一样时,我们设置一个单值即可：padding:10px;
  - 盒模型中：最重要的属性为：width、height、padding（不可视属性）、border（可视化属性）、margin（不可视属性）！

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

1.CSS伪类选择器

结构伪类选择器：

状态伪类选择器：

2.盒模型常用属性

更多相关文章

随机推荐