CSS

选择器 标签选择器 <h1>标题</h1> h1 { color: blue; } 类选择器 <div class="header"> <h1>标题</h1> </div> .header { color: blue; } ID选择器 <div id="header"> <h1>标题</h1> </div> #header { color: blue; } 组合选择器 /* 会同时选中所有 h1 和 .special */ <h1 class="title">标题1</h1> <h1 class="title">标题2</h1> <div class="special"></div> h1, .special { color: blue; } 属性选择器 li[class] {/* 选择所有有 class 属性的 li 标签 */} li[class="a"] {/* 选择 class 属性值为 "a" 的 li 标签 */} li[class~="a"] {/* 选择 class 属性值包含 "a类" 的 li 标签 */} li[class|="zh"] {/* 选择 class 属性值以 "zh" 开头并且后面跟随一个连字符'-'的 li 标签 */} li[class^="a"] {/* 选择 class 属性值以 "a" 开头的 li 标签 */} li[class$="a"] {/* 选择 class 属性值以 "a" 结尾的 li 标签 */} li[class*="a"] {/* 选择 class 属性值包含 "a" 的 li 标签 */} 关系选择器 article p {/* 选择 article 下的所有 p 元素 */} article > p {/* 选择 article 下的直接子元素 p 元素, 不会选中嵌套的 p 元素 */} h1 + p { /* 选择 h1 元素的下一个兄弟元素 p 元素, 会选中紧接着 h1 的 p 元素 */ <article> <h1>A heading</h1> <p> Veggies es bonus vobis, proinde vos postulo essum magis kohlrabi welsh onion daikon amaranth tatsoi tomatillo melon azuki bean garlic. </p> <p> Gumbo beet greens corn soko endive gumbo gourd. Parsley shallot courgette tatsoi pea sprouts fava bean collard greens dandelion okra wakame tomato. Dandelion cucumber earthnut pea peanut soko zucchini. </p> </article> } article ~ p { /* 选择 article 元素之后的所有兄弟元素 p 元素, 会选中下方所有的 p 元素 */ <article> <h1>A heading</h1> <p>I am a paragraph.</p> <div>I am a div</div> <p>I am another paragraph.</p> </article> } 伪类和伪元素 常用伪类 article p:first-child { /* 选择 article 下第一个 p 元素 */} article p:last-child { /* 选择 article 下最后一个 p 元素 */} article p:nth-child(2) { /* 选择 article 下第二个 p 元素 */} 伪元素 article p:first-child::first-line {/* 选择 article 下的第一个 p 元素的第一行 */} p::first-line {/* 选择 p 元素的第一行 */} p::first-letter { /* 选择 p 元素的第一个字符 */ font-size: 200%; color: red; } p::before { content: "前缀"; /* 在 p 元素前插入内容 */ } p::after { /* 在 p 元素后插入内容 */ content: "后缀"; } 盒模型 用display属性来控制盒子的显示类型。 ...