CSS学习笔记(1):选择器

2021-09-22 17:40:31

一、元素选择器

HTML文档元素就是最基本的选择器

如：

<!DOCTYPE html>

<html lang="en">

<head>

<meta charset="UTF-8">

<title>index</title>

<style type="text/css">

    p {color:blue;}

</style>

</head>

<body>

    <p>这一段话是蓝色的。</p>

</body>

</html>

示例将元素的字体颜色设置为了蓝色，元素选择器将作用于文档内所有的元素。同样，我们也能够同时为多个元素应用一种样式，如：

<!DOCTYPE html>

<html lang="en">

<head>

<meta charset="UTF-8">

<title>index</title>

<style type="text/css">

    h1,p {color:blue;}

</style>

</head>

<body>

    <h1>标题颜色</h1>

    <p>这一段话是蓝色的。</p>

</body>

</html>

为多个元素应用样式时，用逗号分隔。

*作为通配选择器，可以与任何元素匹配。

格式：元素|通配符

二、类选择器

类选择器的样式与元素关联，需要为class属性指定一个适当的值，如：

<!DOCTYPE html>

<html lang="en">

<head>

<meta charset="UTF-8">

<title>index</title>

<style type="text/css">

    .one {color:blue;}

</style>

</head>

<body>

    <p class="one">第一段。</p>

    <p>第二段</p>

    <p class="one">第三段</p>

</body>

</html>

格式：.类名

代码中有3个元素，其中有两个指定了class属性，即class="one"，在<style>中使用.one类选择器指向这两个元素。与元素选择器不同的是类选择器以[.]开头后面跟上指定的class属性值。类选择器可以对多个且不同元素指定同样的class值。

三、多类选择器

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>index</title>

    <style type="text/css">

        .one {color:blue;}

        .two {color:red;}

        .one.two {color:green;}

    </style>

</head>

<body>

<p class="one two">第一段。</p>

<p class="two">第二段</p>

<p class="one">第三段</p>

</body>

</html>

效果：

aaarticlea/png;base64,iVBORw0KGgoAAAANSUhEUgAAALMAAAB5CAIAAAD9BYd2AAADIElEQVR4nO3cwXKkKgCG0X70vHmy60rJD4qgsDinsnIcyYUv2s1Nz+cXks/qb4BNKYNMGWTKIFMGmTLIlEGmDDJlkCmDTBlkyiBTBpkyyJRBdlLG5yecEA+Ofh8/nycuy23nZRy+agdvDl9cYdaVGdSa+u/CHFauPHh/+OIicSzeV536w6p87xaNc+4Mr4xddT9N5t7tlbGtvql/4p5xiKwcQh9LrC9j7gWZZdrT5PTM2t966r+MMX37GdMX8vT9sHRWWV/GyyNy0ejTZHDlbrw3cSN5R8cUxyWZUkZ88VHLYsq4nLo6v7XVur1C7btO7bLKeM35/MbNhsaPdd/w9SwaccjiBa3d8XINpr/htAe6raGdrgnDFzsi5Qn6WMKkkymDTBlkyiBTBpkyyJRBpgwyZZApg0wZZMogUwaZMsiUQaYMMmWQKYPsrIxPOiEeHP1GPo9clrsulHH4qh28OX5xhVlXZkxz6r8Lc1i58uD98YuLxLF4XX3qD6vyvVs0zvlNt5P2PUAZu+p/msy92ytjV51Tf3rP6B6/iKwcQh8rbFDG3AsyyX5PE/bQuZ8xfSFP3w9LZ5ENynh5RK4ZfpoMrpz3JrvqmfqLGxJ94/97iJQHWefy7NdW6/+7zetfv8UrjNplWeTCAsTNhlk/1o0sxLFUc3e8/IGe/iLA64xdje10TRi/+L+s5Qn6WMGkkymDTBlkyiBTBpkyyJRBpgwyZZApg0wZZMogUwaZMsiUQaYMMmWQKYPspIzXfq/bL/Xt5ryM9ucBBle0vIJPLm6iNfflZwlqB79Hej/S5lfHt1Wd+7iE0z9zqoxtdT9N5t7tlbGtvrl/4p5xiKwcQh9LrC9j7gWZZfLT5Mb57KlvP+OJDy+23w9LZ5X1Zbw8IheNPk0GV857k211zP0TLxT+P0TKgyx0dfprq3V7/dp3HVksd74CcbOhDOXi1ni8PZQj1v6I17R2x8sf6OkvArzO2NbQTteE4f2TO7sy62TKIFMGmTLIlEGmDDJlkCmDTBlkyiBTBpkyyJRBpgwyZZApg0wZZMogUwaZMsiUQfYHzyNpC6dHZjAAAAAASUVORK5CYII=" alt="" />

格式：.类名1.类名2……

