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()选择器等同于<html>元素
:not()选择器称为否定选择器
:empty()选择器表示的就是空。是一点内容都没有，哪怕是一个空格
:target()选择器 点击a标签#111目标id为111的标签
<p id="111">sadadas</p>
<a href="#111">123</a>
:lang()项目需要做国际化，并且中英文环境下，样式会有不同。
a:lang(en){color:'red'}选中3个以en开头的
<a lang="en-us" href="http://www.phpstudy.net"> phpstudy </a>
<a lang="en-uk">HTML</a>
<a lang="en" href="http://www.511yj.com"> 511遇见</a>
常用伪元素: ::first-letter,::first-line,::before,::after
用途1
.app:before{
content: '';
border: 1px #df147f solid;
50px;
position: absolute;
left: 25px;
top:-5px;
}
.app:after{
content: '';
border: 1px #ff102c solid;
50px;
position: absolute;
left: 25px;
bottom:-5px;
}
用途2 清浮动
css3中新加了个 ::selection
css3中新写法::
2.基本样式:长度颜色,字体样式,文本样式,背景样式
长度颜色
<style type="text/css">
body {
background-color: yellowgreen;
}
div {
/*长度单位*/
/*px in pt mm cm em rem vw vh*/
100px;
/* 720pt; 10in*/
/* 10em; 通常160px 10rem*/
/* 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
}
字体样式
<style type="text/css">
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", "微软雅黑";
}
</style>
文本样式
<style type="text/css">
span {
color: red;
/*水平居中方式:left center right*/
text-align: center;
/*字划线: underline line-through overline none*/
text-decoration: overline;
/*字间距*/
letter-spacing: 3px;
/*词间距*/
word-spacing: 10px;
}
div {
300px;
/*显示方式*/
display: inline-block;
}
div {
font-size: 12px;
/*垂直排列方式: top baseline bottom*/
vertical-align: baseline;
/*缩进*/
text-indent: 2em;
}
/*遇到连体的英文,html将其解析为一个单词(作为一个整体)*/
.div {
/*按标签的设定宽度强行换行,可以在单词(整体)内部换行*/
word-wrap: break-all;
}
</style>
<div class="div">abcdefabcdefabcdefabcdeabcdefabcdef</div>
背景样式
<style type="text/css">
div {
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;
}
</style>