CSS的三种引入方式
<!DOCTYPE html><html> <head> <meta charset="UTF-8" /> <title>三种引入方式</title><!--1. 通过style标签嵌入到html文档中用link标签和@import两种--> <link rel="stylesheet" href="style.css" /><!--2. 通过style标签嵌入到html文档中--> <style> @import url(style.css); p{ color:red; } </style> </head> <body> <!--3. 在元素标签内通过style属性直接定义样式--> <p>行内样式</p> </body></html>
id class 标签 属性 上下文 结构伪类选择器
<!--上下文选择器： 1.空格：所有层级 2.> ：父子级 3.+ ：相邻的兄弟后面一个 4.~ ：所有相邻兄弟（后面）--> <style> /* 标签,类,ID,属性选择器 */ p { color: blue; } .p { color: #555; } #P { color: coral; } div[name="div"] { font-size: 20px; } /* 上下文选择器 */ /* 后代 */ ul li { color: yellow; } /* 子元素 */ ul > p { color: black; font-size: 18px; } /* 同级相邻 */ .one + li { color: darkred; } /* 同级后面所有元素 */ .two ~ li { color: red; font-size: 12px; } </style>
<!-- 标签选择 --> <p>这是一段文字</p> <!-- 类选择 --> <p class="p">这是一段文字</p> <!-- ID选择 --> <div id="P">这是一段文字</div> <!-- 属性选择 --> <div name="div">这是一段文字</div> <!-- 上下文选择 --> <!--上下文选择器有4种:1.后代选择 2.子元素选择 3.同级相邻 4.同级所有--> <ul> <p>这是一段文字</p> <li class="one">这是一段文字</li> <li class="two">这是一段文字</li> <li>这是一段文字</li> <li>这是一段文字</li> <li>这是一段文字</li> </ul>
重点的伪类选择器
<style> /* 匹配任意位置元素 */ /* ul li:nth-of-type(an+b) a是启点,从0开始,n是一个循环数从0开始++, b是偏移量, 三者关系是a*n+b,一直循环找到所有 */ ul li:nth-of-type(2n) { color: red; } /* 反向获取 */ ul li:nth-last-of-type(-n+3){ color: blue; } /* 几个语法糖 */ /* 偶数 */ ul li:nth-of-type(even) { color: yellow; } /* 奇数 */ ul li:nth-of-type(odd) { color: black; } /* 第一个 */ ul li:first-of-type { color: #585858; } /* 最后一个 */ ul li:last-of-type { color: #000; } </style>
<ul> <li>这是一段文字</li> <li>这是一段文字</li> <li>这是一段文字</li> <li>这是一段文字</li> <li>这是一段文字</li> <li>这是一段文字</li> </ul>