多类的概念在于可以对class指定多个属性值，如我们为指定了class="one two"，那么这个元素的class属性就包含了两个属性值"one"和"two"，中间空格作为分隔符。在样式表中则使用[.属性值1.属性值2|……]来指向元素。上面的代码中，我们对class值为"one"的元素颜色应用蓝色，class值含有"two"的元素应用红色，为class值同时含有"one"和"two"的元素颜色应用为绿色。如果在样式表中没有为指定.one.two{color:green;}，那么第一段。呈现出来的效果是什么呢？答案是红色。因为.one和.two都会指向满足条件的第一段。，这时候样式就会依照层叠来应用样式了。

四、ID选择器

同类选择器类似，但匹配的是id属性，而不是类选择器的class属性。与类选择器不同的是，在一个HTML文档中，ID选择器会使用一次，而且仅一次，虽然在很多浏览器中指定id属性值能够出现多次，但这是不正确的，而且如果在JavaScript中使用getElementById()方法时，会造成不必要的错误。通过#元素ID属性值来指向元素。如：

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>index</title>

    <style type="text/css">

        #p1 {color:blue;}

    </style>

</head>

<body>

<p id="p1">第一段。</p>

<p>第二段</p>

<p>第三段</p>

</body>

</html>

格式：#ID属性值

五、属性选择器

注意：Safari、Opera和所有基于Gecko的浏览器都支持属性选择器，在IE5/Mac和IE6/Win之前，IE并不支持属性选择器。

1.简单属性选择器

　　使用情况：如果希望有某个属性的元素，不在乎属性的值是什么。可以使用简单属性选择器。

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>index</title>

    <style type="text/css">

        p[class] {color:blue;}

    </style>

</head>

<body>

<p class="one">第一段。</p>

<p class="two">第二段</p>

<p>第三段</p>

</body>

</html>

效果：

aaarticlea/png;base64,iVBORw0KGgoAAAANSUhEUgAAAGoAAACPCAIAAACdytnxAAACuUlEQVR4nO2a2XKDMAwA+f+fpi+ZtOOLY4URdHf6kDHEkja2Q6ZaVgEsdyfwbNSHUB9CfQj1IdSHUB9CfQj1IdSHUB9CfQj1IUb6ltbF5iBNYrlk2gls6Cv+eoMnY1czRM08jW6O3+yL8urB87GrSZqxMtPOsUj9u+4G95yJ/VZ9n2vVPo3dXC/XV956weorPok6RHKJN+uLnXA+MZt3887eu57Ogee+8Go3H4ny+71Z3+SI4aDNC8s78c2bbUnuzaWZd4i+5oHYcxcSN5BdifRKOl3GeP32pn2evuZD2WCBHIvddzcwmMfdOvjRVica/szxr391BMSunhzrG5JLzJ1detSHUB9CfQj1IdSHUB9CfQj1IdSHUB9CfQj1IdSHUB9CfQj1IdSHsLsUYXcpwu5SRGR36dGOjtfq+1yzu3QLu0sRdpcicm3ex2F3KcLuUsTDukuz8aTu0oTEdJfuWae9Y64X7hE8rLs0G3aXIuwuReTOLj3qQ6gPoT6E+hDqQ6gPoT6E+hDqQ6gPoT6E+hDqQ6gPoT6E+hDqQ4z/z9u42hykSSzLFdNOYENfQW/wZOxqhqiZpzHoLl2KF73B78gemiGaIw/W16xzs/jDsd+q73PtyFI6E/vd+spbL1h9xSdRh0gu8WZ9sRPOJ3Lznrg/uJrpHHjuC6+2MHvF8Xo1N+ubHDEctHlheWN9+d2tR7pL4w+vv3u2HiQzT2Nnd2m7pNNFjtfvU9ytO7pLfyssXhRLZj9/39WM2LuUkO6PtnpphB9M/+jsWy/+5u2drcklpk4uP+pDqA+hPoT6EOpDqA+hPoT6EOpDqA+hPoT6EOpDqA+hPoT6EOpDqA+hPoT6EOpDqA+hPoT6EOpDqA+hPoT6EOpDqA+hPoT6EOpDqA+hPoT6EOpDqA+hPoT6EOpDqA+hPoT6ED9YrhxWp6JOeAAAAABJRU5ErkJggg==" alt="" />

格式：元素|通配符[属性]

可以看到含有class属性的元素的颜色变成了蓝色，并且对class的值并不关注。

还可以根据多个属性进行选择，如：a[href][title]{font-weight:bold;} //对同时具有href属性和title属性的<a>元素变成粗体。

2.根据具体属性值选择

上面的例子是不关注属性值的选择器，那么现在我们要讲的就是需要关注属性值的选择器了。我们将上面的例子改变一下：

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>index</title>

    <style type="text/css">

        p[class="one"] {color:blue;}

    </style>

</head>

<body>

