引入css的三种方式
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>三种方式</title> /* 三种方式优先级比较 外部样式 < 内部样式 < 行内样式 */ <link rel="stylesheet" href="mycss.css"> <style> p { color: red; } </style> </head> <body> <p style="color: brown">xxxxxxx</p> </body> </html>
基本选择器
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Title</title> <style> /*标签选择器 标签名*/ /*span {*/ /* color: brown;*/ /*}*/ /*div {*/ /* color: red;*/ /*}*/ /*类选择器:点加类名*/ /*.c1 {*/ /* color: red;*/ /*}*/ /*.c2 {*/ /* color: aqua;*/ /* font-size: 40px;*/ /*}*/ /*id选择器:#+id值*/ /*不能出现相同id*/ /*#d1 {*/ /* color: greenyellow;*/ /* font-size: 30px;*/ /*}*/ /*#d2 {*/ /* background-color: red;*/ /* font-size: 30px;*/ /*}*/ /*通用选择器*/ /** {*/ /* color: pink;*/ /* font-size: 20px;*/ /*}*/ </style> </head> <body> <span id="d1">第一个span</span> <div>div <span class="c1">div下的第一个span</span> <span id="d2">div下的第二个span</span> <div> <span class="c1">下下的span</span> </div> </div> <span class="c2"> 第二个span </span> </body> </html>
组合选择器
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Title</title> <style> /*后代选择器*/ /*div span {*/ /* color: red;*/ /*}*/ 会将div下所有的span找到 /*儿子选择器*/ /*div>span {*/ /* color: pink;*/ /*}*/ /*毗邻选择器:紧挨着下面的一个 相邻的才起作用*/ /*div+span {*/ /* color: greenyellow;*/ /*}*/ /*弟弟选择器:同级别的下面所有的标签 一定要记住是同级别下的 */ /*div~span {*/ /* color: brown;*/ /*}*/ </style> </head> <body> <span>第一个span</span> <div> <span>div下第一个span</span> <p> <span>下下的第一个span</span> </p> <span>div下的第二个span</span> <p>123123123</p> </div> <p>asdasdasd</p> <span>div结束的第一个span</span> <span>div结束的第二个span</span> <div> <span>111</span> <p>pppppp</p> </div> <span>222</span> </body> </html>
属性选择器
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Title</title> <style> /*1.具有某个属性名*/ /*2.具有某个属性名及属性值*/ /*3.具有某个属性名及属性值某个标签*/ /*找只要有name这个属性名的所有标签*/ /*[name] {*/ /* background-color: greenyellow;*/ /* font-size: 30px;*/ /*}*/ /*找到具有name属性并且name值为xxx的标签*/ /*[name="xxx"] {*/ /* background-color: pink;*/ /*}*/ /*找到span标签 具有name属性并且值为xxx的span标签*/ /*span[name="xxx"] {*/ /* background-color: red;*/ /*}*/ </style> </head> <body> <p name="xxx"> p1 </p> <div name="div" hobby="xxx"> div </div> <span name="xxx">span</span> </body> </html>
分组与嵌套
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Title</title> <style> /*分组*/ /*#p1 {*/ /* background-color: red;*/ /*}*/ /*.c2 {*/ /* background-color: red;*/ /*}*/ /*span {*/ /* background-color: red;*/ /*}*/ #p1,.c2,span { color: red; } </style> </head> <body> <p id="p1">ppp</p> <div class="c2">div</div> <span>span</span> </body> </html>
伪类选择器
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Title</title> <style> /*连接态*/ a:link { color: pink; } /*悬浮态*/ a:hover { color: red; } /*鼠标点击态*/ a:active { color: brown; } /*访问过后的状态*/ a:visited { color: greenyellow; } /*input框被点击的状态 称之为获取焦点*/ input:focus { background-color: greenyellow; } input:hover { background-color: red; } </style> </head> <body> <a id="a1" href="https://www.baidu.com" target="_blank">click me!</a> <input type="text"> </body> </html>
伪元素选择器
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Title</title> <style> /*p:first-letter {*/ /* font-size: 48px;*/ /* color: red;*/ /*}*/ p:before { content: '***'; color: gold; } /*after在解决浮动的问题很有用*/ p:after { content: '***'; color: red; } </style> </head> <body> <p>澳门新浦金</p> <p>澳门新浦金</p> <p>澳门新浦金</p> </body> </html>
选择器优先级
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Title</title> <!-- 1.选择器相同情况下:就近原则--> <!-- 2.选择器不同的情况下--> <!-- 行内 > id选择器 > 类选择器 > 标签选择器--> <style> #p1 { color: red; } .c1 { color: green; } p { color: brown; } * { color: black; } </style> </head> <body> <p id="p1" class="c1" style="color: pink">你xx 让你</p> </body> </html>