CSS中的选择器

元素权重

CSS权重指的是样式的优先级，有两条或多条样式作用于一个元素，权重高的样式对元素起作用；权重相同时，后面的样式会覆盖前面写的样式。

基本选择器

选择器的命名规则：

包含字母[a-zA-Z]、数字[0-9]、ISO编码、下划线"_"、横线"-"
开头不能以数字、横线+数字开始

1.id选择器

含义
ID选择器会根据元素的ID属性中的内容匹配元素。元素的id属性值在全文档是唯一的
语法
#id属性值 { 样式声明 }
等同于属性选择器
[id='id属性值'] { 样式声明 }
权重
0100

案例：

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <title>id选择器</title>
        <style type="text/css">
            /* css中的id选择器 */
            #test1 {
                width: 100px;
                height: 100px;
                background-color: red;
                border: 1px solid red;
            }
        </style>
    </head>
    <body>
        <!-- 标签中的id属性值 -->
        <div id="test1">
            id选择器
        </div>
    </body>
</html>

运行截图

id选择器.png

2.类选择器

含义
根据元素的类属性中的内容匹配元素。类属性被定义为一个以空格分隔的列表项，在这组类名中，必须有一项与类选择器中的类名完全匹配。
语法
.类名 { 样式声明 }
等同于属性选择器
[class~='class属性值'] { 样式声明 }
权重
0010

案例：

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <title>class选择器</title>
        <style type="text/css">
            /* css中的class选择器 */
            .test1 {
                width: 100px;
                height: 100px;
                background-color: red;
                border: 1px solid red;
            }
            .test2 {
                color: white;
            }
        </style>
    </head>
    <body>
        <!-- 标签中的class属性值 -->
        <div class="test1 test2">
            class选择器
        </div>
    </body>
</html>

运行截图

class选择器.png

3.属性选择器

含义
通过已经存在的属性名或属性值匹配元素。
语法
[attr] { 样式声明 } ：表示带有以attr命名的属性的元素。
[attr = value] { 样式声明 } ：表示带有以attr命名的属性，且属性值为value的元素。
[attr ~= value] { 样式声明 } ：表示带有以attr命名的属性，并且该属性是一个以空格作为分隔的值列表，其中至少有一个值为value。
[attr *= value] { 样式声明 } ：表示带有以attr命名的属性，且属性值至少包含一个value值的元素。【包含】
[attr ^= value] { 样式声明 } ：表示带有以attr命名的属性，且属性值为“value”开头。【开头】
[attr $= value] { 样式声明 } ：表示带有以attr命名的属性，且属性值为“value”结尾。【结尾】
权重
0010

案例：

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <title>class选择器</title>
        <style type="text/css">
            /* 存在title属性的<a> 元素 */
            a[title] {
                color: purple;
            }

            /* 存在href属性并且属性值匹配"https://example.org"的<a> 元素 */
            a[href="https://example.org"] {
                color: green;
            }

            /* 存在class属性并且属性值包含以空格分隔的"logo"的<a>元素 */
            a[class~="logo"] {
                color: red;
            }

            /* 存在href属性并且属性值包含"example"的<a> 元素 */
            a[href*="example"] {
                font-size: 3em;
            }
            
            /* 存在href属性并且属性值结尾是"http"的<a> 元素 */
            a[href^="https"] {
                background-color: #FF0000;
            }

            /* 存在href属性并且属性值结尾是".org"的<a> 元素 */
            a[href$=".org"] {
                font-style: italic;
            }
        </style>
    </head>
    <body>
        <!-- 标签中的class属性值 -->
        <ul>
            <li><a href="#internal">Internal link</a></li>
            <li><a href="https://example.org">Example org link</a></li>
            <li><a href="http://example.com">Example link</a></li>
            <li><a href="#InSensitive" class="logo logo1">Insensitive internal link</a></li>
        </ul>
    </body>
</html>

运行截图

属性选择器.png

4.元素选择器

定义
通过node节点名称匹配元素怒。
语法
元素 { 样式声明 }
权重
0001

案例：

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <title>元素选择器</title>
        <style type="text/css">
            span {
              background-color: DodgerBlue;
              color: #ffffff;
            }
        </style>
    </head>
    <body>
        <span>这里是由 span 包裹的一些文字.</span>
        <p>这里是由 p 包裹的一些文字.</p>
    </body>
</html>

运行截图

元素选择器.png

5.通用选择器