<h1 class="one">123</h1>

<p class="one">第一段。</p>

<p class="two">第二段</p>

<p>第三段</p>

</body>

</html>

效果：

aaarticlea/png;base64,iVBORw0KGgoAAAANSUhEUgAAAFgAAACuCAIAAAA9PF1nAAAFaElEQVR4nO2cq5qrPBhGv7tAVo4ciaysrBxZWVnZS0BWjqysrKxEIpEjkSORyPyCt7STA4cQKP33u54tZkJIvixyIsOzRRGllFLy6gCWAkUAigAUASgCUASgCEARgCIARQCKABQBKAJQBKAIQBGAIgBFAIoAPUVU2fFTZHv57cpYFrfv/TZeSc0qXm/3p0vmvu83PR92649IRESij/V6l7Rln4xuEVWRnQ/rSKRTRJke15FItEnSX6WUqsqfW7Kpmxjvb4VxQ3HdrUSi9eGSl0qpqswv+7gWuLua2SfFLSJLRKdNRJUlsYjI5lxo6cfP+m7tSpXXN8gxe04uLts6e5zklUeDfOkxNMrbIeoU8Yv4t5fCdUk+T/lTcp6g1CT7mz9LuqsLT585ommJO7Lytrc1tia3tqzpcVHy95YqPeDK/lb2b8lIAolosphjw3U/ZhRZGZ2oUfR1na9LBBLx6M/GA1YqP30OaVjTI2y9azJCiVCqLLI0TbMfozc3t6+NvmKjSo/R/B4CinBRnDeuMWPhvvhInGRzLhqTi6hSLDlx1/OtyvuGJfr4+s7nmyZrphVx30REX+aqaqtARCTen5e5s/QXUVy+om4LDVVZ5NfvXSwistqesnn7xGQiMNj7WjBunHuWmEZEY+H849GWZt2IjulsKiYQUWVJ/e518n1ZeMXeMrgITAzj+rVz+z0dYUXcLRxT40GWP2ma5r8PO/U7uKw2J1PZ481XfyObjIAiWqfH+q3s8cbdvKXZGvsYGvO9bQQTgZ2TY0iU193fPfajrbK76t2neXExL01GHxHFeX0XUTiylLd9rcE6PxbX/ac+9TXnMtrBzONoZvjKO4ZOEdUPWiEiEh9v1j6BPhN9rC00B5j6zFfc6oO5eF8f1T2f7a2237MeUA07qnvi7yj5s0fueQ/uzC5Jc3ZbH94eztd8/j02j/MBRQCKABQBKAJQBKAIQBGAIgBFAIoAFAEoAlAEoAhAEYAiAEUAigAUASgCUASgCEARgCIARQCKABQBKAJQBKAIYBchtmRr4tjqZZJiPXCK0P65Ej1rNUoIVbJ/SJYk0X9wJfrXahRirWtO9Dq1IJq+0JLHp9bli0CqMQrCdt23EaFnmqBHaE7NKmbW8TIRYQscz9ih0ZnTddfS6LWPCB5358I8v6mXiZi5xk48h8bIQD1Wjam7SXfZ1giCiLBOHC4LQeptC6njsiM474Da+5Sr2FeKsC7yLQ9tWK1uCy0uZh0a1scVfOX7n+wsA9Rq7ETMDEvcWf4LUASgCEARgCIARQCKABQBKAJQBKAIQBGAIgBFAIoAFAEoAlAEcP1dw/rdRHhr9X8kErxYD5wiNFyJnrUaJYQq2T8kS9I9Di1QM9G/VqMQa11z0hZQ86s1UUtpp70WtUARSB3YsMG1vosIPVNXjxhcq+HUrGJmHS8TEbbA8SxlaLycXvuI4HFrTqdwPTgke+r0ImausRPPoTEy0LdcNazNDiJCK7lJHFOyf0gdlx3BydOy1x9lzA6uYuen5YuZR6zaD+PDbbGwlB5hfVzBB/BbzhFq4lXDNQfNrGNxG5tXQRGAIgBFAIoAFAEoAlAEoAhAEYAiAEUAigAUASgCUASgCEARgF/MAH4xcw/AkjTwixnnnzHcbXuDU2xrxJ3NGFzr8kUgdcjj9an1XUTomfjFDDLxi5meQ8Mj/yStGQG/mLmHZE/lFzNNHEN7+7Ba33HVmGKQP48IM3FMyf4hdVzu+mJmcH2tfeqFk+jYL2b6DCKz5S0WltIjrI8r+AB+yzlC8YuZfwqKABQBKAJQBKAIQBGAIgBFAIoAFAEoAlAEoAhAEYAiAEWA/wCiCRtHOrnocgAAAABJRU5ErkJggg==" alt="" />

格式：元素|通配符[属性=属性值]

