静思田园

Appearance

选择器 ​

CSS 选择器用于“查找”（或选取）要设置样式的 HTML 元素。

我们可以将 CSS 选择器分为五类：

选择器 ​

简单选择器 ​

选择器示例描述
#id#firstname选择 id="firstname" 的所有元素
.class.intro选择 class="intro" 的所有元素
**选择所有元素
elementp选择所有 p 元素
element,elementdiv,p选择所有 div 元素和所有 p 元素
element elementdiv p选择 div 元素内部的所有 p 元素
element>elementdiv>p选择父元素为 div 元素的所有 p 元素
element+elementdiv+p选择紧接在 div 元素之后的 p 元素

组合选择器 ​

选择器示例描述
element elementdiv p选择 div 元素内部的所有 p 元素
element>elementdiv>p选择父元素为 div 元素的所有 p 元素
element+elementdiv+p选择紧接在 div 元素之后的 p 元素
element~element2p~ul选择 p 元素同级并在 p 元素后面的所有 ul 元素

伪类选择器 ​

选择器例子例子描述
:activea:active选择活动的链接。
:focusinput:focus选择获得焦点的 元素。
:hovera:hover选择鼠标悬停其上的链接。
:linka:link选择所有未被访问的链接。
:checkedinput:checked选择每个被选中的 元素。
:disabledinput:disabled选择每个被禁用的 元素。
:enabledinput:enabled选择每个已启用的 元素。
:first-childp:first-child选择作为其父的首个子元素的每个 <p> 元素。
:first-of-typep:first-of-type选择作为其父的首个<p>元素的每个<p>元素。
:in-rangeinput:in-range选择具有指定范围内的值的 元素。
:invalidinput:invalid选择所有具有无效值的 元素。
:last-childp:last-child选择作为其父的最后一个子元素的每个 <p> 元素。
:last-of-typep:last-of-type选择作为其父的最后一个 <p> 元素的每个 <p> 元素。
:not(selector):not(p)选择每个非 <p> 元素的元素。
:nth-child(n)p:nth-child(2)选择作为其父的第二个子元素的每个 <p> 元素。
:nth-last-child(n)p:nth-last-child(2)选择作为父的第二个子元素的每个<p>元素，从最后一个子元素计数。
:nth-last-of-type(n)p:nth-last-of-type(2)选择作为父的第二个<p>元素的每个<p>元素，从最后一个子元素计数
:nth-of-type(n)p:nth-of-type(2)选择作为其父的第二个 <p> 元素的每个 <p> 元素。
:nth-child(n)p:nth-child(2)选择作为其父的第二个子元素的每个 <p> 元素。
:only-of-typep:only-of-type选择作为其父的唯一 <p> 元素的每个 <p> 元素。
:only-childp:only-child选择作为其父的唯一子元素的 <p> 元素。
:optionalinput:optional选择不带 "required" 属性的 元素。
:out-of-rangeinput:out-of-range选择值在指定范围之外的 元素。
:read-onlyinput:read-only选择指定了 "readonly" 属性的 元素。
:read-writeinput:read-write选择不带 "readonly" 属性的 元素。
:requiredinput:required选择指定了 "required" 属性的 元素。
:rootroot选择元素的根元素。
:target#news:target选择当前活动的 #news 元素（单击包含该锚名称的 URL）。
:validinput:valid选择所有具有有效值的 元素。
:visiteda:visited选择所有已访问的链接。

伪元素选择器 ​

选择器例子例子描述
::afterp::after在每个<p>元素之后插入内容。
::beforep::before在每个 <p> 元素之前插入内容。
::first-letterp::first-letter选择每个<p>元素的首字母。
::first-linep::first-line选择每个<p>元素的首行。
::selectionp::selection选择用户选择的元素部分。
html
<style>
    div {
        border: solid 1px #ddd;
        width: 150px;
    }

    div>input[type="text"] {
        border: none;
        outline: none;
    }

    div>input[type="text"]+span:after {
        content: "\21AA";
        font-size: 14px;
        cursor: pointer;
    }
</style>
...

<div>
	<input type="text"><span></span>
</div>

元素权重 ​

元素会被多个样式一层层作用，这就是层叠样式表的来源。如果多个样式做用在元素上就会产生优先级权重问题。

使用类、ID、伪类都有不同的权重，具体应用哪条规则要看权限大小。

  • 相同权重的规则应用最后出现的
  • 可以使用 !important 强制提升某个规则的权限

权重应用 ​

规则粒度
*0000
标签,伪元素0001
class，类属性值0010
ID0100
行内样式1000

强制优先级 ​

有时在规则冲突时，为了让某个规则强制有效可以使用 !important。

html
<style>
  h2 {
 	 color: red !important;
  }

  h2 {
 	 color: green;
  }
</style>

<h2>important</h2>
html
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>权重</title>
    <style>
        #id {
            color: blue;
        }

        h2.a.b.c.d.e.f.g.h.i.j.k.l.m.n {
            color: red;
        }
    </style>
</head>

<body>
    <h2 id="id" class="a b c d e f g h i j k l m n">任然显示绿色</h2>
</body>

</html>

继承规则 ​

子元素可以继承父元素设置的样式。

  • 子元素并不是全部样式。比如边框、高度等并不会继承。
  • 继承的规则没有权重
html
<style>
  article {
    color: red;
    border: solid 1px #ddd;
  }
</style>
...

<article>
	<h2>继承颜色 <span>没有继承边框</span></h2>
</article>

通配符 ​

通配符的权限为 0，而继承的规则没有权重即比0的权重还低。

html
<style>
  * {
  	color: red;
  }

  h2 {
  	color: blue;
  }
</style>

<article>
	<h2>blue <span>红色</span></h2>
</article>

h2 中的 span 并没有继承 h2 的颜色，就是因为继承没有权重。而使用了 * 权重为 0 的规则。如果想span继承h2，一般的操作是将统配替换为html 或者 :root。

html
<style>
  html {
  	color: red;
  }

  h2 {
  	color: blue;
  }
</style>

<article>
	<h2>blue <span>红色</span></h2>
</article>