<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>三种打开方式</title> <!--<link rel="stylesheet" href="mycss.css">--> </head> <body> <p> <b>下午好大宝贝儿</b> </p> </body> </html>
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>三种打开方式</title> <style> p { color: aquamarine; } </style> </head> <body> <p> <b>下午好大宝贝儿</b> </p> </body> </html>
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>三种打开方式</title> </head> <body> <p style="color: bisque"> <b>下午好大宝贝儿</b> </p> </body> </html>
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>基本选择器</title> <style> /*标签选择器：标签名*/ p { color: crimson; } /*类选择器：点+类名*/ .c1 { color: deeppink; } /*id选择器：#+id值*/ #d1 { color: dodgerblue; } /*通用/全局选择器*/ * { color: greenyellow; } </style> </head> <body> <div id="d1">你以为有钱人很快乐吗? <p class="c1">不不不，他们的快乐你根本想象不到</p> </div> <div>千万不要自己感动自己。大部分人看似的努力，不过是愚蠢导致的</div> <p id="d2">别人骂你你要听，别人夸你你别信</p> <span class="c1">别灰心， 人生就是这样起起落落落落落落落落落落落的</span> <span>只有正真努力过的人才知道，天赋有多重要</span> </body> </html>
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> /*后代选择器*/ div span { color: greenyellow; } /*儿子选择器*/ div>span { color: aqua; } /*毗邻选择器：紧挨着的下面的一个*/ div+span { color: deeppink; } /*弟弟选择器:同级别的下面所有的标签*/ div~span { color:saddlebrown; } </style> </head> <body> <span>div上面的第一个span</span> <span>div上面的第二个span</span> <div> <span>div里面的第一个span</span> <p>div里面的第一个p <span>p里面的第一个span</span> <span>p里面的第二个span</span> </p> <span>div里面的最后一个span</span> </div> <span>div下面的第一个span</span> <span>div下面的第二个span</span> <span>div下面的第三个span</span> </body> </html>
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> /* 1.具有某个属性名 2.具有某个属性名及属性值 3.具有某个属性名及属性值的某个标签 */ /*找到只有hobby这个属性名的所有标签*/ [hobby] { background-color:red; color:white; } /*找到hobby这个属性是“secret”的所有标签*/ [hobby="secret"] { background-color: deeppink; color:greenyellow; /*找到input 具有属性名是hobby并且值是secret的input标签*/ input[hobby="secret"]{ background-color: aquamarine; } </style> </head> <body> user<input type="text" name="user" hobby="secret"> xxx<input type="text" > <span hobby="secret">长得丑就是一种病，不然为什么整型医院叫医院</span> </body> </html>
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> p { color: aqua; } div { color: greenyellow; } span { color: saddlebrown; } /*分组*/ div,span,p { color: darkslateblue; } /*嵌套，多个不用的选择器，可以组合使用*/ #d1,.c1,span { color: deeppink; } </style> </head> <body> <p id="d1">p1</p> <p id="d2">p2</p> <div >div1</div> <div class="c1">div2</div> <span>span</span> </body> </html>
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> /*连接态*/ a:link { color:deeppink; } /*鼠标悬浮态*/ a:hover { color: orangered; } /*鼠标点击态*/ a:active { color: red; } /*访问过后的状态*/ a:visited { color: dodgerblue; } /*input框被点击的状态，称之为获取焦点*/ input:focus { background-color: greenyellow; } input:hover { background-color: deeppink; } </style> </head> <body> <a href="http://www.4399.com"> <b>明老师.avi</b> </a> 这是一个输入框：<input type="text"> </body> </html>
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> p:first-letter { font-size: 48px; color: deeppink; } p:before { content: "%"; color:gold; } /*after在解决浮动的问题上，很有用*/ p:after { content: "@"; color: red; } </style> </head> <body> <p>春眠不觉晓</p> <p>春眠不觉晓</p> <p>春眠不觉晓</p> <p>春眠不觉晓</p> <p>春眠不觉晓</p> </body> </html>
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <link rel="stylesheet" href="mycss.css"> <style> /* 1.选择器相同的情况下：就近原则 2、选择器不同的情况下： 行内 > id选择器 > 类选择器 > 标签选选择器 */ #d1 { color: gold; } .c1 { color: deeppink; } p { color: saddlebrown; } </style> </head> <body> <p id="d1" class="c1">长的丑活得久，长得帅老的快</p> </body> </html>
原文：https://www.cnblogs.com/spencerzhu/p/11460932.html