我们可以看到p[class="one"]等同于p.one，但是使用属性选择器可以针对其它属性值来选择元素，而不单单是达到类选择器的效果。

3.根据部分属性值选择

如果属性能接受词列表(词之间用空格分隔)，可以根据其中任意一个词进行选择，如：

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>index</title>

    <style type="text/css">

        h1[class~="box"]{color:blue;}

    </style>

</head>

<body>

<h1 class="one two box">123</h1>

</body>

</html>

效果：

aaarticlea/png;base64,iVBORw0KGgoAAAANSUhEUgAAAIIAAABMCAIAAAAug/huAAADNElEQVR4nO2aK5erMBRGz7+IrKwciURWIiuRlZX8BGTlSCSyEolEIiuRI5HI7woCpTw6ZVY79zTz7YUiyYJmk8c5qYAoQP73CxCAGpRADSqgBhVQgwqoQQXUoAJqUAE1qIAaVEANKqAGFVCDCqhBBdSgAmpQATWogBpUQA0qoAYVrNZQRBBB+vVdvRrZJwIPIhCBbOAHOKW40y5PEPowAhGYLfwQabH27d6VFRqaCsnRdtN9DXUO30AM4rxtiUuGnYEIxENWTRpUCDcQg2OKGkCDMoUnEMEmxLS6ezygoei+6MF1R0NT2B5MqvH9j7b57rZnG8TtoIlu6lepfZYXo3n497wpayalGkfzvYY0gAgkmPmKbZHgVA7ulnaESTyuHz/wODdYtzb0/bjYLzUObZ9+oJwUlrFtHqSDu/1oM+Mm+dEWHbJVr/l+PFvDF4Ju4tolk8J0TkONyIcINpMBVHTa9udVr/l+PFvDYCYxk0mmPK3r1n40nKYjyy2erwE1ihx5gXq5+Wj1nqdBZBbnN8d4gYYlKuxmd0oL9DNS/Aeih9/T8PgMU3cBitni0/mBAODXNPRBwz69V61fw9tAL/kD46DlVzRU2JvvHfQ0NcozQs9un4rpIuMcr9fQBckPOpg2FA+F62H0izX0DpKfJCSavMv0RY7nM16poUHsQwS70087scGxWyoyp6emF2pI909IzMWdhtjpLdOrNFgH0UwQd8mRlwM3bZZ7YdBcNTi9a3qJhjbyMvu5MK3N/Q1y2tnhukkdd/VgUjo7nWR9vga7ri5sb+ozROAn1zt9WCfhZOgUXQ58WuQW6zQkfqehWqhR42CWp/IKh49x4rop7THR6NgHvXWz/DhXWKHhcu6OzwReNH+qbMNgA9+fuTYL622VWROH1H719QXxzh5i/4V8xg8PQa9XcOPjJhuxfM3MaV9IY/jbLkm+hR8iOd/7C4FL8A8yKqAGFVCDCqhBBdSgAmpQATWogBpUQA0qoAYVUIMKqEEF1KACalABNaiAGlRADSqgBhVQgwqoQQXUoAJqUAE1qIAaVEANKqAGFVCDCqhBBdSgAmpQATWogBpUQA0q+Ael4EZaMu6ahQAAAABJRU5ErkJggg==" alt="" />

格式：元素|通配符[属性~=属性部分值]

更高级的css选择器（CSS2）:

[foo^="bar"] 选择foo属性值以"bar"开头的所有元素

[foo$="bar"] 选择foo属性值以"bar"结尾的所有元素

[foo*="bar"] 选择foo属性值中包含字串"bar"的所有元素

4.特定属性选择类型

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>index</title>

    <style type="text/css">

        p[lang|="en"]{color:blue;}

    </style>

</head>

<body>

<p lang="en">段落1</p>

<p lang="en-a">段落2</p>

<p lang="en-b">段落3</p>

<p lang="cn-en">段落3</p>

<p lang="encn">段落4</p>

</body>

</html>

这个规则会匹配lang属性等于en或者以en-开头的所有元素，encn也不会起作用，因为不是en-开头，效果：

