1. 结构伪类（strctural pseudo-classes）- :nth-child()
1. ：nth-child(1)
：nth-child(1){
color：red；
}
是父元素中的第1个子元素，不管是第几层的父元素，只要它相对于它的父元素是第一个孩子，它就会被选中
如果加个p,就变成了交集选择器，1.必须是p元素，2.p元素必须是向对于他的父元素的的第三个孩子
P:nth-child(3){
color：red；
}
P:nth-child(1){
color：red；
}是选择p元素，并且相对于父亲是第一个子元素
P :nth-child(1){
color：red；
}
中间有空格， 是一个后代选择器，是p元素后代里面的第一个子元素，儿子孙子都没关系
2. ：nth-child(2n)，nth-child(3n)
:nth-child(2n)
n代表任意正整数和0
是父元素中的第偶数个子元素（第2、4、6、8......个）
跟:nth-child(even)同义
3. ：nth-child(2n + 1)
:nth-child(2n + 1)
n代表任意正整数和0
是父元素中的第奇数个子元素（第1、3、5、7......个）
跟:nth-child(odd)同义
选中前三个
:nth-child(-n + 3)
4.:nth-last-child()
:nth-last-child()的语法跟:nth-child()类似，不同点是:nth-last-child()从最后一个子元素开始往前计数
:nth-last-child(1)，代表倒数第一个子元素
:nth-last-child(-n + 2)，代表最后2个子元素
5. :nth-of-type( )、:nth-last-of-type( )
:nth-of-type()用法跟:nth-child()类似，不同点是:nth-of-type()计数时只计算同种类型的元素
:nth-last-of-type()用法跟:nth-of-type()类似
不同点是:nth-last-of-type()从最后一个这种类型的子元素开始往前计数
也可以跟n
:nth-of-type(2n)
6. Other
:first-child，等同于:nth-child(1)
:last-child，等同于:nth-last-child(1)
:first-of-type，等同于:nth-of-type(1)
:last-of-type，等同于:nth-last-of-type(1)
:only-child，是父元素中唯一的子元素
:only-of-type，是父元素中唯一的这种类型的子元素
:root，根元素，就是HTML元素
7. :empty
:empty代表里面完全空白的元素
20.1.3 否定伪类（negation pseudo-class）
:not()的格式是:not(x)
x是一个简单选择器
元素选择器、通用选择器、属性选择器、类选择器、id选择器、伪类（除否定伪类）
:not(x)表示除x以外的元素
:not(div){color:red}; 除了div之外的颜色都是红色，包括body
所以得
:not(html):not(body):not(div){color:red}
body :not(.text)
:not()支持简单选择器，不支持组合。
20.2 伪元素（pseudo-elements）
常用的伪元素有,推荐些两个冒号的，后两个经常用到
:first-line、::first-line
:first-letter、::first-letter
:before、::before
:after、::after
为了区分伪元素和伪类，建议伪元素使用2个冒号，比如::first-line
1.::first-line
::first-line可以针对首行文本设置属性
只有下列属性可以应用在::first-line伪元素
字体属性、颜色属性、背景属性
word-spacing、letter-spacing、text-decoration、text-transform、line-height
2.::first-letter
::first-letter可以针对首字母设置属性
只有下列属性可以应用在::first-letter伪元素
字体属性、margin属性、padding属性、border属性、颜色属性、背景属性
text-decoration、text-transform、letter-spacing、word-spacing（适当的时候）、line-height、float、vertical-align（只有当float是none时）
3.::before和::after
::before和::after用来在一个元素的内容之前或之后插入其他内容（可以是文字、图片）
在CSS属性值中，使用url(图片的URL)来引用图片
content : url(dot.png);
content : url('dot.png');
content : url("dot.png");
<span>woshispan</span>
span::before{
content : "1";//不能省略
color:red;//给添加的content加颜色
margin-right:20px;
}
span::after{
content : "123";//不能省略
color:red;//给添加的content加颜色
margin-left:20px;
}
伪元素可以看成是行内元素
不能设置width，height
可以设置dsiaplay为inline-block;
2.选择器的权重
image.png
3.块级元素和行内元素
image.png
image.png
4.CSS属性 - overflow
image.png
5.CSS属性 - box-sizing
◼ box-sizing用来设置盒子模型中宽高的行为
◼ content-box
padding、border都布置在width、height外边
◼ border-box
padding、border都布置在width、height里边
6.元素的水平居中方案
◼ 在一些需求中，需要元素在父元素中水平居中显示（父元素一般都是块级元素、inline-block）
◼ 行内级元素(包括inline-block元素)
水平居中：在父元素中设置text-align: center
(text-align：center 只对行内元素居中 span/a/ img/input 还有inline-block)
◼ 块级元素
水平居中：margin: 0 auto
7.盒子模型
7.1 边框样式
◼ 边框宽度
border-top-width、border-right-width、border-bottom-width、border-left-width
border-width是上面4个属性的简写属性
◼ 边框颜色
border-top-color、border-right-color、border-bottom-color、border-left-color
border-color是上面4个属性的简写属性
◼ 边框样式
border-top-style、border-right-style、border-bottom-style、border-left-style
border-style是上面4个属性的简写属性
image.png
image.png
7.2 padding的取值规律
按照顺时针方向设值：top、right、bottom、left
如果缺少left, 那么left就使用right的值
如果缺少bottom, 那么bottom就使用top的
四个值的话是上右下左
三个值的话是上右下，没有左，左边跟随右边的值
两个值的话是上右， 下面的值跟随上，左跟随右
一个值的话，上下左右都是使用一个值
7.3 上下margin传递(左右不会传递)
image.png
margin-top传递
如果块级元素的顶部线和父元素的顶部线重叠，那么这个块级元素的margin-top值会传递给父元素
margin-bottom传递
如果块级元素的底部线和父元素的底部线重叠，并且父元素的高度是auto，那么这个块级元素的margin-bottom值会传递给父元素
如何防止出现传递问题？
-
给父元素设置padding-top\padding-bottom ，不给子元素设置margin（这样的话，子元素和父元素就很不会顶部线对齐了，就不满足传递的条件了，但是不常用。）
-
给父元素设置border（这个办法的原理和1一样，但是莫名其妙多了一个边框很不好）
-
触发BFC: 设置父元素overflow为auto/hidden
BFC：结界 block format context
◼ 建议
margin一般是用来设置兄弟元素之间的间距
padding一般是用来设置父子元素之间的间距（上下margin传递主要是没有搞清楚父亲和儿子的关系，父亲儿子用padding）
7.4 上下margin的折叠
image.png
image.png
8.盒子阴影 – box-shadow
box-shadow: h-shadow v-shadow blur spread color inset;
image.png
div
{
box-shadow: 10px 10px 5px #888888;
}
网友评论