- 引入css的方式
- 在css的<head>内定义一个<style>标签 p{color: red;}
- 在css的<body>内的<p style ="color: red">
- 在css的<head>内定义一个<link rel="stylesheet" href="mycss.css">标签，其中mycss是引入的css文件
- 基本选择器
- 标签选择器、id选择器，类选择器，通用选择器
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> /*标签选择器 所有span标签的颜色都是红色*/ span {color: orange} /*ID 选择器*/ #s1 {font-size :36px} /*类选择器*/ .c1 {color: blue} /* 通用选择器*/ * {color : deeppink} </style> </head> <body> <span id ="s1">span</span> <div class="c1">div <p>p <span>span</span> </p> </div> <div class ="c1">div</div> </body> </html>
- 组合选择器
-
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> /*后代选择器*/ div span{color:blue} /*儿子选择器*/ div>span {color:red} /*毗邻选择器*/ div+span {color:blue} /*弟弟选择器*/ div~span {color:deeppink} </style> </head> <body> <span>我是div上面的span</span> <div> <span>我是div里面的第一个span</span> <p>我是div里面的第一个p <span>我是div里面第一个p里面的第一个span</span> </p> <span>我是div里面的第二个span</span> </div> <span>我是div下面的第一个span</span> <span>我是div下面的第二个span</span> </body> </html>
- 属性选择器
-
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> [xxx] {color:red} [xxx ='1'] {color:blue} [xxx ='2']{color:forestgreen} p[xxx='2']{color:pink} </style> </head> <body> <span xxx="2">span</span> <p xxx>我只有属性名</p> <p xxx ='1'>我有属性名和属性值并且值为1</p> <p xxx ="2">我有属性名和属性值并且值为2</p> </body> </html> 分组与嵌套 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> /*div ,p,span {color:red}*/ div p span {color:blue} </style> </head> <body> <div>div <p>p <span>span</span></p></div> <p>p</p> <span>span</span> </body> </html>
- 伪类选择器
伪类选择器 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> a:link { color :red; } a:hover { color:blue; } a:active{ color:yellow; } a:visited{ color:green; } input:focus{ background-color: red; } </style> </head> <body> <a href="http://www.souhu.com">搜狐</a> <a href="http://www.xiaohuar.com">校花</a> <a href="https://www.sogo.com">搜狗</a> <input type="text"> </body> </html> - 伪元素选择器
-
!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> p:first-letter{ color: red; font-size: 48px; } p:before { content:'*'; color:red; } p:after{ content: "?"; color:deeppink; font-size: 48px; } </style> </head> <body> <p>继承是css的一个主要特征，他是一个依赖祖先-后代的关系的</p> <p>继承是css的一个主要特征，他是一个依赖祖先-后代的关系的</p> <p>继承是css的一个主要特征，他是一个依赖祖先-后代的关系的</p> <p>继承是css的一个主要特征，他是一个依赖祖先-后代的关系的</p> </body> </html>
- 选择器优先级
-
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> /*#p1 {color :blue;}*/ .c1 {color:red;} /*p {color:blue}*/ </style> <link rel="stylesheet" href="mycss.css"> </head> <body> <p id="p1" class="c1">p</p> </body> </html> 选择器优先级 选择器相同的情况下,就近原则 行内样式>id选择器>类选择器>元素选择器