aaarticlea/png;base64,iVBORw0KGgoAAAANSUhEUgAAAFwAAACtCAIAAACyQ4+zAAAEDklEQVR4nO2a0ZarIAxF+f+f9j70LpfFnRC0dhJ69poHBamyS4hTaJs40f76ATIiKYCkAJICSAogKYCkAJICsJTWthbWdb4y3jYnb4//cnHs0l7iaFpfSl/dzOP4XzkuSom3ilyfjVtSLugoMXZ4Ttmfu+vAuUt4wewclA1vpESe3hlKa0rxmhmBYw2xa3f5K7zw8VNJPMT6W5aT0lfbEXGW0k1Gy4bPMCUfxxTWVny1AykYJlaWwcJFso/fk2D3fij74EjB64dSqrz+f/KNdoH/el6YUqw5Mv62togU8UJSAEkBJAWQFEBSAEkBJAWQFEBSAEkBJAWQFEBSAEkBJAWQFEBSAO1kArSTCdBOJuCrO5mqmPreTqZCCyDf28lUWIpzyu2vro1VleI1MwLHGmKRT8iDFz5+KomHGNw1sZFtaqLdjGA5HuCx/5kJuZuSj2MKawtNJTsgBcPEyjJYaL2MlDCy7VL816pgIPxQ9sGRgtdPvcIUljL1Rluo2z6mFGtSuPy2VoiyD/4kkgJICiApgKQAkgJICiApgKQAkgJICiApgKQAkgJICiApgKQAkgKwlKlfWOsuZVjwsum5ZGrFbzUpfbXxMzUuM1t/5bi7bDps1ZWXMPXJdR8ssaoye/G2YmyBbRb+eph/ZVq8kRJ57vjamNMwG+O1ZG5mBI41xIbNU+GFj59K4iEWr03CxES7GcFyPMBjuGtuL3dT8nFMYW08kecBpGCYWFkGCxfJPv5rVfDbvnOainH2wZGC1w+7/YtvtAv81/PClIK9srJy5LQQZR/8SSQFkBRAUgBJASQFkBRAUgBJASQFkBRAUgBJASQFkBRAUgBJASQFYCmttRb+NfF8ZbxtTrrfaFuno73DH7G8lL76XdDxOM6jHXiCi1LirbryEqZuSZkKnK4qsxeeU/YnPvfE75sTOIWlOKfc3h5KfvOqUrxmRuBYQ2zYPBVe+PipJB5i8dokTEy0mxEsxwM8hrvm9nI3JR/HFNbGE3keQAqGiZVlsHCR7GP1ZK/lxjPdrifl/4kbIFZV8HT7zTdaP3wK4SUX66vG64enhaj63I8iKYCkAJICSAogKYCkAJICSAogKYCkAJICSAogKYCkAJICSAogKYC3ZyL6Ectv2jn/Cjv8IXp9KX21djLNLnFEWgWbpOKT6z5YArdMP3y8rRhbYJsFXjCcg4pJcU65/eROpmYvwubh4pqeFTjWEOsKi0k5jnw/lcRDbNgkGxMT7WYEy/EAj522Obmbko9jCms7TZGZ+M8BKRgmVpbBwmGf0+p4AV8jXPSJnUzBqgzcSqIXpFQNH6skMg2X6PMQL0GgBUdTPHySU/W5H0VSAEkBJAWQFEBSAEkBJAWQFEBSAEkBJAX4B4zvGK7VgxgmAAAAAElFTkSuQmCC" alt="" />

