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

一、元素选择器

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="" />

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

CSS学习笔记(1):选择器的更多相关文章

CSS学习笔记之选择器
目录 1.元素选择器 2.继承 3.选择器分组 4.声明分组 5.后代选择器 6.子元素选择器 7.相邻兄弟选择器 8.类选择器 9.ID 选择器 10.属性选择器 11.伪类 12.伪元素 1.元素 ...
CSS学习笔记之基本介绍
1.简介层叠样式表(Cascading Style Sheets,CSS)允许我们把样式设置存储在文件中,从而将内容与表现分离当同一个 HTML 元素被不只一个样式定义时,最终的样式确定顺序如下( ...
CSS学习笔记
CSS学习笔记 2016年12月15日整理 CSS基础 Chapter1 在console输入escape("宋体") ENTER 就会出现unicode编码显示"%u ...
HTML+CSS学习笔记 (6) - 开始学习CSS
HTML+CSS学习笔记 (6) - 开始学习CSS 认识CSS样式 CSS全称为"层叠样式表 (Cascading Style Sheets)",它主要是用于定义HTML内容在浏 ...
CSS学习笔记08 浮动
从CSS学习笔记05 display属性一文中,我们知道div是块元素,会独占一行,即使div的宽度很小,像下面这样应用display属性的inline属性可以让div与div共享一行,除了这种方法 ...
JQuery学习笔记——层级选择器
JQuery学习笔记--层级选择器上一篇学习了基础的五种选择,分别是id选择器,class选择器,element选择器,*选择器和并列选择器.根据手册大纲,这篇学习的是层级选择器. 选择器: 1 ...
2022-07-10 第五小组 pan小堂 css学习笔记
css学习笔记什么是 CSS? CSS 指的是层叠样式表* (Cascading Style Sheets) CSS 描述了如何在屏幕.纸张或其他媒体上显示 HTML 元素 CSS 节省了大量工作. ...
HTML+CSS学习笔记 (7) - CSS样式基本知识
HTML+CSS学习笔记 (7) - CSS样式基本知识内联式css样式,直接写在现有的HTML标签中 CSS样式可以写在哪些地方呢?从CSS 样式代码插入的形式来看基本可以分为以下3种:内联式.嵌 ...
HTML+CSS学习笔记（5）- 与浏览者交互，表单标签
HTML+CSS学习笔记(5)- 与浏览者交互,表单标签 1.使用表单标签,与用户交互网站怎样与用户进行交互?答案是使用HTML表单(form).表单是可以把浏览者输入的数据传送到服务器端,这样服务 ...

随机推荐

Photoshop 批量处理图片
不论什么你想反复进行的操作都能够通过创建 Photoshop 批处理程序来完毕.比如.你想批量改变图片的大小,就能够通过下面操作来实现. 1.打开随意一张图片,在动作面板中,点击新建button 2. ...
ios8加入通知栏开始
ios8加入通知栏开始 by 吴雪莹以打开vpn设置为例: @IBAction func open(sender: AnyObject) { let context = self.extension ...
【贪心】【Uva11729】 Commando War
你有n个部下,每个部下需要完成一项任务.第i个部下需要你花Bi分钟交待任务,然后他会立刻独立地.无间断地执行Ji分钟后完成任务.你需要选择交待任务的顺序,使得所有任务尽早执行完毕(即最后一个执行完的任 ...
Jvm垃圾回收堆内存变化过程
当Eden区域满时,触发minor GC,垃圾收集器把Eden区域中的不可达对象标记出来.第一次执行minor GC时Survivor 1与Survivor 2均为空: Eden中的不可达对象占用的内 ...
Android图片下载到本地，系统图库不显示
可能大家都知道我们下载图片到Android手机的时候,然后调用系统图库打开图片,提示"找不到指定项". 那是因为我们插入的图片还没有更新的缘故,所以只要将图片插入系统图库,之后发条 ...
php variance
function variance ($a) { /** variable and initializations */ $the_variance = 0.0; $the_mean = 0.0; $ ...
python版去UTF-8 BOM
今天给app弄银联支付接口.直接copy银联的sdk.结果.安卓和ios始终报json格式错误.找了半天.都没找到问题.最后怀疑可能是BOM破坏了json的数据格式转换.验证后确认是BOM的问题.为方 ...
MVC模式下如何对多选框数据进行增删改查
一.业务情景: 做的是一个项目管理的增删改查模块,一个项目里面有项目成员属性,而且一个项目可以有多个成员,一个成员可以参加多个项目,多对多关系,数据库表里自然要建立一个关系表. 视图二.视 ...
python3.4下遍历文件目录，不需要再特殊处理中文编码
python3.4下遍历文件目录,不需要再特殊处理中文编码直接使用os.walk来遍历中文目录. os.walk方法返回的是一个三元 tupple(dirpath, dirnames, filena ...
Android动画的深入分析
一.AnimationDrawable的使用详见:Drawable类及XMLDrawable的使用补充:通过Animation的setAnimationListener()可以给View动画添加监 ...

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

CSS学习笔记(1):选择器的更多相关文章

随机推荐

热门专题