优美编程Web前端之路

回味CSS选择器

2020-03-13  本文已影响0人  小遁哥

发现很多选择器已经忘了叫啥了，借此看一下MDN的文档，本文只是抛砖引玉，记录下阅读过程中的一些新知识，或是当作以后查阅的手册。文档地址

1. 通配选择器

一个星号()就是一个通配选择器.它可以匹配任意类型的HTML元素.在配合其他简单选择器的时候,省略掉通配选择器会有同样的效果.比如,.warning 和.warning 的效果完全相同

类型选择器

通过node节点名称匹配元素. 因此,在单独使用时,寻找特定类型的元素时,元素选择器都会匹配该文档中所有此类型的元素.

类选择器 （.classname）

会根据元素的类属性中的内容匹配元素。类属性被定义为一个以空格分隔的列表项，在这组类名中，必须有一项与类选择器中的类名完全匹配，此条样式声明才会生效

ID 选择器 （#idname）

会根据该元素的 ID 属性中的内容匹配元素,元素 ID 属性名必须与选择器中的 ID 属性名完全匹配，此条样式声明才会生效。

属性选择器

<p class="a b c">
  123
</p>

<p class="abc">
  123
</p>

选择器列表

常被称为并集选择器或并集组合器，选择所有能被列表中的任意一个选择器选中的节点。

span, div {
  border: red 2px solid;
}

后代选择器

当使用一个或多个的空白字符连接两个元素时使得该选择器可以只匹配那些由第一个元素作为祖先元素的所有第二个元素(后代元素)

div span { background-color: DodgerBlue; }

子选择器

当使用 > 选择符分隔两个元素时,它只会匹配那些作为第一个元素的直接后代(子元素)的第二元素

div > span {
  background-color: DodgerBlue;
}

通用兄弟选择器

兄弟选择符，位置无须紧邻，只须同层级，A~B 选择A元素之后所有同层级B元素。

p ~ span {
  color: red;
}

相邻兄弟选择器

当第二个元素紧跟在第一个元素之后，并且两个元素都是属于同一个父元素的子元素，则第二个元素将被选中。

img + p {
  font-style: bold;
}

伪类选择器

CSS 伪类 是添加到选择器的关键字，指定要选择的元素的特殊状态
出了很多新的伪类选择器哦，感受一下。

:active

被用户激活的元素。它让页面能在浏览器监测到激活时给出反馈。当用鼠标交互时，它代表的是用户按下按键和松开按键之间的时间。
这个样式可能会被后声明的其他链接相关的伪类覆盖，这些伪类包括 :link，:hover和 :visited。为了正常加上样式，需要把 :active 的样式放在所有链接相关的样式后，这种链接伪类先后顺序被称为LVHA顺序: :link — :visited — :hover — :active。

:last-of-type

表示了在（它父元素的）子元素列表中，最后一个给定类型的元素

HTML

  <div id="test-vue-id">
    <div class="asd">12</div>
    <span>123</span>
  </div>

CSS

#test-vue-id {
  .asd:last-of-type {
    color: red;
  }
}

:link

:link伪类选择器是用来选中元素当中的链接。它将会选中所有尚未访问的链接，包括那些已经给定了其他伪类选择器的链接（例如:hover选择器，:active选择器，:visited选择器）。为了可以正确地渲染链接元素的样式，:link伪类选择器应当放在其他伪类选择器的前面，并且遵循LVHA的先后顺序，即：:link — :visited — :hover — :active

:checked

表示任何处于选中状态的radio, checkbox 或select元素中的option

:default

该选择器可以在 button、checkbox、radio, 以及option
可以标注初始值，易用使用，省去了一些代码逻辑

HTML

    <select name="" id="test-select">
      <option value="123">123</option>
      <option value="12">12</option>
      <option selected value="1">1</option>
    </select>

CSS

  :checked {
    color: red;
  }
  :default {
    color: orange;
  }

:not()

用来匹配不符合一组选择器的元素

:nth-child(an+b)

an 必须写在 b 的前面,首先找到所有当前元素的 兄弟元素，然后按照位置先后顺序从1开始排序

:nth-last-child，从兄弟节点中从后往前匹配处于某些位置的元素
:nth-of-type， 这里的顺序只包括同类元素

HTML

  <div id="test-vue-id">
    <div class="asd">asd</div>
    <span>123</span>
    <div class="asd">asd</div>
    <div class="asd">asd</div>
    <span>123</span>
  </div>


.asd:nth-of-type(2n) {
    color: red;
  }

有无span效果都一样

:disabled

表示任何被禁用的元素，被禁用表单项的值在发送ajax请求是不会被携带。

:enabled 表示任何被启用的（enabled）元素

:only-child

匹配没有任何兄弟元素的元素.等效的选择器还可以写成:first-child:last-child或者:nth-child(1):nth-last-child(1)，当然,前者的权重会低一点

HTML

  <div id="test-vue-id">
    <div class="asd">asd</div>
  </div>

