css3更多选择器

亮哥666
175 阅读4分钟

css两个网站

  1. css.doyoe.com
  2. caniuse.com/
  3. developer.mozilla.org/zh-CN

下面的网站更权威一些，更新速度更新。

更多的选择器

css 提供的选择器是在代码写的很乱的时候使用，开发规范的情况下用的很少。

关系选择器

  1. E+F 首先是E选择器选中的兄弟元素，然后还需要满足F选择器选中的条件，然后是满足上述两个条件中第一个。

image.png 2. E~F 首先是E选择器选中的兄弟元素，然后还需要满足F选择器选中的条件，然后是满足上述两个条件中后面所有节点。和上面的区别就是上面是选择一个兄弟，这个是选择一大堆兄弟。

属性选择器

  1. 存在 title 属性的 <a> 元素
a[title] {
color: purple;
}

2.存在 href 属性并且属性值匹配"example.org"的 <a> 元素

a[href="https://example.org"]
{
  color: green;
}
  1. 存在 href 属性并且属性值包含"example"的 <a> 元素
a[href*="example"] {
  font-size: 2em;
}
  1. 存在 href 属性并且属性值结尾是".org"的 <a> 元素
a[href$=".org"] {
  font-style: italic;
}
  1. 存在 class 属性并且属性值包含单词"logo"的<a>元素
a[class~="logo"] {
  padding: 2px;
}

伪元素选择器

  1. E::placeholder
    主要作用是如下：
设置对象文字占位符的样式。
::placeholder 伪元素用于控制表单输入框占位符的外观，它允许开发者/设计师改变文字占位符的样式，默认的文字占位符为浅灰色。
当表单背景色为类似的颜色时它可能效果并不是很明显，那么就可以使用这个伪元素来改变文字占位符的颜色。
  1. E::selection
    选择 你鼠标选中的文字的样式，(只支持三个属性：color  background-color  text-shadow)

伪类选择器

** 伪类元素一定是要先选中E元素，再做其他限定。比方说一个ul里面有li，这里必须先选中到li，再用后面的条件做限定。**

  1. E:not(s) 用来匹配不符合一组选择器的元素。由于它的作用是防止特定的元素被选中，它也被称为反选伪类（negation pseudo-class）。 developer.mozilla.org/zh-CN/docs/…

  2. E:root 对于 HTML 来说， :root 表示 [<html>]

  3. E:target
    :target CSS 伪类表示一个唯一的元素（目标元素），其 id 与当前 URL 片段匹配。 举例如下：

   <h3>目录</h3>
<ol>
  <li><a href="#p1">跳转到第一个段落！</a></li>
  <li><a href="#p2">跳转到第二个段落！</a></li>
  <li><a href="#nowhere">此链接不会跳转，因为目标不存在。</a></li>
</ol>

<h3>我的趣味文章</h3>
<p id="p1">你可以使用 URL 片段定位此<i>段落</i>。点击上面的链接试试吧！</p>
<p id="p2">这是<i>另一个段落</i>，也可以从上面的链接访问。这不是很愉快吗？</p>
  1. E:first-child 表示在一组兄弟元素中的第一个元素，
  2. E:last-child 表示在一组兄弟元素中的最后一个元素，
  3. E:only-child(n) 表示没有任何兄弟元素的元素，就是他是独苗的，设置样式
  4. E:only-of-type 为没有同类型兄弟元素的元素设置样式，可以理解为像这种类型的元素，他是独一个。
  5. E:nth-of-type(n) E先确定要那种类型，基于相同类型（标签名称）的兄弟元素中的位置来匹配元素。 n是自然数从0开始，但是元素的index是从1开始，没有第0个元素的。
  6. E:nth-of-last-type(n) 首先是E类型的元素，然后在相同类型（标签名）的兄弟元素中相对最后一个元素的位置来匹配元素。n =1，代表E这种类型的倒数第一个。
  7. E:empty E这种类型的元素，并且E这种类型是空的。空代表的是里面不能有任何元素，文本，空格， 不包含任何子元素的元素。子元素可以是元素节点或文本（包括空格）。但是注释不算有内容。
  8. E:checked 
匹配任意被勾选/选中的 radio(单选按钮),checkbox(复选框),或者 option(select 中的一项) 
:checked {
  margin-left: 25px;
  border: 1px solid blue;
}

12. E:disabled 当元素的节点写了disabled的时候并且是E这种类型的元素的时候才选中。

13. E:enabled   当E类型的元素没有设置disable的状态就是enable的状态。 14. E:read-only 当E元素，不可被用户编辑的状态（如锁定的文本输入框）。 典型例子就是input标签，举例子

<input type="text" value="Type whatever you want here." />
<input type="text" value="This is a read-only field." readonly />
  1. E:read-write 代表一个元素（例如可输入文本的 input 元素）可以被用户编辑
 <input type="text" value="Type whatever you want here." />
<input type="text" value="This is a read-only field." readonly />
<p>This is a normal paragraph.</p>
<p contenteditable="true">You can edit this paragraph!</p>

上面这些选择器主要用在代码写的稀烂的时候会用到，总体使用的概率不高。

avatar
文章
阅读
粉丝