(18)0907_CSS选择器详解

选择器的优先级（决定那个样式生效）：

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 {} 
```

posted @ 2018-09-07 15:50 耶梦加德阅读(148) 评论(0) 编辑收藏举报

刷新页面返回顶部

我即狂澜，且力不可挽

(18)0907_CSS选择器详解

公告