CSS选择器个人整理带示例20200626

Posted mixiubaba

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了CSS选择器个人整理带示例20200626相关的知识,希望对你有一定的参考价值。

百度

技术图片

CSS的选择器

1. 基本选择器

  1. ID、类、标签选择器
 <head>
     <meta http-equiv="content-Type" charset="UTF-8">
     <meta http-equiv="x-ua-compatible" content="IE=edge">
     <title>CSS基础选择器</title>
     <style>
         p {
             /*所有的p标签都变红*/
             color: red;
         }
         #d1 {
             /*选择至id为d1的标签*/
             color: green;
         }
         .c1 {
             /*选择至class为c1的标签*/
             color: aqua;
         }
     </style>
 </head>
 <body>
     <div>
         <p>我是div中的p</p>
         <span>我是div中的span标签</span>
     </div>
     <p id="d1">我是第一个p</p>
     <p class="c1">我是第二个p</p>
     <span>我是body中的span标签</span>
     <p>我是第三个p</p>
 </body>

技术图片

  1. 通用选择器 *
* {
         color: red;
     }  

技术图片

  1. 基础选择器搭配
p.c1 {
         font-style: oblique;
         font-size: larger;
     }
<div>
     <p class="c1">我是div中的p</p>
     <span class="c1">我是div中的span标签</span>
     <div>
         <div>
             <p></p>
         </div>
     </div>
 </div>
 <p id="d1">我是第一个p</p>
 <p class="c1">我是第二个p</p>
 <span>我是body中的span标签</span>
 <p>我是第三个p</p>

技术图片

  1. 多类选择器
<style>
     .c1.c3 {
         font-style: oblique;
         font-size: larger;
         background-color: aqua;
     }
 </style>
 <div class="c1">我是一个div,我有c1</div>
 <div class="c2 c3">我是一个div,我有c2,c3</div>
 <div class="c3 c1">我是一个div,我有c3,c1</div>

技术图片

2. 组合选择器

  1. 后代选择器
    后代选择器可以选中该标签下的所有满足要求的标签,如下面例子中,类为c2的div中的所有p标签全部被选中
div.c2 p {
         font-style: oblique;
         font-size: larger;
         background-color: aqua;
     }
<div class="c2">
     <p class="c1">我是div中的p</p>
     <span class="c1">我是div中的span标签</span>
     <div>
         <div>
             <p>我是div下的div下的div下的p</p>
         </div>
     </div>
     <p>我是div中的p</p>
 </div>
 <p id="d1">我是第一个p</p>
 <p class="c1">我是第二个p</p>
 <span>我是body中的span标签</span>
 <p>我是第三个p</p>

技术图片

  1. 儿子选择器
    只选择下一级的标签。(下面例子中的body与后代选择器的一样)
div.c2>p {
         font-style: oblique;
         font-size: larger;
         background-color: aqua;
     }

技术图片

  1. 毗邻选择器
p+span {
         font-style: oblique;
         font-size: larger;
         background-color: aqua;
     }
 <div class="c2">
     <p class="c1">我是div中的p</p>
     <span class="c1">我是div中的span标签</span>
     <div>
         <div>
             <p>我是div下的div下的div下的p</p>
         </div>
     </div>
     <span>div中的span</span>
     <p>我是div中的p</p>
 </div>
 <p id="d1">我是第一个p</p>
 <p class="c1">我是第二个p</p>
 <span>我是body中的span标签</span>
 <p>我是第三个p</p>

技术图片

  1. 弟弟选择器
p.c1~span {
         font-style: oblique;
         font-size: larger;
         background-color: aqua;
     }
 <span>我是span</span>
 <div class="c2">
     <p class="c1">我是div中的p</p>
     <span class="c1">我是div中的span标签</span>
     <div>
         <div>
             <p>我是div下的div下的div下的p</p>
         </div>
     </div>
     <span>div中的span</span>
     <p>我是div中的p</p>
 </div>
 <p id="d1">我是第一个p</p>
 <p>我是第二个p</p>
 <span>我是body中的span标签</span>
 <p>我是第三个p</p>

技术图片

  1. 并列选择器
