目录
/*单行注释*//*多行注释1多行注释2多行注释3*/<link rel="stylesheet" href="test.css"><head> <style> h1 { color: red; } </style></head><h1 style="color: red">bigb</h1>标签选择器
id选择器
类选择器
通用选择器
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>基本选择器</title> <style> span { color: darkred; } #d1 { color: darkgreen; } .c1 { color: darkblue; } * { color: darkgoldenrod; /*会覆盖上面的样式*/ } </style></head><body><span>这是一个span标签</span><div id="d1">这是一个div标签</div><p class="c1">这是一个p标签</p></body></html><!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>组合选择器</title> <style> div span { color: darkred; } </style></head><body><div>这是一个div标签1 <span>这是一个在div标签1中的span标签1</span> <span>这是一个在div标签1中的span标签2</span> <p> <span>这是一个在div1下面的p标签中的span标签</span> </p> <span>这是一个在div标签1中的span标签3</span></div><span>这是div后面的span标签1</span><p>这是一个p标签</p><span>这是div后面的span标签2</span></body></html><!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>属性选择器</title> <style> /**[username] {*/ /*color: darkred;*/ /*}*/ *[username="bigb"] { color: darkred; } </style></head><body><p username="bigb">p标签1</p><p username="blake">p标签2</p><p username="black">p标签3</p></body></html><!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>伪类</title> <style> a:link {color: red;} /*未访问的连接*/ a:visited {color: darkgrey;} /*已访问的连接*/ a:hover {color: darkgreen;} /*鼠标悬浮在连接上*/ a:active {color: darkblue} /*点击连接*/ </style></head><body><a href="https://baidu.com">click here to search</a></body></html><!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>伪元素</title> <style> p:first-letter { font-size: 40px; color: darkred; } p:before { content: "***"; color: darkgreen; } p:after { content: "???"; color: darkgreen; } </style></head><body><p>sometime I rock sometime I roll sometime it's not me is control.</p></body></html>
