1.HTML标记定义
p{属性:属性值;属性1:属性1}
<p>...</p>
注:p可以叫做选择器,定义那个标记中的内容执行其中的样式。一个选择器可以控制若干个样式属性,他们之间需要用英文的分号隔开,最后一个可以不加分号。
示例代码:
![](https://i-blog.csdnimg.cn/blog_migrate/8f900a89c6347c561fdf2122f13be562.gif)
![](https://i-blog.csdnimg.cn/blog_migrate/961ddebeb323a10fe0623af514929fc1.gif)
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <title>定义CSS样式(CSS选择器)</title> 5 <meta charset="UTF-8"> 6 <style type="text/css"> 7 p{ 8 color:red; 9 font-size:30px 10 } 11 </style> 12 13 </head> 14 <body> 15 <p>昨天是七夕节!</p> 16 </body> 17 </html>
显示效果:
2.Class定义
.p{属性:属性值;属性1:属性值1}
<p class="p">...</p>
注:class定义是以"."开始
示例代码:
![](https://i-blog.csdnimg.cn/blog_migrate/8f900a89c6347c561fdf2122f13be562.gif)
![](https://i-blog.csdnimg.cn/blog_migrate/961ddebeb323a10fe0623af514929fc1.gif)
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <title>定义CSS样式(CSS选择器)</title> 5 <meta charset="UTF-8"> 6 <style> 7 .p{ 8 background-color: red; 9 color:blue; 10 font-size:40px; 11 } 12 </style> 13 </head> 14 <body> 15 <p class="p">昨天是七夕节!</p> 16 </body> 17 </html>
显示效果:
与HTML标记定义联用:
示例代码:
![](https://i-blog.csdnimg.cn/blog_migrate/8f900a89c6347c561fdf2122f13be562.gif)
![](https://i-blog.csdnimg.cn/blog_migrate/961ddebeb323a10fe0623af514929fc1.gif)
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <title>定义CSS样式(CSS选择器)</title> 5 <meta charset="UTF-8"> 6 <style> 7 .p{ 8 background-color: red; 9 color:blue; 10 font-size:40px; 11 } 12 .p p{ 13 color:green; 14 font-size:50px; 15 } 16 </style> 17 </head> 18 <body> 19 <div class="p"> 20 <p>昨天是七夕节!</p> 21 昨天是七夕节!昨天是七夕节! 22 </div> 23 </body> 24 </html>
显示效果:
3.ID定义
#p{属性:属性值;属性1:属性值1}
<p id="p">...</p>
注:ID定义是以"#"开始的。
示例代码:
![](https://i-blog.csdnimg.cn/blog_migrate/8f900a89c6347c561fdf2122f13be562.gif)
![](https://i-blog.csdnimg.cn/blog_migrate/961ddebeb323a10fe0623af514929fc1.gif)
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <title>定义CSS样式(CSS选择器)</title> 5 <meta charset="UTF-8"> 6 </head> 7 <style> 8 #p{ 9 background-color: green; 10 color:red; 11 font-size:40px; 12 } 13 </style> 14 <body> 15 <p id="p">昨天是七夕节!</p> 16 </body> 17 </html>
显示效果:
ID定义与HTML标记定义联用
代码示例:
![](https://i-blog.csdnimg.cn/blog_migrate/8f900a89c6347c561fdf2122f13be562.gif)
![](https://i-blog.csdnimg.cn/blog_migrate/961ddebeb323a10fe0623af514929fc1.gif)
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <title>定义CSS样式(CSS选择器)</title> 5 <meta charset="UTF-8"> 6 </head> 7 <style> 8 #ppp{ 9 background-color: green; 10 color:red; 11 font-size:40px; 12 } 13 #ppp p{ 14 background-color: white; 15 color: blue; 16 font-size: 50px; 17 } 18 </style> 19 <body> 20 <div id="ppp"> 21 <p>昨天是七夕节!</p> 22 昨天是七夕节!昨天是七夕节! 23 </div> 24 </body> 25 </html>
显示效果:
4.优先级问题
(1)ID > Class > HTML
(2)同级时选择离元素最近的一个
#p{color:red}
#p{color:#f60}
执行颜色为#f60的
示例代码:
![](https://i-blog.csdnimg.cn/blog_migrate/8f900a89c6347c561fdf2122f13be562.gif)
![](https://i-blog.csdnimg.cn/blog_migrate/961ddebeb323a10fe0623af514929fc1.gif)
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <title>定义CSS样式(CSS选择器)</title> 5 <meta charset="UTF-8"> 6 <style> 7 #ppp{color:blue} 8 .p{color: green;} 9 div{color: red;} 10 </style> 11 </head> 12 <body> 13 <div id="ppp" class="p"> 14 昨天是七夕节!昨天是七夕节! 15 </div> 16 </body> 17 </html>
显示效果:
5.组合选择器(同时控制多个元素)
h1,h2,h3{font-size:14px;color:red;}
注:选择器组合可以使用“,”隔开
代码示例:
![](https://i-blog.csdnimg.cn/blog_migrate/8f900a89c6347c561fdf2122f13be562.gif)
![](https://i-blog.csdnimg.cn/blog_migrate/961ddebeb323a10fe0623af514929fc1.gif)
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <title>定义CSS样式(CSS选择器)</title> 5 <meta charset="UTF-8"> 6 <style> 7 h1,h2,h3,h4,p,.div{color:red} 8 </style> 9 </head> 10 <body> 11 <div> 12 <h1>昨天是七夕节!</h1> 13 <h2>昨天是七夕节!</h2> 14 <h3>昨天是七夕节!</h3> 15 <h4>昨天是七夕节!</h4> 16 </div> 17 <p> 18 昨天是七夕节! 19 </p> 20 <div class="div"> 21 昨天是七夕节! 22 </div> 23 </body> 24 </html>
显示效果:
6.伪元素选择器
(1)a:link 正常链接的样式
示例代码:
![](https://i-blog.csdnimg.cn/blog_migrate/8f900a89c6347c561fdf2122f13be562.gif)
![](https://i-blog.csdnimg.cn/blog_migrate/961ddebeb323a10fe0623af514929fc1.gif)
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <title>定义CSS样式(CSS选择器)</title> 5 <meta charset="UTF-8"> 6 <style> 7 a:link{color:red} 8 </style> 9 </head> 10 <body> 11 <a href="http://www.baidu.com" target="_blank">百度</a> 12 </body> 13 </html>
(2)a:hover 鼠标放上去的样式
示例代码:
![](https://i-blog.csdnimg.cn/blog_migrate/8f900a89c6347c561fdf2122f13be562.gif)
![](https://i-blog.csdnimg.cn/blog_migrate/961ddebeb323a10fe0623af514929fc1.gif)
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <title>定义CSS样式(CSS选择器)</title> 5 <meta charset="UTF-8"> 6 <style> 7 a:hover{color:green} 8 </style> 9 </head> 10 <body> 11 <a href="http://www.baidu.com" target="_blank">百度</a> 12 </body> 13 </html>
(3)a:active 选择链接时的样式
示例代码:
![](https://i-blog.csdnimg.cn/blog_migrate/8f900a89c6347c561fdf2122f13be562.gif)
![](https://i-blog.csdnimg.cn/blog_migrate/961ddebeb323a10fe0623af514929fc1.gif)
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <title>定义CSS样式(CSS选择器)</title> 5 <meta charset="UTF-8"> 6 <style> 7 a:active{color:blue} 8 </style> 9 </head> 10 <body> 11 <a href="http://www.baidu.com" target="_blank">百度</a> 12 </body> 13 </html>
(4)a:visited 已经访问过的链接的样式
示例代码:
![](https://i-blog.csdnimg.cn/blog_migrate/8f900a89c6347c561fdf2122f13be562.gif)
![](https://i-blog.csdnimg.cn/blog_migrate/961ddebeb323a10fe0623af514929fc1.gif)
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <title>定义CSS样式(CSS选择器)</title> 5 <meta charset="UTF-8"> 6 <style> 7 a:visited{color:yellow} 8 </style> 9 </head> 10 <body> 11 <a href="http://www.baidu.com" target="_blank">百度</a> 12 </body> 13 </html>