2. selector

CSS3 的选择器 是在 CSS2 选择器的基础上新增了一些
选择器的类型没有改变 还是 CSS2 中的那几类
    不同类型的选择器之间 权重值可能会有所不同
    也就是说 即便 CSS3 新增了一些选择器 但是权重的计算依旧不变 还是 CSS2 的那套规则
使用方面:
    下面要介绍的很多选择器 在实际开发中 几乎都很少用到
    所以 先做到理解即可 后续 如果有哪几个用得上 再重点记忆吧

2.1 selector1

Relationship Selectors

Relationship Selectors 关系选择器

1. selector1 > selector2

selector1 > selector2 是直接子元素选择器 与 后代选择器 selector1 selector2 不同
    直接子元素选择器选中的是直接子代 (只能选中 selector1 的儿子 无法选中孙子...)
    后代选择器 选中的不仅仅是儿子 只要是 selector1 里面的都能选中

div>span {
    color: #008c8c;
}

<div>
    <span>dahuyou2</span>
    <p>
        <span>dahuyou1</span>
    </p>
</div>

1. selector1 + selector2

selector1 + selector2 选中的是下一个满足条件的兄弟节点

div+p {
    color: #008c8c;
}

<div>dahuyou1</div>
<p>dahuyou2</p>
<p>dahuyou3</p>
<p>dahuyou4</p>

介绍一种该选择器的应用场景
现在有一个需求, 要让下面相邻的两个 span 之间间隔 10px

.item {
    float: left;
    width: 100px;
    height: 100px;
    line-height: 100px;
    text-align: center;
    font-size: 2em;
    border: 1px solid #ddd;
}

<div>
    <span class="item">1</span>
    <span class="item">2</span>
    <span class="item">3</span>
    <span class="item">4</span>
</div>

.item+.item { /* 选中的是 2 3 4 */
    margin-left: 10px;
}

1. selector1 ~ selector2

选中的 selector1 后面所有的 selector2
selector2 与 selector1 成并列(兄弟)关系

span~p {
    color: #008c8c;
}

<div>
    <span>dahuyou4</span>
    <p>dahuyou1</p>
    <ul>
        <li>
            <p>dahuyou2</p>
        </li>
    </ul>
    <p>dahuyou3</p>
</div>

上面介绍的应用场景 我们使用 .item~.item 也可以实现选中 2 3 4

Attribute Selectors

Attribute Selectors 属性选择器

1. div[class]
   选中带有 class 属性的 div
2. div[class='active']
   选中带有 class 属性 并且 属性值为 active 的 div
3. div[class~='c4']
   选中带有 class 属性 并且属性值中包含独立 c4 的 div
   PS: 这里说的独立是啥意思?
      举个例子
         1. <div class="c4 active"></div>
         2. <div class="fl c4 active"></div>
         3. <div class="c4a active"></div>
      1 和 2 表示的都是 class 属性中包含独立的 c4
4. div[class|='a']
   选中带有 class 属性 并且仅有一个属性值 且该属性值是以 a 或 a- 开头的 div
      举个例子
         1. <div class="a active"></div>
         2. <div class="a"></div>
         3. <div class="a-active"></div>
      选中的是 2 和 3
5. div[class^='a']
   选中带有 class 属性 并且属性值是以 a 开头的 div
      举个例子
         1. <div class="a active"></div>
         2. <div class="b"></div>
         3. <div class="a-active"></div>
      选中的是 1 和 3
6. div[class$='a']
   选中带有 class 属性 并且属性值是以 a 结尾的 div
      举个例子
         1. <div class="a active"></div>
         2. <div class="b a"></div>
         3. <div class="a-active"></div>
      选中的是 2
7. div[class*='a']
   选中带有 class 属性 并且属性值包含 a 的 div
      举个例子
         1. <div class="active"></div>
         2. <div class="b a"></div>
         3. <div class="a-active"></div>
      全都能选中

Pseudo-Element Selectors

Pseudo-Element Selectors 伪元素选择器
   在 CSS2 中学习的两个伪类选择器 before 和 after
   这俩伪类选择器 我们写 一个冒号 或 两个冒号 都好使
   但是下面要介绍的 placeholder 和 selection 两个伪类选择器 必须得写 两个冒号 写一个不好使
1. input::palceholder
   就一个功能 改变 input 文本输入框 的 placeholder 中的文本字体颜色
