1.高阶选择器:子代后代，相邻通用兄弟，交集并集，属性，伪类，伪元素

子代后代选择器

div>p{}  div p{}

相邻通用兄弟

div+p{}  div~p{}理解：div同学的同桌p  div同学的【同学(有p的)】

交集并集选择器

div,p    div.div注意:类选择写后面

属性选择器

[id] [class='div'] [class^*$='d']

伪类选择器,伪元素选择器(重点讲解)

定义:伪类用于向某些选择器添加特殊的效果(添加样式)

伪元素用于向某些选择器设置特殊效果。(改变样式)

总结区别:

伪类本质上是为了弥补常规CSS选择器的不足；

伪元素本质上是创建了一个 有内容的 虚拟容器；

css3中:伪类和::伪元素;

可以同时使用多个伪类，而只能同时使用一个伪元素；

常用伪类: :not() :focus :link :visited :hover :active :first-child       :nth-child():nth-last-child():nth-of-type(n):only-child :only-of-type

结构性伪类选择器

:root()选择器等同于元素

:not()选择器称为否定选择器

:empty()选择器表示的就是空。是一点内容都没有，哪怕是一个空格

:target()选择器 点击a标签#111目标id为111的标签

sadadas

123

:lang()项目需要做国际化，并且中英文环境下，样式会有不同。

a:lang(en){color:'red'}选中3个以en开头的

phpstudy

HTML

511遇见

常用伪元素: ::first-letter,::first-line,::before,::after

用途1

.app:before{

content: '';

border: 1px #df147f solid;

width: 50px;

position: absolute;

left: 25px;

top:-5px;

}

.app:after{

content: '';

border: 1px #ff102c solid;

width: 50px;

position: absolute;

left: 25px;

bottom:-5px;

}

用途2 清浮动

css3中新加了个 ::selection

css3中新写法::

2.基本样式:长度颜色,字体样式,文本样式,背景样式

长度颜色

body {

background-color: yellowgreen;

}

div {

/*长度单位*/

/*px in pt mm cm em rem vw vh*/

width: 100px;

/*width: 720pt; 10in*/

/*width: 10em; 通常160px 10rem*/

/*width: 50vw; 50% view width*/

height: 100px;

/*颜色单位*/

/*单词 rgb() rgba() #六个十六进制位*/

色光三原色：红、绿、蓝。

/*background-color: cyan;*/

/*background-color: rgb(255, 0, 0);*/

/*background-color: rgba(255, 0, 0, 0);*/

/*满足AABBCC形式可以简写为abc*/

background-color: #a0c

}

字体样式

span {

/*大小*/

font-size: 30mm;

/*字重: bold粗 (normal标准 lighter较淡的) 100~900*/

font-weight: 900;

/*行高: 行高设置大于等于字体大小,字体在行高中垂直居中显示*/

line-height: 50mm;

/*样式: 一般不关心*/

font-style: normal;

/*字族:可以自定义字族当Segoe UI Emoji不存在,或不起作用,再选取 微软雅黑 */

font-family: "Segoe UI Emoji", "微软雅黑";

/*css语法: 空格隔开为多个值赋值(加粗,style，size/hight，famil), ,隔开为一个值多值赋值*/

font: lighter 50mm/80mm "Segoe UI Emoji", "微软雅黑";

}

文本样式

span {

color: red;

/*水平居中方式:left center right*/

text-align: center;

/*字划线: underline line-through overline none*/

text-decoration: overline;

/*字间距*/

letter-spacing: 3px;

/*词间距*/

word-spacing: 10px;

}

div {

width: 300px;

/*显示方式*/

display: inline-block;

}

div {

font-size: 12px;

/*垂直排列方式: top baseline bottom*/

vertical-align: baseline;

/*缩进*/

text-indent: 2em;

}

/*遇到连体的英文,html将其解析为一个单词(作为一个整体)*/

.div {

/*按标签的设定宽度强行换行,可以在单词(整体)内部换行*/

word-wrap: break-all;

}

背景样式

div {

width: 300px;

height: 300px;

background-color: red;

}

div {

/*背景图片*/

background-image: url("data/bg_repeat.gif");

/*平铺: no-repeat repeat-x repeat*/

background-repeat: no-repeat;

/*定位*/

/*10px == 10px center 设置一个值,第二个值默认为center*/

/*10px 10px 第一个值控制水平位置,第二个值控制垂直位置*/

/*background-position: right center;*/

/*定位相关的涉及到滚动时的效果: scroll fixed*/

background-attachment: fixed;

}

div {

/*整体设置*/

background: url("data/bg_repeat.gif") 10px 10px no-repeat red;

}