选择器的优先级（决定那个样式生效）：
important； > 内联样式 > id选择器> 类和伪类 > 元素选择器 > 通配选择器> 继承样式无优先级
最大 > 1000 > 100 > 10 > 1 > 0 > 无
（内联样式，也叫 行内样式）
在 CSS 里面定义自增函数 counter-increment
-
#list li { background-color: red; counter-increment: num; // 定义自增函数 } // 相当于 // function counter(){ var num; num++; } #list li:nth-child(10n)::before { content: counter(num); // 调用自增函数 position: absolute; top: 30px; left: 0px; }
id选择器：
-
#nav { background-color: yellow; }
类选择器：
-
.article { background-color: skyblue; }
属性选择器：
-
// 含 title 属性的元素 p[title] { background-color: red; } // title="photos" 的元素 p[title = "photos"] { background-color: red; } // title 的属性值以 "pho" 开头的元素 p[title ^= "pho"] { background-color: red; } // title 的属性值以 "s" 结尾的元素 p[title $= "s"] { background-color: red; } // title 的属性值含有 "pho" 的元素 p[title *= "pho"] { background-color: red; } // title 的属性值含有 "photos" 单词的元素 p[title ~= "photos"] { background-color: red; }
伪类选择器：
-
// 最佳顺序
:link { color: blue; } :visited { color: pink; } :hover { color: yellow; } :active { color: red; } -
:focus { background-color: #bfc; }
- 不使用 js 实现轮播图
-
bottom:target { /* 操作<a href="#bottom"> 超链接 点击 a元素，跳转到目标元素 */ /* 给目标元素加样式 */ border: 1px solid red; }
-
- 文不能内容选中样式
-
::selection { color:yellow; background-color: black; }
-
子元素的伪类选择器（CSS3 结构类）：
-
选中没有任何子节点的元素
-
// <div id="test_box"></div> #test_box:empty { background-color: skyblue; }
-
-
根据索引
-
p:first-child { background-color: blue; } // 第一个子元素 p:last-child { background-color: blue; } // 最后一个子元素 p:only-child { background-color:red; } // 唯一子元素 // 第一个元素的索引为 1 p:nth-child(1) { background-color: blue; } // 最后一个元素开始计算，索引为 1 的元素 p:nth-last-child(1) { background-color: red; } // 实质上是从 0 开始计算，但是并没有第 0 个子元素 // 之所以从 0 开始，是为了 使用表达式选择元素 p:nth-child(2n){ background-color: blue; } // 偶数索引的元素 p:nth-child(2n+1){ background-color: blue; } // 奇数索引的元素 p:nth-child(3n+1){ background-color: blue; } // 索引 1 4 7...的元素 // 偶数索引的元素 p:nth-child(even) { background-color: blue; } // 奇数索引的元素 p:nth-child(odd) { background-color: blue; }
-
- 根据类型
-
// 1. 先找到 修饰元素 的类型 此处为 li // 2. 再找到所有此类型的同类同辈元素，根据表达式计算索引，选中元素 // 3. n 从 0 开始，从顺数第一个特定类型的元素开始 // 顺数，子元素为 li 的 偶数索引的 子元素 li:nth-of-type(2n){ background-color: blue; } li:first-of-type(){ background-color: blue; } // 第一个 li li:last-of-type(){ background-color: blue; } // 最后一个 li li:only-of-type(){ background-color: blue; } // 唯一子元素 li // 1. 先找到 修饰元素 的类型 此处为 li // 2. 再找到所有此类型的同类同辈元素，根据表达式计算索引，选中元素 // 3. n 从 0 开始，从倒数第一个特定类型的元素开始 // 倒数，子元素为 li 的 奇数索引的 子元素 li:nth-last-of-type(2n+1){ background-color: blue; }
-
元素的伪类选择器（严格语法要求 ::） :
-
p::first-letter { background-color: red; } p::first-line { background-color: blue; } p::before { content: "段前的内容" /* 段前行内伪元素 相当于 <p><span>段前的内容</span> 哈哈哈哈哈哈</p> */ } p::after { content: "段后的内容" /* 段后行内伪元素 相当于 <p>哈哈哈哈哈哈<span>段后的内容</span></p> */ }
// 伪元素 与 元素：
// 1. 无法通过 js 获取其 DOM对象
// 2. 无法通过浏览器直接查看伪元素
// 3. 无法被鼠标选中（unable to select）
// 4. 伪元素的默认类型是 inline
// 伪元素 与 伪类：
// 1. 有两个冒号的 :: 一定是伪元素
// 2. 伪类修饰元素的状态，而伪元素是一个特殊的元素（假行内元素，默认类型是 inline）
// 使用伪元素注意事项：
// 1. ::before 和 ::after 必须设置 content，否则不生效
// 2. ::before 和 ::after 显示背景图，必须 display 设置为块元素
// 3. ::before 和 ::after 设置为 display: inline-block; 时，必须额外设置 vertcal-align: middle;
否定伪类选择器：
-
p:not(.white_boy) { background-color: blue; } ul :not(span){ background-color: red; }
元素选择器：
-
div {}
统配选择器：
-
* {} div > * {}
后代元素选择器：
-
div span{}
子元素选择器：
-
div>span {}
紧接着的兄弟元素选择器：
-
span + p {}
后所有的兄弟元素选择器：
-
span ~ p {}