定义
在CSS中，一个星号(*)就是一个通配选择器，它匹配任意类型的HTML元素。
语法
* { 样式声明 }
ns | * - 会匹配ns命名空间下的所有元素
* | * -会匹配所有命名空间下的所有元素
| * -会匹配所有没有命名空间的元素
权重
0000

组合选择器

1.相邻兄弟选择器（+）

定义
介于两个选择器，当第二个元素紧跟在第一个元素之后，并且两个元素都是属于同一个父元素的子元素，则第二个元素将被选中。
语法
former_element + target_element { 样式声明 }
权重
0000

案例：

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <title>相邻兄弟选择器</title>
        <style type="text/css">
            li:first-of-type + li {
                color: red;
            }
            ul + div {
                font-size: 2em;
                color: #FF0000;
            }
        </style>
    </head>
    <body>
        <ul>
            <li>One</li>
            <li>Two!</li>
            <li>Three</li>
        </ul>
        <section id="han">
            section
        </section>
        <div id="han">
            div
        </div>
    </body>
</html>

运行结果

相邻兄弟选择器.png

2.通用兄弟选择器（~）

定义
兄弟选择器，位置没有要求，两个选择器只需在同层级，A~B：选择A元素之后所有同层级B元素。
语法
former_element ~ target_element { 样式声明 }
权重
0000

案例：

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <title>通用兄弟选择器</title>
        <style type="text/css">
            p ~ span {
              color: red;
            }
        </style>
    </head>
    <body>
        <span>This is not red.</span>
        <p>Here is a paragraph.</p>
        <code>Here is some code.</code>
        <span>And here is a span.</span>
    </body>
</html>

运行截图：

通用兄弟选择器.png

3.子选择器（>）

定义
当使用 > 选择符分隔两个元素时，它只会匹配那些作为第一个元素的直接后代(子元素)的第二个元素。
语法
元素1 > 元素2 { 样式声明 }
权重
0000

案例：

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <title>子选择器</title>
        <style type="text/css">
            span { 
                color: black;
                background-color: red; }
            div > span {
                color: white;
              background-color: black;
            }
        </style>
    </head>
    <body>
        <div>
          <span>Span 1. In the div.
            <span>Span 2. In the span that's in the div.</span>
          </span>
        </div>
        <span>Span 3. Not in a div at all</span>
    </body>
</html>

运行截图

子选择器.png

4.后代组合选择器（单个空格）

定义
组合了两个选择器，如果第二个选择器匹配的元素具有与第一个选择器匹配的祖先元素，则第二个选择器将被选择。
语法
selector1 selector2 { 样式列表 }
权重
0000

案例：

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <title>后代选择器</title>
        <style type="text/css">
            li {
              list-style-type: disc;
            }
            
            li li {
              list-style-type: circle;
            }
        </style>
    </head>
    <body>
        <ul>
          <li>
            <div>Item 1</div>
            <ul>
              <li>Subitem A</li>
              <li>Subitem B</li>
            </ul>
          </li>
          <li>
            <div>Item 2</div>
            <ul>
              <li>Subitem A</li>
              <li>Subitem B</li>
            </ul>
          </li>
        </ul>

    </body>
</html>

运行截图：

后代组合选择器.png

伪类

定义
CSS伪类是添加到选择器的关键字，指定要选择的元素的特殊状态，例如鼠标悬停在某个元素上等。
语法
selector:pseudo { 样式选择器 }
通常使用单冒号指示伪类
权重：
0010
注意事项
一个选择器中同时一起写多个伪类。

状态的伪类

状态：即链接是否点击过、鼠标悬停在某个位置等

:link

定义
表示用户未访问过的链接。
常用的元素
<a>标签
正确渲染
:link伪类选择器应该放在其他伪类选择器的前面，遵循LVHA的先后属性（:link-:visited-:hover-:active）

:visited

定义
表示用户已访问过的链接。
常用的元素
<a>标签
正确渲染
使用的时候，将:visited规则放在:link规则之后，但在:hover和:active规则之前。

:hover

定义
表示鼠标悬停在元素上的样式。
常用的元素
所有标签
正确渲染
使用的时候，将:hover规则放在:link、:visited规则之后，但在:active规则之前。
注意
在触摸屏上，:hover基本不用。

:focus

定义
表示获取焦点的元素（如input）。当用户点击或触摸元素或通过键盘的tab键选择时会触发。
常用标签：
<input>
注意事项：
仅适用于焦点元素本身。VS :focus-within

