CSS3 选择器拾遗

2019-03-22 本文已影响0人 Veycn

E + F 选择器: 选中E紧跟着下一个满足条件F的兄弟元素节点

    <div>div</div>
    <p class="demo">123</p>
    <p>456</p>
    div + p {
            background-color: red;
        }
     div + .demo {
            background-color: red;
        }

image.png

E ~ F选择器: E 同一级后面所有的满足条件F的元素节点

    <div>div</div>
    <p class="demo">123</p>
    <p>456</p>
       div ~ p {
            background-color: red;
        }

image.png

::placeholder: 针对 input 框的 placeholder, 能用来改变字体颜色.
::selection: 定义鼠标选中文本的样式能设置三个属性color, background-color, text-shadow
E:first-child: 被选择元素E是某个标签下的第一个子元素

    <div>
        <p>1</p>
        <p>2</p>
        <p>3</p>
    </div>
   div:first-child{
      background-color: red;
   }

想选择第一个 p 标签, 这是一个错误的示范:

image.png
结果是整个div变成了红色
这是因为伪类选择器针对的是被选择元素的某种状态, 这里div是被选择元素
所以正确的姿势是:

 p:first-child{
     background-color: red;
 }

image.png
正确理解: 被选择元素 E 是某个标签下的第一个子元素

E是被选择元素(选中的一定是p)
是某个标签下的 (可能是body下的, 还可能是div下的, 很多p都能满足要求)
第一个子元素(p位列第二就不能被选中)

    <p>0</p>
    <div>
        <p>1</p>
        <p>2</p>
        <p>3</p>
    </div>
     p:first-child{
         background-color: red;
     }

结果是:

image.png
E:last-child 也是一样, 这里就不再赘述.

E:only-child: 被选中元素E是某个元素下的唯一一个元素

E:nth-child(n): 被选中元素E是某个元素下的第n个元素, n从0开始, 那么可以是(2n), (2n+1), (3n) ... 不能加空格(2n + 1), 这样会失效. 或者(odd), (even)
css查数从1开始, 但是前面的n是自然数, 从0开始

E:first-of-type: 被选中元素E是某个元素下的类型为E的第一个元素节点

   <div class="wrapper">
        <p>1</p>
        <p>2</p>
        <p>3</p>
        <p>4</p>
        <p>5</p>
    </div>

 p:first-of-type{
    background-color: red;
 }

image.png

E:only-of-type: 被选中元素E是某个元素下唯一的类型为E的元素节点, 即多于1个E就不好使
E:nth-of-type(n): ... 不多解释了
有意思的是： p:nth-of-type(n+3), 第三个p之后的元素被选中。
E:nth-of-last-type
E:empty: E只能为空元素（里面不能有其他节点），有空格不行，但是里面html注释是可以的。
E:checked: 被选中的元素（一般是checkbox， redio）
E:disabled：被禁用的元素 E，例如一个被禁用的input框
E:enabled: 可以使用的元素 E, 例如一个未被禁用的input框
E:read-only: 只允许读的元素 <input type="text" readonly/> 注意单词之间没有中划线
E:read-write: 好像没什么用。。。

CSS3 选择器拾遗

猜你喜欢

热点阅读