```
p.c1,span {
        font-style: oblique;
        font-size: larger;
        background-color: aqua;
    }
```
```
<div>
    <p class="c1">我是div中的p</p>
    <span class="c1">我是div中的span标签</span>
    <div>
        <div>
            <p></p>
        </div>
    </div>
</div>
<p id="d1">我是第一个p</p>
<p class="c1">我是第二个p</p>
<span>我是body中的span标签</span>
<p>我是第三个p</p>
```
![](https://pic.downk.cc/item/5ef5b92914195aa594b3d220.jpg)

3. 属性选择器

  1. 属性名选择器
h1[title] {
         font-style: oblique;
         font-size: larger;
         background-color: aqua;
     }
 <h1 title="">我有title</h1>
 <h2 title="">我有title</h2>
 <h3 title1="">我有title1</h3>
 <h3>我没有title</h3>

技术图片

  1. 属性值选择器

    1. 完全匹配
      <p title="abcd-efgh cdef">我有abcd-efgh cdef</p>
      <p title="abcd-efgh">我有abcd-efgh</p>
      <p title="abcd-hjkl">我有abcd-hjkl</p>
      <p title="cdef-hjkl">我有cdef-hjkl</p>
      <p title="cdef">我有cdef</p>
      <p>我没有title</p>
    

    完全匹配选择器必须完全匹配,缺少和多出来都不行

      <style>
      [title="abcd-efgh"] {
          color: red;
      }
      </style>
    

    技术图片

    1. 属性值包含匹配
      包含匹配只要有这个值就行
    [title~="abcd-efgh"] {
          color: red;
      }
    

    技术图片

    但是只能单值匹配,如果匹配两个值,即使两个都有,也不会选中

    [title~="abcd-efgh cdef"] {
          color: red;
      }
    

    技术图片

    1. 同类属性值匹配
    [title|="abcd"] {
          color: red;
      }
    

    技术图片

    1. 字符串开头匹配
    [title^="abc"] {
          color: red;
      }
    

    技术图片

    1. 字符串结尾匹配
    [title$="jkl"] {
          color: red;
      }
    

技术图片

  6. 包含字符串匹配   
  ```
  [title*="cd"] {
        color: red;
    }
  ```

技术图片

  1. 属性选择器对比
选择器|属性值
--|:--
[attribute]|仅匹配属性名,与属性值无关
[attribute="value"]|完全匹配属性名和属性值
[attribute~="value"]|属性值以空格分隔,包含 value 单词或者仅为 value
[attribute管道符="value"]|属性值以 value- 开头或者仅为 value
[attribute^="value"]|属性值以 value 字符串开头
[attribute$="value"]|属性值以 value 字符串结尾
[attribute*="value"]|属性值包含 value 字符串

4. 伪类选择器

状态伪类选择器会根据元素的特定状态选择相应的元素。

选择器 说明 例子
:link 选择所有未被访问的链接 a:link
:visited 选择所有已被访问的链接 a:visited
:focus 选择获取焦点的元素 input:focus
:hover 择鼠标指针位于其上的元素 li:hover
:active 选择激活的元素 button:active

:target,选择目标元素。当用户点击一个指向页面中其它元素的链接,则那个被指向的元素就是目标元素,例如:

    <a href="#more">more</a> <!-- 点击这个链接之后 -->
    <div id="more">...</div> <!-- 这个元素会被 :target 选中 -->

:enabled,选择所有已启用的元素。

    <input type="text"> <!-- 会被选中 -->
    <input disabled type="text"> <!-- 已禁用不会被选中 -->

:disabled,选择所有被禁用的元素,和 :enabled 相反,例如:

    input[type="text"]:disabled {
      background-color: #eee;
    }

上面一段程序会给禁用的文本输入框一个灰色的背景。

    <input type="text"> <!-- 不会被选中 -->
    <input disabled type="text"> <!-- 禁用的文本框会被选中 -->

:checked,选择所有已经被勾选的单选框或者复选框,例如 input:checked。

    <input checked type="radio"> <!-- 已经勾选的元素会被选中 -->
    <input type="checkbox"> <!-- 没有勾选的不会被选中 -->

示例,结合属性选择器选择被勾选的单选框:input[type="radio"]:checked
:lang(language),用于选择所有带有以指定值开头的 lang 属性的元素,例如 p:lang(en)。

<p lang="en">会被选中</p>
<p lang="en-US">会被选中</p>

该选择器等同于 [lang|="language"],是 [attribute|="value"] 选择器的一种特例。

5. 结构伪类选择器

:nth-child(n),选择同级元素中的第 n 个元素,例如 ul > li:nth-child(2)

<ul>
  <li>不会被选中</li>
  <li>第二个元素会被选中</li>
  <li>不会被选中</li>
</ul>

需要注意的是子元素的下标是从 1 开始的。除了可以指定特定的数字,也可以使用 even(偶数), odd(奇数) 关键字,例如 ul > li:nth-child(odd),或者使用公式,例如 ul > li:nth-child(2n+1)(n 是计数器,从 0 开始):

<ul>
  <li>第一个子元素会被选中</li>
  <li>第二个子元素不会被选中</li>
  <li>第三个子元素会被选中</li>
</ul>

:nth-last-child(n),同上,不过是从最后一个子元素开始计数,使用该选择器可以实现隔行变色的效果。

:first-child,选择同级元素中的第一个元素,例如 ul > li:first-child

<ul>
  <li>会被选中</li>
  <li>不会被选中</li>
  <li>不会被选中</li>
</ul>

作用等同于 ul > li:nth-child(1)

:last-child,选择同级元素中的最后一个元素,例如 ul > li:last-child

<ul>
  <li>不会被选中</li>
  <li>不会被选中</li>
  <li>会被选中</li>
</ul>

作用等同于 ul > li:nth-last-child(1)

:only-child,用于选择父元素下唯一的子元素,例如 ul > li:only-child

<ul>
  <li>唯一子元素,会被选中</li>
</ul>

<ul>
  <li>不会被选中</li>
  <li>不会被选中</li>
</ul>

:nth-of-type(n),选择同级元素中的第 n 个同类元素,和 :nth-child 类似,例如 .box > :nth-of-type(2):

<div class="box">
  <p>第一个 p 子元素,不会被选中</p>
  <span>第一个 span 子元素,不会被选中</span>
  <p>第二个 p 子元素,会被选中</p>
  <span>第二个 span 子元素,会被选中</span>
</div>

:nth-last-of-type,同上,不过是从最后一个同类子元素开始计数。

:first-of-type,选择同级元素中的第一个同类元素,等同于 :nth-of-type(1)

:last-of-type,选择同级元素中的最后一个同类元素,等同于 nth-last-of-type(1)

:only-of-type,用于选择父元素下特定类型的唯一子元素,例如 .box > :only-of-type:

<div class="box">
  <p>不会被选中</p>
  <em>唯一的 em 子元素会被选中</em>
  <p>不会被选中</p>
  <span>唯一的 span 子元素会被选中</span>
</div>

:root,选择文档的根元素,对于 html 文档就是 html 元素。

:empty,选择没有子元素的元素(包括文本节点),例如:

p:empty {
  display: none;
}

表示隐藏没有内容的 p 元素,

<p>非空不会被选中</p>
<p></p> <!-- 为空会被选中 -->

否定伪类选择器
:not(selector),选择所有不匹配选择器的元素,例如 :not(p),选择所有不为 p 的元素:

<p>不会被选中</p>
<span>会被选中</span>

要选择既不是 p 也不是 span 的元素可以多次使用否定伪类选择器,例如 :not(p):not(span),需要同时满足条件的元素才会被选中。

CSS 4 否定伪类选择器支持传入参数列表,比如 :not(p, span)

6. 伪元素

伪元素选择器用于选择那些若有实无的元素。在 CSS3 中,伪元素的写法为两个冒号,为了兼容旧浏览器,也可以使用一个冒号。

首字母伪元素选择器
::first-letter,选择元素的第一个字母,例如:

p::first-letter {
font-size: 300%;
}
段落元素的首字母放大。

first-letter

首行伪元素选择器
::first-line,选择元素的第一行,例如:

p::first-line {
text-decoration: underline;
}
段落元素的首行添加下划线。

first-line

::before/::after 伪元素选择器
::before,选择在元素之前插入的生成内容。

::after,选择在元素之后插入的生成内容,例如:

Lorem ipsum dolor sit amet.
和样式:

blockquote::before {
content: "022";
}

blockquote::after {
content: "022";
}
before-after

::selection 伪元素选择器
::selection,选择用户选取的内容,例如:

::selection {
background: #b3d4fc;
text-shadow: none;
}
selection

























以上是关于CSS选择器个人整理带示例20200626的主要内容,如果未能解决你的问题,请参考以下文章

VSCode自定义代码片段6——CSS选择器

css基础知识点整理

编写CSS代码的个人风格

VS2015 代码片段整理

建议收藏万字整理,一篇文章帮你掌握 Css 选择器

建议收藏万字整理,一篇文章帮你掌握 Css 选择器