:active

定义
表示被用户激活的元素，当用鼠标交互时，代表的是用户按下按键和松开按键之间的时间。
常用标签
<a>标签、<button>、<label>激活表单
正确渲染
使用的时候，将:active放在所有链接相关的样式之后。

:invalid

定义
表示内容未通过验证的input或其他的form元素。
常用标签
<input>、<form>

案例：

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <title>后代选择器</title>
        <style type="text/css">
            a:link { color: blue; }          /* 未访问链接 */
            a:visited { color: purple; }     /* 已访问链接 */
            a:hover { background: yellow; }  /* 用户鼠标悬停 */
            a:active { color: red; }         /* 激活链接 */
            p:active { background: #eee; }   /* 激活段落 */
        </style>
    </head>
    <body>
        <p>This paragraph contains a link:
          <a href="#">This link will turn red while you click on it.</a>
          The paragraph will get a gray background while you click on it or the link.
        </p>
    </body>
</html>

运行截屏

a标签伪类.gif

结构伪类

:first-child

定义
表示在一组兄弟元素中的第一个元素。
语法
selector:first-child { 样式声明 }
注意事项
与selector是兄弟元素，且selector位于兄弟元素的首位。
案例

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <title>:first-child选择器</title>
        <style type="text/css">
            p:first-child {
              color: lime;
              background-color: black;
              padding: 5px;
            }
        </style>
    </head>
    <body>
        <div>
            <!-- p的兄弟，且是老大 -->
          <p>This text is selected!</p>
          <p>This text isn't selected.</p>
        </div>
        
        <div>
            <!-- p的兄弟，p是老二 -->
          <h2>This text isn't selected: it's not a `p`.</h2>
          <p>This text isn't selected.</p>
        </div>
    </body>
</html>

结果截屏

:first-child伪类.png

:last-child

定义
表示在一组兄弟元素中的最后一个元素。
语法
selector:last-child { 样式声明 }
注意事项
与selector是兄弟元素，且selector位于兄弟元素的尾部。

案例

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <title>:last-child选择器</title>
        <style type="text/css">
            li:last-child {
                background-color: lime;
            }
        </style>
    </head>
    <body>
        <ul>
            <li>此元素背景色不是lime</li>
            <li>我的也不是lime。</li>
            <li>我的才是lime！ :)</li>
        </ul>
    </body>
</html>

运行截图

:last-child伪类选择器.png

:first-of-type

定义
表示在一组兄弟元素中其类型的第一个元素。
语法
selector:first-of-type { 样式声明 }
注意事项
与selector是兄弟元素，且selector位于兄弟元素且是相同类型的首位。
案例

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <title>:first-of-type选择器</title>
        <style type="text/css">
            article :first-of-type {
              background-color: pink;
            }
        </style>
    </head>
    <body>
        <article>
            <div>This `div` is first!</div>
            <div>This <span>nested `span` is first</span>!</div>
            <div>This <em>nested `em` is first</em>, but this <em>nested `em` is last</em>!</div>
            <div>This <span>nested `span` gets styled</span>!</div>
            <b>This `b` qualifies!</b>
            <div>This is the final `div`.</div>
        </article>
    </body>
</html>

:first-of-type伪类选择器.png

:last-of-type

定义
表示在一组兄弟元素且类型相同的最后一个元素。
语法
selector:last-of-type { 样式声明 }
注意事项
与selector是兄弟元素，且selector位于兄弟元素且是相同类型的尾部。

