id 方法精确
#div1 {
font-size:30px;
}
<!DOCTYPE html> <html> <head> <meta name="generator" content="HTML Tidy for HTML5 (experimental) for Windows https://github.com/w3c/tidy-html5/tree/c63cc39" /> <meta charset="utf-8" /> <title>css给网页装潢</title> <style type="text/css"> #div1 { font-size:30px; } </style> </head> <body> <p>段落</p> <p>段落</p> <p>段落</p> <p>段落</p> <div id="div1">diyihgsddg</div> <div>diyihgsddg</div> <div>diyihgsddg</div> <div>diyihgsddg</div> </body> </html>
class 按类
.red {
color:red;
}
<html> <head> <meta name="generator" content="HTML Tidy for HTML5 (experimental) for Windows https://github.com/w3c/tidy-html5/tree/c63cc39" /> <meta charset="utf-8" /> <title>css给网页装潢</title> <style type="text/css"> .red { color:red; } .size40{ font-size:40px; } </style> </head> <body> <p>段落</p> <p>段落</p> <p>段落</p> <p class="red">段落</p> <div class="red">diyihgsddg</div> <div class="red size40">diyihgsddg</div> <!--class嵌套--> <div>diyihgsddg</div> <div>diyihgsddg</div> </body> </html>
标签选择：div,p不精确，面广
<html> <head> <meta name="generator" content="HTML Tidy for HTML5 (experimental) for Windows https://github.com/w3c/tidy-html5/tree/c63cc39" /> <meta charset="utf-8" /> <title>css</title> <style type="text/css"> div { color:red; } p { font-size:50px;} </style> </head> <body> <p>111111111111</p> <p>222222222222</p> <p>333333333333</p> <p>555555555555</p> <div>diyihgsddg</div> <div>diyihgsddg</div> <div>diyihgsddg</div> <div>diyihgsddg</div> </body> </html>
交集选择
div.red {
color:red;
}
<html> <head> <meta name="generator" content="HTML Tidy for HTML5 (experimental) for Windows https://github.com/w3c/tidy-html5/tree/c63cc39" /> <meta charset="utf-8" /> <title>css给网页装潢</title> <style type="text/css"> div.red { color:red; } </style> </head> <body> <p>段落</p> <p>段落</p> <p>段落</p> <p class="red">段落</p> <div class="red">diyihgsddg</div> <div class="red size40">diyihgsddg</div> <div>diyihgsddg</div> <div>diyihgsddg</div> </body> </html>
并集选择器
div,p,li{
color:green;
font-size:30px;
}
<html> <head> <meta name="generator" content="HTML Tidy for HTML5 (experimental) for Windows https://github.com/w3c/tidy-html5/tree/c63cc39" /> <meta charset="utf-8" /> <title>css给网页装潢</title> <style type="text/css"> div,p,li{ color:green; font-size:30px; } </style> </head> <body> <p>段落</p> <p>段落</p> <p>段落</p> <div>diyihgsddg</div> <div>diyihgsddg</div> <div>diyihgsddg</div> <ul><li>123</li><li>456</li></ul> </body> </html>
子后代关系
<html> <head> <meta name="generator" content="HTML Tidy for HTML5 (experimental) for Windows https://github.com/w3c/tidy-html5/tree/c63cc39" /> <meta charset="utf-8" /> <title>css给网页装潢</title> <style type="text/css"> div p{ color:green;} </style> </head> <body> <div> <p>我是div里面的p</p> <p>我是div里面的p</p> <p>我是div里面的p</p> </div> </body> </html>
后代的后代
<html> <head> <meta name="generator" content="HTML Tidy for HTML5 (experimental) for Windows https://github.com/w3c/tidy-html5/tree/c63cc39" /> <meta charset="utf-8" /> <title>css给网页装潢</title> <style type="text/css"> div p{ color:green;} div li{ color:yellow;} </style> </head> <body> <div> <p>我是div里面的p</p> <p>我是div里面的p</p> <p>我是div里面的p</p> </div> <div> <ul> <li>123456</li> <li>123456</li> </ul> </div> </body> </html>
伪类 a:hover鼠标放上去变色
<html> <head> <meta name="generator" content="HTML Tidy for HTML5 (experimental) for Windows https://github.com/w3c/tidy-html5/tree/c63cc39" /> <meta charset="utf-8" /> <title>css给网页装潢</title> <style type="text/css"> a:hover{color:red;}/*hover鼠标放上去变色*/ </style> </head> <body> <a href="http://www.baidu.com">百度</a> </body> </html>
*通配选择器 选中所有元素
<html> <head> <meta name="generator" content="HTML Tidy for HTML5 (experimental) for Windows https://github.com/w3c/tidy-html5/tree/c63cc39" /> <meta charset="utf-8" /> <title>css给网页装潢</title> <style type="text/css"> *{ font-size:30px;} </style> </head> <body> <p>aaaaaaaaaaaaaaaaaaa</p> <p>aaaaaaaaaaaaaaaaaaa</p> <a href="http://www.baidu.com">百度</a> </body> </html>
body继承 类似于*
<html> <head> <meta name="generator" content="HTML Tidy for HTML5 (experimental) for Windows https://github.com/w3c/tidy-html5/tree/c63cc39" /> <meta charset="utf-8" /> <title>css给网页装潢</title> <style type="text/css"> body{ font-size:30px;} </style> </head> <body> <p>aaaaaaaaaaaaaaaaaaa</p> <p>aaaaaaaaaaaaaaaaaaa</p> <a href="http://www.baidu.com">百度</a> </body> </html>