格式：元素|通配符[属性|="属性值"

六、后代选择器

h1 em{color:blue;}

可以看作对作为h1后代元素的em元素颜色改为蓝色，用代码展示就是：

<h1><em>123</em></h1>

需要注意的是,这里是后代元素，而不只是子元素，如下面的代码也是有效的：

<h1><b><em>123</em></b></h1>

如果只想缩小范围，选择子元素而不是后代元素，则可以使用下面的方式：

h1 > em{color:blue;}

选择相邻兄弟元素，如：

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>index</title>

    <style type="text/css">

        h1+p{color:blue;}

    </style>

</head>

<body>

<p>段落1</p>

<h1>段落2</h1>

<p>段落3</p>

<p>段落3</p>

<p>段落4</p>

</body>

</html>

效果：

aaarticlea/png;base64,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" alt="" />

通过h1+p匹配了之前的兄弟元素是<h1>的所有符合要求的元素，如果元素之前元素隔着其它元素，则不符合匹配要求，但中间只隔着文本内容并不会影响匹配。

接下来我们要讲的就是更有意思伪类和伪元素了。

伪类

1.链接伪类

：link 指示作为超链接（即有一个href属性）并指向一个未访问地址的所有锚。有些链接会不正确的解释

：visited 指示作为已访问地址超链接的所有锚

例子：

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>index</title>

    <style type="text/css">

        a:link {color:blue;}

        a:visited{color:red;}

    </style>

</head>

<body>

<a href="#1">被点击过了了</a>

<a href="#2">未被点击</a>

</body>

</html>

结果：

aaarticlea/png;base64,iVBORw0KGgoAAAANSUhEUgAAAMIAAABBCAIAAAAMp+wQAAACHElEQVR4nO2X4W6DMAwGef+X3v5OJQ62c0A63amaVuY4ydeDdMePyDLH2wuQ/4AaCYAaCYAaCYAaCYAaCUCs0dH6U7IAGYKMvZmVqHaLeda2M+cr+yvlfRzXr5X6NJlxW8Xco9X1rf218364nhn67RoN78LSPYo8AIZtLwde7/heh/Lb2jbmBmnhPwI4XxyOKizkke9GDz6HSg2+IuZZ2+yc598nK9pQo+qtB92q1efjzjHP2l7Ped5NdOLcdNYMH/3JsaWalfqFNpvEvELiw/t4OzmEJ62GnTOvqM9l3vM14PXdbW0Yc4PpqRv9jFYdTgJ9zHtrNOwx/5D2jLlB/A/Rz2g3+2h0R/+V+qDBObbzDLvF3KD+FTsKpvrQnMeTGXJ5vVqzUh+MHroymWqHmBtwGpVnJjTKL+ZBjapn724xd2bJLuEyj/kNGBmQfFu92C5r1wfjqtvaIeYGOY3mp3dUE11svJ3Mm+R+jYbHSnQqDWt2iLlHUaPkjZPcX/6c/+jT+HaQD4w6Tv40S9a8HnObIHdf9eBfX9c922prJFJEjQRAjQRAjQRAjQRAjQRAjQRAjQRAjQRAjQRAjQRAjQRAjQRAjQRAjQRAjQRAjQRAjQRAjQRAjQRAjQRAjQRAjQRAjQRAjQRAjQRAjQRAjQRAjQRAjQRAjQRAjQRAjQRAjQRAjQRAjQRAjQRAjQRAjQRAjQRAjQRAjQTgF5yV+cTfUaLoAAAAAElFTkSuQmCC" alt="" />

链接伪类也适用于ID选择器,如：

a#one:link{color:yellow;}

2.动态伪类

:focus 当前拥有输入焦点的元素

:hover 指示鼠标停留元素

:active 指示被用户输入激活的元素

例子：

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>index</title>

    <style type="text/css">

        input:focus{background-color:black;}

        a:hover {background-color:yellow;}

        a:active{background-color:red;}

    </style>

</head>

<body>

<input type="text">

<a href="#6">例子</a>

</body>

</html>

无操作效果：
aaarticlea/png;base64,iVBORw0KGgoAAAANSUhEUgAAANwAAAA1CAIAAAClcxKcAAABcklEQVR4nO3bUW6CQBSGUfa/EzfnFtqXxjIgw522lj/jOSHGyFDuwxelGJcPCLNcPQBsiZI4oiSOKIkjSuI0Ud7gdruqxYdtlFfNQYhKA8ty//HeClHS+Nsol+V+uj35C6MDMbd6lEdt1d8pj1aKksZpA53+HrFWTtRZJkoa/xPlyQXA0EBMr9/A/pN6/fFdifLoOrJZUx+IdzAa5fpJMcrTGURJo9PAprl9nfsF9a05UXEg3kT9mnIdk3dKXmgoys7j6eG9NUMDMb1ilKdXlv3DT04xNBDTG7oltHlFlLzEaJSdRiuHP18zNBDT+83N886Lxb1fa4YGYnqj/+jsdx1+o13/vmdoIKbXv0/50u37RMWBeBMJDYiSRkIDoqSR0IDf6LB1VYsPfs1IHFESR5TEESVxREkcURJHlMQRJXFESRxREkeUxBElcURJHFESR5TEESVxREkcURJHlMQRJXFESRxREkeUxBElcURJHFES5xPGInnHry83FgAAAABJRU5ErkJggg==" alt="" />

文本框获得焦点效果：

aaarticlea/png;base64,iVBORw0KGgoAAAANSUhEUgAAAPEAAAA5CAIAAABoElqHAAABzUlEQVR4nO3cO27CQBhFYS81JTVSNhJRWUqqkKwBN0kVIlF6CU6JXCZKEU86j8HgGT8GzJ3z6ReybCwojqzhmRhAS3LtJwBMjKahhqahhqah5qDpvKhePg0T8+RFda0Wp2Kbzovq7uFrudoxMc8i3d961rbp9bZarnYpIpZl2ePb9/PHnyOapBx89AJONJ0gVmVZTtt0kpTOGVnwiSdQb9E0ejV9Lk3/TANd0Wkalk/THfnWrXuVF2yJQtOwLtZ00DU3TcNyNt1eZjTXHj5NB1pDHzxEvUXTGNB0c8Oz6ZHJOtE0rO6mj5Jtx92+g//QNILotZ5utsh1GjPVt+mOW+fp4dA0LP+mnavq7tODomlYfd/LO9pD05idAU13JO5zegg0DWvkZy4dOz2PToKmYQ14jdg+dK7aXp+cj0HTsJzvTwcdmsb0PL+XN3M0DUuz6c1mUyJiUk3nRbVI90/vP0zMc//6q/N7RGNMXlTrLRP13HrQhv/3gB6ahhqahhqahhqahhqahhqahhqahhqahhqahhqahhqahhqahhqahhqahhqahhqahhqahhqahhqahhqahhqahhqahhqahhqahhqahhqahhqahhqahpp/R5NyzTABi6EAAAAASUVORK5CYII=" alt="" />

鼠标在文字上停留效果：

aaarticlea/png;base64,iVBORw0KGgoAAAANSUhEUgAAAOkAAAA1CAIAAAArqVvgAAABUElEQVR4nO3ZQYoCMRRF0ex/J27OLXQPGkRMjD9WdfTBOXxEMIMaXEIqth/I1D79APAm7ZJKu6TSLqm0SyrtkmrQ7gUul/0trhq3u/85+CrTBtrftHa9fe9n/ut0qrTLwLnttnZ9OdrlHPV2nyVY33e7lVXaZeBlu5NMb02/Fa52OWZPu0/WVGmXgXm7/fHg/sxQabc742qXk6y22++4B24hqrTLwKSBhzT7iPsF9dEuR9XPu/d7sH2Xz1tqd/KpXXYrtvvy1Ktddlu6I9MuX2S13UnK2mWrI/9NaJdPWn1X67t8VmfhRFGlXQbm97v/OvWH1C4DEQ1ol4GIBrTLQEQD43Zhf4urFl7r4Ktol1TaJZV2SaVdUmmXVNollXZJpV1SaZdU2iWVdkmlXVJpl1TaJZV2SaVdUmmXVNollXZJpV1SaZdU2iWVdkmlXVL9ArI8FY7N6v2JAAAAAElFTkSuQmCC" alt="" />

鼠标在文字上按下左键时效果：

aaarticlea/png;base64,iVBORw0KGgoAAAANSUhEUgAAAOcAAAA1CAIAAAA1YGtTAAAAyUlEQVR4nO3bsQ2AMBAEQfffiauE0CJBECCz0oy+gA82vXFAzdj9ALymWnpUS49q6VEtPavaCXNubPG5S7Ub/+AP7hoY49t7Q7UsqqVHtfSolh7V0qNaelRLj2rpUS09qqVHtfSolh7V0qNaelRLj2rpqTSgWpZKA6plqTRgN8bFxhafs9GlR7X0qJYe1dKjWnpUS49q6VEtPaqlR7X0qJYe1dKjWnpUS49q6VEtPaqlR7X0qJYe1dKjWnpUS49q6VEtPaqlR7X0nA0mco/2NQF7AAAAAElFTkSuQmCC" alt="" />

伪元素

1.设置首字母样式

如将元素中第一个字母变成红色:

p:first-letter{color:red;}

效果：

aaarticlea/png;base64,iVBORw0KGgoAAAANSUhEUgAAAFIAAAAcCAIAAAB9HH/QAAAAwUlEQVRYhe2WSw6AMAgFuf+ldWVjCo8A/Rlh4sLS2teJxEhXSuj0Ac5Q2pko7UyUdiaYNpFwjQRIjxORWN+GpI1uvFs/oCn9wVioEbz7pGCvQFu/1Py72kvxafO+bUPU0mIFrXwzmKvj0O5S+Qn4FB8G6rFcnUiTuzzHtWO5OpEmv/AbsJ/GVQ/k6sxpciV+aZNbNpRT8AyM39zksVwdsBT8n3Xfz3bTnaybEj/C9ro3d0D775R2Jko7E6WdidLOxA2uzw5Sud2cEAAAAABJRU5ErkJggg==" alt="" />

2.设置第一行的样式

如：

p:first-line{color:red;}

效果：

aaarticlea/png;base64,iVBORw0KGgoAAAANSUhEUgAAAPQAAAA2CAIAAAB/bSMWAAABcUlEQVR4nO3W0XKCMBRF0fz/T7dPdcaQCDFR4HSt6YNeC2GGjab8QKhy9gXAp4ibWOImlriJJW5iiZtY4iaWuIklbmKJm1jiJtZz3KU0/qZO3zp8/rRwwCbu3ovhE/efjddxS59FOhmtymv0PPMPFfy5atwwbSTu7U7j8ba3CWlOev/Z2+iPrts7lfm95tMOx11dTXVlvQN713p8Prpu7wLM7zVfYXxbMlTzfNyj665a0fzc+Qrj25Lq0y/EPbpu7zfO/F7zaSu2By8OnI/7vXXNw+ZvGY+sesK+FvfBdc0z5iv0twHNzkppvKj6qz7aRjk0P2td83PnKyw+HVyHuIklbmKJm1jiJpa4iSVuYombWOImlriJJW5iNeIuz+LnpKrvcXXXH29T5wTbiTt+TrCdbcl/mJNq5zZf7YvWFznH2XMTqxF38+c7dU4wt5lY4iaWuIklbmKJm1jiJpa4iSVuYombWOImlriJJW5iiZtYvwygUsDaKtuSAAAAAElFTkSuQmCC" alt="" />

3.设置之前和之后元素的样式

如：

h2:before{content:"<<";color:blue;}

h2:after{content:">>";color:red;}

效果：

aaarticlea/png;base64,iVBORw0KGgoAAAANSUhEUgAAAHQAAAA2CAIAAACZaCoXAAAFcklEQVR4nO2ZLZurOhCA519EIisrkUgkEhmJROYnREYikZFIZGRkJBIZGRk5VwD9AArcsze7e+6TV20pTcnbZGYyCxgJBvz0A/yfiXIDEuUGJMoNSJQbkCg3IFFuQKLcgES5AYlyAxLlBiTKDUiUG5AoNyBRbkCi3IBEuQH56+TavqZ125nR+cc1zdOiYm2nR3/wye/nO+W6oW+qPGfKobN25cGO9toomgMAZM2wvlS048twSpQ51+7LD/0VAsr1um36wS1Sb7c0KyomGtnrsecASUprMVEXCQDJmFrJ8FbLRrxT5QAA95J9vlQXCUykVT+Gm+EZF+SOSDOU48ldmmMu0L9fAgDIhLbO+fXdAADANSIiWlkAADC1O7J///S8TKU9vLSdhcSU4sksRqTp+VQvcyZ3xJJgKU/u0hwhRb1rcHfOu3LnVxvcoIenX83JLa+aecd7j4imoXUj9TrSrJElkhKHw7tGiYRgOxzdc5kjuX64ZFYxhBR3wttGrhuH+W/NprdGRDyV6zVPAZKCd8PqS1xHIclraa7GVlkiydFc8CvMxSEP+CjXG8wvmO2rD2ZxkbuEwrq8EQCSce1wnGzWaprliVxENCIFAICqd970Uo0OEXFscwAgVfeyN6xZ/wIrZIkk2+yydya/B89zjX25XmNGsGzxeKN1FCHFdRZ68DEsuL6aTU2vn3K9NUopsw0kXjECQKp+6CgQpjyi1/wOAJBXj8zGaEYASNke7X2Pbfl5RSwMLRL4ot8duU5jCudmZXloFj/LtbIAIOUzcXgjMgJPknKbVLw1anA4tvns1soC7lwwki8lmFc1gfeRP7D4PXr6xe+HNHuFtVynMIVN3v/wbCdlzr7cUZYkKZpt3HtG5Ocl3Yq2M89MZcQdCNezyEJar/mdVL1D9IanAJDy4x3/nIPIz+dgBBLAqr8y4pY3uWN/yeyVp0LckWt139SUUlrzVfG6bOhNqTvKkgDA9Gt4xQgQrtFrdl/S4bSCtRbppUW7mUmC3eFnJr+0uz7ug6dcbzAFhBKPT0odRbgYi1YJrUjgEQ+NuEP+cqIyYgqfzbYGmmoFINy4jgIQrp3mafpy+hqaKdvd6uNtvoPFEhCSk/wmy8tzfuNt5f6XMQGPa3vNCdwf5c7slna7crzppJnCLRCu3ajUM2E5zVOAlAmWESA5V2fV7utMvm3lzl9oMCdnfpcK7I9i7uNNAlOwfCQipo5yvOZ3mOLtAze0NJmrO0S0PZtiC236YX0m3Iz33TF3ZjqVnVUL06nsX1cL3tlBGzuv1rswc7X6FiW2TNXai1urRJFAUgj1NrwzLb1PlQe5ZRlljdr5bX+oWpgZsUrP/RqB5EKdO7rRqK5lVZmXlZBqXlVWFgB3zhkBgJTvHpusUXqwbpjSGtTKo7e6rYuizO8AQDLKNnmRpFRIKao853vP9qN17oxDnp2f0EaJyfo5nW5ZVWS3pXRN0qkDu7G3nLsO6yer22q+req07tXUyp0PHqt9Mfcs2IGTHz+hzXhsy3O/TmH67tdrlt5Kwelhs8oZkZOlM3icVKZWxNv5+FDuRy2/pLfwoK/O/XqD+XY1HCQ0p0WRACS0G+dKlmSs/1QEziK/KvdXdcUeaH7h60akbK+fu5ZrdVtnBEhWy6XFMvsFSAq+1zmcF+6e3Lem+dI235P7G/u5X2GSS/i8wbzVbZ0nSUp3DDrTlI8gTdLiNU54zZK3kRD/NCx8LwHlur7Oq6YzFkclOOON7HeS2iveDUo2TOzUntasPms7mtG6XZ0ZprZ5f9J1/C7+uv/+/k1EuQGJcgMS5QYkyg1IlBuQKDcgUW5AotyARLkBiXIDEuUGJMoNSJQbkH8Awe0TP0GXlrQAAAAASUVORK5CYII=" alt="" />

第一次写博客，免不了诸多错误，仅作为个人学习笔记。作为一名在校学生，希望大家多多指教。

码农公寓

相关文章