2. selector::selection
   它的功能就是改变被选中的文本的样式
   仅能设置 3 个属性
      color
      background-color
      text-shadow

1. input::palceholder

input::placeholder {
    color: #008c8c;
}

<input type="text" placeholder="dahuyou">

1. selector::selection

div:nth-of-type(1)::selection {
    color: #999;
    background-color: #008c8c;
}

div:nth-of-type(2)::selection {
    color: #f40;
    background-color: #999;
}

<div>dahuyou1</div>
<div>dahuyou2</div>
<div>dahuyou3</div>

2.2 selector2

Pseudo-Classes Selectors

伪类选择器
注意: 伪类选择器修饰的是被选中的元素

• E:not 或 E:nots :root E:target

1. E:not 或 E:nots

/* 选中页面中所有的 div 不包括 .test */
div:not(.test) {
    color: #008c8c;
}

<div class="demo">dahuyou1</div>
<div class="demo">dahuyou2</div>
<div class="test">dahuyou3</div>

介绍一个应用场景

* {
    padding: 0;
    margin: 0;
}

ul {
    list-style: none;
    width: 300px;
    margin: 10px auto;
    border: 1px solid #ddd;
}

li {
    height: 50px;
    padding: 0 10px;
    border-bottom: 1px solid #008c8c;
}

<ul>
    <li>item01</li>
    <li>item02</li>
    <li>item03</li>
    <li>item04</li>
    <li>item05</li>
</ul>

想让 除了 最后一个 li 之外的其他 li 都有 border-bottom

li {
    height: 50px;
    padding: 0 10px;
    /* border-bottom: 1px solid #008c8c; */
}

li:not(:last-of-type) {
    border-bottom: 1px solid #008c8c;
}

/* 用 2.1 中介绍的 selector1 + selector2 选择器也可以办到 */
li {
    height: 50px;
    padding: 0 10px;
    /* border-bottom: 1px solid #008c8c; */
}

li+li {
    border-top: 1px solid #008c8c;
}

1. :root

:root 表示的就是 根标签 的意思
   在 HTML语言环境 中 根标签 就是 <html></html>
   所以在 HTML 中
   :root 等价于 html
   但是在其他的语言环境中 根标签 就不再是 <html></html> 了

1. E:target

E:target 表示的是被标记为 target 状态的元素

   如何判断一个元素被标记为 target 状态?
   location.hash = xxx
   xxx 表示被标记为 target 状态的元素的 id 值
   可以直接看 浏览器的 地址栏

通过 :target 我们就可以利用 CSS 来实现 操作一个 html 元素 从而改变另外一个结构上与之不相关的 html 元素

:target { /* div:target 写成这样也 ok */
    color: #008c8c;
}

<!-- 点击 box1 dahuyou1 变色
点击 box2 dahuyou2 变色 -->
<p>
    <a href="#box1">box1</a>
    <a href="#box2">box2</a>
</p>
<div id="box1">dahuyou1</div>
<div id="box2">dahuyou2</div>

../codes/1. 一键背景切换

• E:first-child E:last-child E:only-child E:nth-child(n) E:nth-last-child(n) E:first-of-type E:last-of-type E:only-of-type E:nth-of-type(n) E:nth-of-last-type(n)

前面提到过: 伪类选择器修饰的是被选中的元素
  比如:
    div:first-child
    此时被选中的元素是 div
    选中的是 div 并且 要求该 div 是第一个 子元素
    不要误以为选中的是 div 下面的第一个子元素
1. div:first-child
   举个例子
      <body>
         <div>1</div> <!-- 第一个 div -->
         <div> <!-- 第二个 div -->
            <div>2</div> <!-- 第三个 div -->
            <p>3</p>
         </div>
      </body>
   选中的是 1 和 2
   注解:
      首先 被选中的元素是 div
      第一个 div 是 body 下的第一个子元素 所以它满足条件 被选中
      第三个 div 是 第二个 div 下的第一个子元素 所以它也满足条件 也被选中
2. div:last-child
   选中的是 div 并且要求该 div 是最后一个子元素 (规则同上)
3. div:only-child
   选中的是 div 并且要求该 div 是唯一的子元素 (规则同上)