案例

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <title>:last-of-type选择器</title>
        <style type="text/css">
            p em:last-of-type {
                color: lime;
            }
        </style>
    </head>
    <body>
        <p>
            <em>我没有颜色 :(</em><br>
            <strong>我没有颜色 :(</strong><br>
            <em>我有颜色 :D</em><br>
            <strong>我也没有颜色 :(</strong><br>
        </p>

        <p>
            <em>我没有颜色 :(</em><br>
            <span><em>我有颜色!</em></span><br>
            <strong>我没有颜色 :(</strong><br>
            <em>我有颜色 :D</em><br>
            <span>
                <em>我在子元素里，但没有颜色!</em><br>
                <span style="text-decoration:line-through;"> 我没有颜色 </span><br>
                <em>我却有颜色！</em><br>
            </span><br>
            <strong>我也没有颜色 :(</strong>
        </p>
    </body>
</html>

运行截图

:last-of-type伪类选择器.png

:nth-child(an+b)

定义
首先找到所有当前元素的兄弟元素，然后按照位置先后顺序，从1开始排序，选择的结果为css伪类:nth-child括号中的表达式(an+b)匹配到的元素的集合。n从0开始
语法
selector:nth-child(an+b) { 样式声明 }
an+b的取值：
odd：奇数个
even：偶数个
-n+3：前三个
注意事项
必须是an+b的形式

:nth-of-type(an+b)

定义
首先找到所有当前元素的兄弟元素且是同类型元素，然后按照位置先后顺序，从1开始排序，选择的结果为css伪类:nth-of-type括号中的表达式(an+b)匹配到的元素的集合。
语法
selector:nth-of-type(an+b) { 样式声明 }
an+b的取值：同nth-child()
注意事项
必须是an+b的形式
案例：

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <title>:nth-of-type选择器</title>
        <style type="text/css">
            /* 奇数段 */
            p:nth-of-type(2n+1) {
                color: red;
            }

            /* 偶数段 */
            p:nth-of-type(2n) {
                color: blue;
            }

            /* 第一段 */
            p:nth-of-type(1) {
                font-weight: bold;
            }
        </style>
    </head>
    <body>
        <div>
            <div>这段不参与计数。</div>
            <p>这是第一段。</p>
            <p>这是第二段。</p>
            <div>这段不参与计数。</div>
            <p>这是第三段。</p>
            <p>这是第四段。</p>
        </div>
    </body>
</html>

运行截图：

nth-of-type伪类选择器.png

:nth-last-child(an+b)

定义
与nth-child()伪类选择器相同，但是顺序是从后往前
语法
selector:nth-last-child(an+b) { 样式声明 }
an+b的取值：同nth-child()
注意事项
必须是an+b的形式
案例：

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <title>:nth-last-child选择器</title>
        <style type="text/css">
            table {
                border: 1px solid blue;
            }

            /* Selects the last three elements */
            tr:nth-last-child(-n+3) {
                background-color: pink;
            }

            /* Selects every element starting from the second to last item */
            tr:nth-last-child(n+2) {
                color: blue;
            }

            /* Select only the last second element */
            tr:nth-last-child(2) {
                font-weight: 600;
            }
        </style>
    </head>
    <body>
        <table>
          <tbody>
            <tr>
              <td>First line</td>
            </tr>
            <tr>
               <td>Second line</td>
            </tr>
            <tr>
               <td>Third line</td>
            </tr>
            <tr>
               <td>Fourth line</td>
            </tr>
            <tr>
               <td>Fifth line</td>
            </tr>
          </tbody>
        </table>
    </body>
</html>

运行截图：

:nth-last-child选择器.png

:nth-last-of-type(an+b)

定义
与nth-of-type()伪类选择器相同，但是顺序是从后往前
语法
selector:nth-last-of-type(an+b) { 样式声明 }
an+b的取值：同nth-child()
注意事项
必须是an+b的形式
案例

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <title>:nth-last-of-type选择器</title>
        <style type="text/css">
            span:nth-last-of-type(2) {
              background-color: lime;
            }
        </style>
    </head>
    <body>
        <div>
          <span>This is a span.</span>
          <span>This is another span.</span>
          <em>This is emphasized.</em>
          <span>Wow, this span gets limed!!!</span>
          <strike>This is struck through.</strike>
          <span>Here is one last span.</span>
        </div>
    </body>
</html>

运行截图

:nth-last-of-type伪类选择器.png

其他

:not()

定义
:not() 用来匹配不符合一组选择器的元素。
语法
:not() 伪类可以将一个或多个以逗号分隔的选择器列表作为其参数。选择器中不得包含另一个否定选择符或伪元素。
注意事项
1.:not() 伪类不能被嵌套
2.伪元素不能作为:not()中的参数
案例

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <title>:not伪类选择器</title>
        <style type="text/css">
            .fancy {
              text-shadow: 2px 2px 3px gold;
            }
            
            /* 类名不是 `.fancy` 的 <p> 元素 */
            p:not(.fancy) {
              color: green;
            }
            
            /* 非 <p> 元素 */ 
            body :not(p) {
              text-decoration: underline;
            }
            
            /* 既不是 <div> 也不是 <span> 的元素 */
            body :not(div):not(span) {
              font-weight: bold;
            }
            
            /* 类名不是 `.crazy` 或 `.fancy` 的元素 */
            /* 注意，此语法尚未获广泛支持。 */
            body :not(.crazy, .fancy) {
              font-family: sans-serif;
            }
        </style>
    </head>
    <body>
        <p>我是一个段落。</p>
        <p class="fancy">我好看极了！</p>
        <div>我「不是」一个段落。</div>
    </body>
</html>

运行截图

:not伪类选择器.png

伪元素

定义
伪元素是一个符加到选择器末的关键词，允许对选择的元素的特定部分修改样式。
语法
selector: { 样式声明 }
注意事项
1.一个选择器只能用一个伪元素
2.按照规范，伪元素应该使用双冒号，伪类应该使用单冒号。

常用的伪元素

::before

定义
::before创建一个伪元素，其将成为匹配选中的元素的第一个子元素。常通过content属性来为一个元素添加修饰性的内容。此元素默认的为行内元素
语法：
selector::before {
content: "具体的内容"; //可以是自己的写内容，可以是iconfont的\e...
其他样式
}
注意事项
1.添加的内容是选中元素的子元素
2.默认display: inline;
案例

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <title>::before伪元素选择器</title>
        <style type="text/css">
            q::before { 
              content: "«";
              color: blue;
            }
            q::after { 
              content: "»";
              color: red;
            }
        </style>
    </head>
    <body>
        <q>一些引用</q>, 他说, <q>比没有好。</q>.
    </body>
</html>

运行截图

::before伪元素.png

::after

定义
::after和::before的含义相同，只不过::after添加的子元素位于选中元素的最后。
语法：
selector::after{
content: "具体的内容"; //可以是自己的写内容，可以是iconfont的\e...
其他样式
}
注意事项
1.添加的内容是选中元素的子元素
2.默认display: inline;
案例

<html>
    <head>
        <meta charset="utf-8" />
        <title>::after伪元素选择器</title>
        <style type="text/css">
            .exciting-text::after {
              content: "<- 让人兴兴兴奋!"; 
              color: green;
            }
            
            .boring-text::after {
               content:    "<- 无聊!";
               color:      red;
            }
        </style>
    </head>
    <body>
        <p class="boring-text">这是些无聊的文字</p>
        <p>这是不无聊也不有趣的文字</p>
        <p class="exciting-text">在MDN上做贡献简单又轻松。
        按右上角的编辑按钮添加新示例或改进旧示例！</p>
        
    </body>
</html>

运行截图：

::after伪元素.png

Content属性的取值

none
不会产生伪类元素
normal
::before和::after伪类元素中会被视为none
string
文本内容
attr(X)
将元素的X属性以字符串形式返回。，如果该元素没有X属性，则返回一个空字符串。
url(地址)
指定一个外部资源（如图片）。如果该资源或图片不能显示，它就会被忽略或显示一些占位。
案例

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <title>伪元素选择器中的content</title>
        <style type="text/css">
            p::before {
                content: attr(data-icon);
                color: red;
            }
            a::before{
                content: url(http://www.mozilla.org/favicon.ico) " MOZILLA: ";
            }
            .newEntry::after {
                content: " New!";
                color: brown;
            }
        </style>
    </head>
    <body>
        <p data-icon="PHOTO">我是一个段落。</p>
        <hr >
        <a href="http://www.mozilla.org/en-US/">Home Page</a>
        <hr >
        <ol>
            <li>Political thriller</li>
            <li class="newEntry">Halloween Stories</li>
            <li>My Biography</li>    
            <li class="newEntry">Vampire Romance</li>
        </ol>
    </body>
</html>

运行截图

伪元素中的content.png

最后编辑于：2021.01.10 13:47:15

人面猴
序言：七十年代末，一起剥皮案震惊了整个滨河市，随后出现的几起案子，更是在滨河造成了极大的恐慌，老刑警刘岩，带你破解...
沈念sama阅读 217,509评论 6赞 504
死咒
序言：滨河连续发生了三起死亡事件，死亡现场离奇诡异，居然都是意外死亡，警方通过查阅死者的电脑和手机，发现死者居然都...
沈念sama阅读 92,806评论 3赞 394
救了他两次的神仙让他今天三更去死
文/潘晓璐我一进店门，熙熙楼的掌柜王于贵愁眉苦脸地迎上来，“玉大人，你说我怎么就摊上这事。” “怎么了？”我有些...
开封第一讲书人阅读 163,875评论 0赞 354
道士缉凶录：失踪的卖姜人
文/不坏的土叔我叫张陵，是天一观的道长。经常有香客问我，道长，这世上最难降的妖魔是什么？我笑而不...
开封第一讲书人阅读 58,441评论 1赞 293
港岛之恋（遗憾婚礼）
正文为了忘掉前任，我火速办了婚礼，结果婚礼上，老公的妹妹穿的比我还像新娘。我一直安慰自己，他们只是感情好，可当我...
茶点故事阅读 67,488评论 6赞 392
恶毒庶女顶嫁案：这布局不是一般人想出来的
文/花漫我一把揭开白布。她就那样静静地躺着，像睡着了一般。火红的嫁衣衬着肌肤如雪。梳的纹丝不乱的头发上，一...
开封第一讲书人阅读 51,365评论 1赞 302
城市分裂传说
那天，我揣着相机与录音，去河边找鬼。笑死，一个胖子当着我的面吹牛，可吹牛的内容都是我干的。我是一名探鬼主播，决...
沈念sama阅读 40,190评论 3赞 418
双鸳鸯连环套：你想象不到人心有多黑
文/苍兰香墨我猛地睁开眼，长吁一口气：“原来是场噩梦啊……” “哼！你这毒妇竟也来了？” 一声冷哼从身侧响起，我...
开封第一讲书人阅读 39,062评论 0赞 276
万荣杀人案实录
序言：老挝万荣一对情侣失踪，失踪者是张志新（化名）和其女友刘颖，没想到半个月后，有当地人在树林里发现了一具尸体，经...
沈念sama阅读 45,500评论 1赞 314
护林员之死
正文独居荒郊野岭守林人离奇死亡，尸身上长有42处带血的脓包…… 初始之章·张勋以下内容为张勋视角年9月15日...
茶点故事阅读 37,706评论 3赞 335
白月光启示录
正文我和宋清朗相恋三年，在试婚纱的时候发现自己被绿了。大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
茶点故事阅读 39,834评论 1赞 347
活死人
序言：一个原本活蹦乱跳的男人离奇死亡，死状恐怖，灵堂内的尸体忽然破棺而出，到底是诈尸还是另有隐情，我是刑警宁泽，带...
沈念sama阅读 35,559评论 5赞 345
日本核电站爆炸内幕
正文年R本政府宣布，位于F岛的核电站，受9级特大地震影响，放射性物质发生泄漏。R本人自食恶果不足惜，却给世界环境...
茶点故事阅读 41,167评论 3赞 328
男人毒药：我在死后第九天来索命
文/蒙蒙一、第九天我趴在偏房一处隐蔽的房顶上张望。院中可真热闹，春花似锦、人声如沸。这庄子的主人今日做“春日...
开封第一讲书人阅读 31,779评论 0赞 22
一桩弑父案，背后竟有这般阴谋
文/苍兰香墨我抬头看了看天上的太阳。三九已至，却和暖如春，着一层夹袄步出监牢的瞬间，已是汗流浃背。一阵脚步声响...
开封第一讲书人阅读 32,912评论 1赞 269
情欲美人皮
我被黑心中介骗来泰国打工，没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留，地道东北人。一个月前我还...
沈念sama阅读 47,958评论 2赞 370
代替公主和亲
正文我出身青楼，却偏偏与公主长得像，于是被迫代替她去往敌国和亲。传闻我的和亲对象是个残疾皇子，可洞房花烛夜当晚...
茶点故事阅读 44,779评论 2赞 354

CSS中的选择器

元素权重

基本选择器

1.id选择器

2.类选择器

3.属性选择器

4.元素选择器

5.通用选择器

组合选择器

1.相邻兄弟选择器（+）

2.通用兄弟选择器 （~）

3.子选择器 （>）

4.后代组合选择器 （单个空格）

伪类

状态的伪类

:link

:visited

:hover

:focus

:active

:invalid

结构伪类

:first-child

:last-child

:first-of-type

:last-of-type

:nth-child(an+b)

:nth-of-type(an+b)

:nth-last-child(an+b)

:nth-last-of-type(an+b)

其他

:not()

伪元素

常用的伪元素

::before

::after

Content属性的取值

推荐阅读更多精彩内容

2.通用兄弟选择器（~）

3.子选择器（>）

4.后代组合选择器（单个空格）