CSS

  .asd:only-child {
    color: red;
  }

:only-of-type

代表了任意一个元素，这个元素没有其他相同类型的兄弟元素。

HTML

  <div id="test-vue-id">
    <div class="asd">12</div>
    <!-- <div class="asd">12</div> -->
    <span>123</span>
    <!-- <div>123</div> -->
  </div>

CSS

 .asd:only-of-type {
    color: red;
  }

去掉任意一个HTML的注释都会失效

:first-child

HTML

  <div id="test-vue-id">
    <div class="asd">asd</div>
    <div class="asd">asd</div>
  </div>

:first-of-type 表示一组兄弟元素中其类型的第一个元素,并不一定是第一个元素

CSS

  .asd:first-child {
    color: red;
  }

:optional

表示任意没有required属性的 <input>，<select> 或 <textarea> 元素使用它。

:out-of-range

表示一个 <input> 元素，其当前值处于属性 min 和 max 限定的范围外。
in-range CSS 伪类 代表一个 <input> 元素，其当前值处于属性min 和max 限定的范围之内.

:focus

表示获得焦点的元素（如表单输入）

:read-only

表示元素不可被用户编辑的状态（如锁定的文本输入框）。
:read-write 代表一个元素（例如可输入文本的 input元素）可以被用户编辑。

:focus-within

换句话说，元素自身或者它的某个后代匹配 :focus 伪类

HTML

  <div id="test-vue-id">
    <input type="text" />
  </div>

CSS

#test-vue-id:focus-within {
  background: orange;
  border: 1px solid #000;
}
image.png

:required

它允许表单在提交之前容易的展示必填字段并且渲染其外观.

:root

对于 HTML 来说，:root 表示 <html> 元素，除了优先级更高之外，与 html 选择器相同。
在声明全局 CSS 变量时 :root 会很有用：

:target

匹配页面上的锚点

<h3>Table of Contents</h3>
<ol>
 <li><a href="#p1">Jump to the first paragraph!</a></li>
 <li><a href="#p2">Jump to the second paragraph!</a></li>
 <li><a href="#nowhere">This link goes nowhere,
   because the target doesn't exist.</a></li>
</ol>

<h3>My Fun Article</h3>
<p id="p1">You can target <i>this paragraph</i> using a
  URL fragment. Click on the link above to try out!</p>
<p id="p2">This is <i>another paragraph</i>, also accessible
  from the links above. Isn't that delightful?</p>

:hover

CSS伪类适用于用户使用指示设备虚指一个元素（没有激活它）的情况。这个样式会被任何与链接相关的伪类重写，像:link, :visited, 和 :active等。为了确保生效，:hover规则需要放在:link和:visited规则之后，但是在:active规则之前，按照LVHA的循顺序声明:link－:visited－:hover－:active。

:valid

这能简单地将校验字段展示为一种能让用户辨别出其输入数据的正确性的样式。
:invalid 表示任意内容未通过验证的 <input> 或其他 <form> 元素 .

:visited

表示用户已访问过的链接。出于隐私原因，可以使用此选择器修改的样式非常有限。
这个样式可能会被后声明的其他链接相关的伪类覆盖，这些伪类包括 (:link, :hover,和:active)。要适当地设置链接样式，请将:visited 规则放在:link 规则之后，但在:hover 和:active 规则之前，参照 LVHA 顺序::link — :visited — :hover — :active。

:last-child

代表父元素的最后一个子元素。

打印相关

:first：打印文档的时候，第一页的样式。

你不能改变所有的css属性. 你只能改变 margins、 orphans、 widows、文档什么时候换页。别的所有css样式都会被忽略。

@page :first {
  margin-left: 50%;
  margin-top: 50%;
}

p {
  page-break-after: always;
}

伪元素

允许你对被选择元素的特定部分修改样式

::after

用来创建一个伪元素，作为已选中元素的最后一个子元素。通常会配合content属性来为该元素添加装饰内容。这个虚拟元素默认是行内元素。

::before

创建一个伪元素，其将成为匹配选中的元素的第一个子元素。常通过 content 属性来为一个元素添加修饰性的内容。此元素默认为行内元素。

::selection

CSS伪元素应用于文档中被用户高亮的部分（比如使用鼠标或其他选择设备选中的部分）。
只适用部分属性:

::first-letter

选中某 block-level element（块级元素）第一行的第一个字母，并且文字所处的行之前没有其他内容（如图片和内联的表格）
::before 伪元素 和 content 属性结合起来有可能会在元素前面注入一些文本。如此，::first-letter 将会匹配到content文本的首字母。
只在display属性值为block, inline-block, table-cell, list-item 或者 table-caption的元素上才起作用. 其他情况下, ::first-letter 毫无意义.
并不是所有属性都有效，原文地址

::first-line 第一行应用样式。第一行的长度取决于很多因素，包括元素宽度，文档宽度和文本的文字大小。

完

上一篇 下一篇

猜你喜欢

热点阅读