曲径通幽论坛

标题: 选择器 [打印本页]
作者: beyes    时间: 2015-12-23 01:14
标题: 选择器
选择器就是要告诉 CSS 作用于哪个元素之上，可以分为下面几类：


针对 HTML 标签的选择器。


针对 class 的选择器。


针对 ID 的选择器。


该样式和某个有关联的。比如某个 <p> 里头有个 <span> ，那么该 <span> 就是和这个 <p> 有关联的（父子关系），特定的 css 也就作用在该 <span> 上，而不是其它地方的 <span> 。


把多个标签定义成一种样式。这里又包含 3 种：1 多元素选择器；2. 子元素选择器； 3. 后代选择器


对一个标签的不同状态定义不同的样式。比如一个超链接，有鼠标悬停其上，离开，点击等不同的状态，那么可以针对这些状态分别定义不同的样式。

简单的说，选择器就是在 CSS 中创建，然后在网页页面中使用，这些网页页面可以是 html, php, jsp, asp.net 等。

下面以实例来说明上述概念。

HTML 选择器演示：
  1. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
  2. <html>
  3. <head>
  4. <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
  5. <title>选择器</title>

  7. <style>
  8.         div { font-size:20px; border:solid 1px #FF0000;  margin-bottom:20px; }
  9.         body { background-color:#B7AAAA; }
  10. </style>

  12. </head>

  14. <body>

  16.         <div>
  17.             曲径通幽
  18.     </div>

  20.     <div>
  21.             http://www.groad.net
  22.     </div>

  24. </body>
  25. </html>
复制代码

上面代码针对 <div> 和 <body>两个 html 元素进行 css 描述，如下图所示：
[attach]4248[/attach]



class 选择器演示：
  1. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
  2. <html>
  3. <head>
  4. <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
  5. <title>选择器</title>

  7. <style>
  8.         .groad { background-color:#BBEAF0; }
  9. </style>

  11. </head>

  13. <body>

  15.         <div class="groad">
  16.             曲径通幽
  17.     </div>

  19.     <div>
  20.             http://www.groad.net
  21.     </div>

  23. </body>
  24. </html>
复制代码

上面代码中，.groad 就是 class 选择器，注意它以 . 符号开始。我先定义了一个名为 .groad 的 class 。在第 1 个 div 中，通过 class="groad" 声明它使用该样式（注意，此处不能再写上 . 这个符号），如果你愿意，第 2 个 div 同样可以使用该样式。注意，用了 class 后，就不能再在其后继续写样式的语句了。

ID 选择器演示：

id 是标识网页唯一元素的一个属性。网页中的 id 是不能同时存在多个的，虽然在 CSS 的测试应用中，也有效果，但实际使用中是不能这么做的，特别是和 js 脚本结合起来时，如果存在多个相同的 id，脚本都不知道处理哪个好，这样势必会出错。

class 的样式名字以 . 开头，而 id 的名字要以 # 符号开头。查看下面代码：

  1. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
  2. <html>
  3. <head>
  4. <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
  5. <title>选择器</title>

  7. <style>
  8.         #groad { background-color:#BBEAF0; }
  9. </style>

  11. </head>

  13. <body>

  15.         <div id="groad">
  16.             曲径通幽
  17.     </div>
  18.    
  19.     <div>
  20.             http://www.groad.net
  21.     </div>

  23. </body>
  24. </html>
复制代码


关联选择器演示：
  1. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
  2. <html>
  3. <head>
  4. <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
  5. <title>选择器</title>

  7. <style>
  8.         .groad p{ font-size:35px; }
  9. </style>

  11. </head>

  13. <body>

  15.         <p>
  16.             曲径通幽
  17.     </p>
  18.    
  19.         <div class="groad">
  20.             <p>
  21.                 在 div 里的曲径通幽
  22.          </p>
  23.         </div>

  25. </body>
  26. </html>
复制代码

效果：
[attach]4249[/attach]

用关联选择器的方便之处：

比如将上面的 css 代码改为：
  1. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
  2. <html>
  3. <head>
  4. <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
  5. <title>选择器</title>

  7. <style>
  8.         .groad { font-size:35px; }
  9. </style>

  11. </head>

  13. <body>

  15.         <p>
  16.             曲径通幽
  17.     </p>
  18.    
  19.         <div>
  20.             <p class="groad">
  21.                 在 div 里的曲径通幽
  22.          </p>
  23.         </div>

  25. </body>
  26. </html>
复制代码

有人说，我不用作用于 p 标签，而是直接像上头那样直接使用 class="groad" 不也可以吗？ 确实可以，但是如果这样的 <p> 标签有许多条，而且都打算用 groad 这个样式，那岂不是要每条都要这么写？但如果样式里写成 .groad p { font-size:35px; }，那么就能应用所有该 <div> 底下的 <p> 标签了。看下面代码演示：
  1. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
  2. <html>
  3. <head>
  4. <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
  5. <title>选择器</title>

  7. <style>
  8.         .groad p{ font-size:35px; color:#F70D11; }
  9. </style>

  11. </head>

  13. <body>

  15.         <p>
  16.             曲径通幽
  17.     </p>
  18.    
  19.         <div class="groad" >
  20.             <p>
  21.                 曲径通幽-1
  22.          </p>
  23.          
  24.          <p>
  25.                 曲径通幽-2
  26.          </p>
  27.          <p>
  28.                 曲径通幽-3
  29.          </p>
  30.          
  31.          <h1>hello</h1>
  32.         </div>

  34. </body>
  35. </html>
复制代码

效果：
[attach]4250[/attach]
注意，hello 并没有被加红。


组合选择器演示：

组合型选择器使用逗号分隔，如下代码所示：
  1. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
  2. <html>
  3. <head>
  4. <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
  5. <title>选择器</title>

  7. <style>
  8.         div,p{ font-size:35px; color:#F70D11; }
  9. </style>

  11. </head>

  13. <body>

  15.         <p>
  16.             曲径通幽
  17.     </p>
  18.    
  19.         <div>
  20.             http://www.groad.net
  21.     </div>

  23. </body>
  24. </html>
复制代码

效果：
[attach]4251[/attach]
在 <style> 标签里，div 和 p 是用逗号隔开的。像 class 和 html 这样的标签也是可以的，如 .groad, p { font-size:35px; color:#F70D11; } ，此时注意，class 的名字前面有个点。

再看一个例子，这里使用了组合选择器和关联选择器：
  1. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
  2. <html>
  3. <head>
  4. <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
  5. <title>选择器</title>

  7. <style>
  8.         .k1,.k2{ font-size:25px;}
  9.         .k1 a { color:#F00;}
  10.         .k2 a { color:#30C;}
  11. </style>

  13. </head>

  15. <body>
  16.         <div class="k1">
  17.             <a href="#">块1中的链接-1</a>
  18.         <br>
  19.         <a href="#">块1中的链接-2</a>
  20.      </div>
  21.      
  22.      <hr>
  23.      
  24.      <div class="k2">
  25.              <a href="#">块2中的链接-1</a>
  26.         <br>
  27.         <a href="#">块2中的链接-2</a>
  28.      </div>
  29.      
  30. </body>
  31. </html>
复制代码

效果：
[attach]4252[/attach]

这里，.k1 和 .k2 使用了组合选择器，只要使用一条语句，就能将两个块中的字体大小定义成一样的。使用关联选择器分别对两个 div 中的链接定义了不同的颜色。

伪元素选择器演示：
  1. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
  2. <html>
  3. <head>
  4. <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
  5. <title>选择器</title>

  7. <style>
  8.         .k1,.k2{ font-size:25px;}
  9.         .k1 a { color:#F00; text-decoration:none;}
  10.         .k1 a:hover {color:#2540DD; background-color:#DAE43C}
  11.         .k2 a { color:#30C;}
  12. </style>

  14. </head>

  16. <body>
  17.         <div class="k1">
  18.             <a href="#">块1中的链接-1</a>
  19.         <br>
  20.         <a href="#">块1中的链接-2</a>
  21.      </div>
  22.      
  23.      <hr>
  24.      
  25.      <div class="k2">
  26.              <a href="#">块2中的链接-1</a>
  27.         <br>
  28.         <a href="#">块2中的链接-2</a>
  29.      </div>
  30.      
  31. </body>
  32. </html>
复制代码

上面说过，伪元素选择器就是对一个标签的不同状态进行描述。在 k1 的两个链接中，通过 .k1 a:hover 定义了只要鼠标悬停在链接上，就会有字体是蓝色，而背景是黄色的效果。另外， text-decoration:none 表示不加文本修饰，这里的目的是去掉超链接的下划线。超链接的下划线是默认添加的，但现在一般都不这么用，因为超链接多起来后，都添加上下划线看起来很难看。
作者: beyes    时间: 2016-12-18 02:04
标题: id 选择器的优先级要高于类选择器
一个元素可以同时有 id 选择器和类选择器，其中 id 选择器的优先级要高于类选择器。

考察下面代码：
[HTML] 纯文本查看 复制代码
<!DOCTYPE html>

<html>

 <head>

  <meta charset="utf-8">

  <title> id选择器 和 类选择器的优先级演示 </title>

 

  <style type="text/css">

  

          .p1 {

                          color:red;

          }

          #p2 {

                  color:blue;

          }

          

  </style>

 </head>

 <body>

          

                  <p class="p1" id="p2">曲径通幽</p>

  

 </body>

</html>

结果 “曲径通幽” 这几个字为蓝色显示，而不论 #p2 是否放在 .p1 之前或之后，因此说 id 选择器的优先级要高于类选择器 。




欢迎光临 曲径通幽论坛 (http://www.groad.net/bbs/) Powered by Discuz! X3.2