4. p:nth-child(n)
   选中的是 p 并且要求该 p 是第 n 个子元素
      eg1: 选中的是第 3 个子元素 并且该元素是 p 元素
         p:nth-child(3) {
             color: #008c8c;
         }

         <div>
             <p>1</p>
             <p>2</p>
             <p>3</p>
             <p>4</p>
             <p>5</p>
         </div>
      选中的是 3

      若把结构修改为下面这样, 那么啥都选不中
         <div>
             <p>1</p>
             <p>2</p>
             <div>div</div>
             <p>3</p>
             <p>4</p>
             <p>5</p>
         </div>

    eg2: 参数可以写变量
         p:nth-child(2n) { /* 2n 表示选偶数 等价于 even */
             color: #008c8c;
         }

         <div>
             <p>1</p>
             <p>2</p>
             <p>3</p>
             <p>4</p>
             <p>5</p>
         </div>
      选中的是 2 和 4
         p:nth-child(2n+1) { /* 2n + 1 表示选奇数 等价于 odd */
             color: #008c8c;
         }
      选中的是 1 和 3 和 5
      其中参数 n 会从 0 开始计数

    eg3: 与 p 同级的兄弟元素 也会参与计数 即便该兄弟元素不是 p 元素
         p:nth-child(2n) {
             color: #008c8c;
         }

         <div>
             <p>1</p>
             <p>2</p>
             <div>div</div>
             <p>3</p>
             <p>4</p>
             <p>5</p>
         </div>
       选中的是 2 和 3 和 5
5. p:nth-last-child(n)
   4 是从前往后查 5 是从后往前查 其余规则同 4

PS: 上面介绍的这 5 个 为一组 它们不常用 相对而言 更加常用的是后续介绍的 5 个
    两组及其类似 不同点在于 第一组的 5 个选择器 会考虑其他类型元素对其的影响
    第二组的 5 个选择器 仅考虑被选中的那一类的元素

E:nth-child() VS E:nth-of-type(n)

div:nth-of-type(2) { /* 选中的是 div 元素 并且要求该 div 元素是所有同级 div 元素中的第二个 div */
    color: #008c8c;
}

p:nth-child(2) { /* 选中的是 p 元素 并且要求该 p 元素是第二个子元素 (选中的实际上是 p1 而非 p2) */
    color: #008c8c;
}

<div>
    <div>div1</div>
    <p>p1</p>
    <div>div2</div>
    <p>p2</p>
</div>

小结:
   第一组 E:first-child E:last-child E:only-child E:nth-child(n) E:nth-last-child(n)
      限制条件更强 一般不会用到
   第二组 E:first-of-type E:last-of-type E:only-of-type E:nth-of-type(n) E:nth-of-last-type(n)
      限制条件相对较弱 更加常用

• E:empty E:checked E:enabled E:disabled E:read-only E:read-write

E:empty

div:empty
  选中 div 并且要求该 div 没有内容

PS: 注释 在 HTML 中不算作内容
    空格 在 HTML 中算作内容

div:empty{
    width: 100px;
    height: 100px;
    background-color: #999;
}

<div>1</div>
<div> </div>
<div>2</div>
<div><!-- dahuyou --></div>

E:checked

input:checked {
    width: 50px;
    height: 50px;
}

<label for="suprise">
    一个小惊喜
    <input id="suprise" type="checkbox">
</label>

../codes/2. 一个小惊喜

E:enabled E:disabled E:read-only E:read-write

它们修饰的也都是 input 标签
  E:enabled
    修饰 可以使用的 input 标签
  E:disabled
    修饰 无法使用的 input 标签
  E:read-only
    修饰 只读的 input 标签
  E:read-write
    修饰 可读可写的 input 标签

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>修饰input</title>
    <style>
        /* 给所有可以正常使用的文本输入框添加边框 */
        input:enabled {
            border: 1px solid #008c8c;
        }

        /* 给所有不能正常使用的文本输入框设置字体颜色 */
        input:disabled {
            color: #f40;
        }

        /* 给只读的文本输入框添加背景 */
        input:read-only {
            background-color: #999;
        }

        /* 让可读可写的文本输入框中的字体加粗显示 */
        input:read-write {
            font-weight: bold;
        }
    </style>
</head>

<body>
    <input value="dahuyou" type="text" enabled><!-- 默认就是 enabled 不写是这个值 -->
    <input value="dahuyou" type="text" disabled>
    <input value="dahuyou" type="text" readonly><!-- 注意 readonly 的写法 不需要加中间的 - 横杆 -->
    <input value="dahuyou" type="text"><!-- 没有对应的属性 不用写即可 默认就是 可以读写的 -->
</body>

</html>

作业

../codes/3. Accordion List

../codes/4. Tabs