<!DOCTYPE html><html><head> <meta charset="UTF-8"> <title></title></head><style type="text/css"> /* “*”代表所有元素，一般情况下会提前定义全局选择符 */ * { color: pink; font-size: 12px; border: 1px solid blue; } /*类选择符链：只有同时出现 www dreamdu com的类才可以使用*/ .www.dreamdu.com { color:blue; } /*一一个元素可以有多个类选择符*/ .dreamdu-red { color:red; } p.dreamdu-12px { font-size:12px; } p.dreamdu-bold { font-weight:bold; } #btw{ border: 2px; width: auto; /*定义边框宽度*/ border-top-width: 10px; border-right-width: 5px; border-left-width: 2px; border-bottom-width: 7px; /*定义边框颜色*/ border-top-color: #006486; border-right-color: #F8AE11; border-left-color: #3080CB; border-bottom-color: #464646; /*定义边框样式*/ border-right-style: solid; border-left-style: double; border-bottom-style: dashed; border-top-style: groove; /*border属性 是以上几个属性的集合 但是他也分为 top,right,left bottom*/ /**border: border-width border-style border-color;*/ } #mg{ border-style: solid; border-color: red; /*margin:表示外边框外面可以有一层补白，他可以把块级元素分开，边外补白定义了围绕某种元素的空白*/ margin-top: 10px; } #pdp{ border-style: solid; border-color: #3080CB; margin-top: 10px; /*padding:表示一个边框的的内部补白区，边内补白*/ padding-left: 40px; /*相对于当前对象单位，相对长度单位可以随着当前为本属性进行调整*/ font-size: 2em; /*相对百分比*/ width: 10%; } h1:before{ /**/ content: "test"; display: inline; } h1:after{ content: "背景"; } /* 选择符是从上往下执行的，并向下覆盖属性 选择符1，选择符2{ color:red; } */ h2{ color: #3080CB; } h1,h2,h3{ color: #FF0000; border-style: solid; } /*只要是 p 被 div包含时候，无论p是他的什么子类，还是孙类 只要是后裔就行*/ div p{ font-size: 40px; color: saddlebrown; } /*定义某一个或某一类元素的子类样式，仅仅限于子类*/ #son>p{ color: #FF0000; } #brother+p{ color: #FF0000; } /*属性选择器表示具有某种属性的选择器*/ /*表示具有type属性的input元素*/ input[type]{ color: #FF0000; } /*表示input标签某一个类的,某一个值*/ input[class='cd']{ color: #3080CB; } /*表示匹配input标签中class属性中其中具有某一个值的元素*/ input[class~='cd']{ color: #3080CB; } /*表示匹配input标签class属性值为cd或者跟在cd后面的链接符是-的*/ input[class|='cd']{ color: #3080CB; } /*表示匹配input标签class属性值中以cd开头的所有元素*/ input[class^='cd']{ color: #3080CB; } /*表示匹配input标签class属性值中以cd结尾的所有元素*/ input[class$='cd']{ color: #3080CB; } /*表示匹配input标签class属性值中具有cd值的所有元素*/ input[class*='cd']{ color: #3080CB; }</style><!--标签元素等级之间是有继承关系的，或兄弟关系的--><!--祖类元素--><body> <p class="dreamdu-bold dreamdu-12px dreamdu-red">梦之都 红色12px的粗体</p> <!--父类元素--> <h1>dfafa</h1> <h2>dsfaf</h2> <h3>dsfafsdaf</h3> <!--父类元素--> <div id="btw"> <!--子类元素--> <span> <!--孙类元素--> <p id="p">在乎</p> </span> </div> <div id="mg"> <p id="pdp">在乎</p> </div> <div id="son"> <div> <p>在乎地方</p> </div> <p>你是</p> </div> <div> <span id="brother">fafa</span> <p>兄弟</p> <p>隔离</p> </div> <input type="text"> <input></body></html>登入後複製
