CSS 3 选择器

时间 2019-11-20

标签 css 选择器栏目 CSS 繁體版

原文原文链接

CSS选择器是很基本的东西。在CSS3中，追加了三个属性选择器分别为html

 <style>
     /*id包含div的元素就会应用CSS效果*/
     [id *= div]{
        color: red;
     }
      /*id以div为首字符的元素会应用CSS效果*/
     [id ^= div]{
        color: green;
     }
     /*id以div为结束字符的元素会应用CSS效果*/
     [id $= div]{
         color: white;
     }
     /*id若结尾为数字，则须要注意加"\"*/
     [id $= \1]{
         color: black;
     }
</style>

这样使得选择器有了通配符的概念spa

结构性伪类选择器

名字很拗口，因此先解释一下伪类的意思：因为状态是动态变化的，因此一个元素达到一个特定状态时，它可能获得一个伪类的样式；当状态失去时，它又会失去这个样式；因此叫伪类。code

伪类选择器

:hover ; :link ; :active ; :target ; :focus(应用于拥有键盘输入焦点的元素htm

在CSS定义中blog

a:active必须被置于a:hover 以后才是有效的开发

a:hover必须被置于a:link和a:visited以后才是有效的文档

伪元素选择器
伪元素选择器的效果是须要经过添加一个实际的元素才能达到的

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>123</title>
    <style>
        /*first-line：第一行元素添加效果*/
        p:first-line{
            color: red;
        }
        /*first-letter：第一个字符添加效果*/
        p:first-letter{
            color: green;
        }
        /*before：在所选元素前插入内容*/
        li:before{
            content: "-before-";
        }
        /*after：在所选元素后插入内容*/
        li:after{
            content: "-after-";
            color: grey;
        }
    </style>
</head>
<body>
    <p>第一行<br/>第二行</p>
    <ul>
        <li>列表1</li>
        <li>列表2</li>
        <li>列表3</li>
        <li>列表4</li>
    </ul>
</body>
</html>

效果：get

在CSS3中，结构性伪类选择器的共同特征是容许开发者根据文档中的结构来指定元素的样式。it

:root：指将样式绑在页面的根元素中，根元素是指文档中位于最顶层的结构元素；在页面中，就是指整个页面的html部分。
:empty：指没有内容的部分
:not(XXX)：排除XXX(应用场景：想对某个结构元素使用样式，可是想排除这个结构元素下面的子结构元素，让它不使用当前这个样式)
:target：使用target选择器，只对页面中某个target元素指定样式。该样式只在用户点击页面中的超连接，并且并跳转到target元素后才起做用。
例子：io

咱们根据例子来理解上面的话

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title> </title>
    <style>
        /*root覆盖了整个页面*/
        :root{
            background-color: grey;
        }
        /*下面的"*"是通配符，()包含的是想被排除的部分*/
        div *:not(h1){
            color: blueviolet;
        }
        /*empty*/
        :empty{
            background-color: wheat;
        }
        /*target*/
        :target{
            background-color: orange;
        }
    </style>
</head>
<body>
    <h3>:not</h3>
    <div>
        <h1>Hello?</h1>
        <h2>Hi!</h2>
        <p>nice to meet u</p>
    </div>
<!--###########################################-->
    <h3>:empty</h3>
    <table>
        <tr>
            <td>some</td>
            <td>any</td>
        </tr>
        <tr>
            <td>where</td>
            <td></td>
        </tr>
        <tr>
            <td></td>
            <td>two</td>
        </tr>
    </table>
 <!--###########################################-->
    <h3>:target</h3>
    <a href="#a1">menu·1</a>|
    <a href="#a2">menu·2</a>|
    <a href="#a3">menu·3</a>|
    <div id="a1">
        <h1>content·1</h1>
    </div>
    <div id="a2">
        <h1>content·2</h1>
    </div>
    <div id="a3">
        <h1>content·3</h1>
    </div>
</body>
</html>

效果：

关于root的小细节
若是使用了root，那body只给内容区域添加效果。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>123</title>
    <style>
        :root{
            background-color: grey;
        }
        body{
            background-color: yellow;
        }
    </style>
</head>
<body>
    <div>
        <h1>Hello?</h1>
        <h2>Hi!</h2>
        <p>nice to meet u</p>
    </div>
</body>
</html>

效果：

若是没有使用root，那么body则是给整个页面添加效果

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>123</title>
    <style>
        /*root覆盖了整个页面*/
        :root{
            background-color: grey;
        }
    </style>
</head>
<body>
    <div>
        <h1>Hello?</h1>
        <h2>Hi!</h2>
        <p>nice to meet u</p>
    </div>
</body>
</html>

效果：