CSS选择符

最新推荐文章于 2024-07-23 14:51:29 发布

FG2006

最新推荐文章于 2024-07-23 14:51:29 发布

阅读量2.3k

点赞数

分类专栏： HTML 文章标签： css class 文档测试 html xml

HTML 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

原创作品，允许转载，转载时请务必以超链接形式标明文章原始出处、作者信息和本声明。否则将追究法律责任。 http://suxiangjuner.blog.51cto.com/353064/283475

CSS学习系列二:CSS选择符

选择符的脚本语法: 选择符名{样式属性:属性值;样式属性:属性值;..........}

选择符名:选择符的名称,在HTML中文档的标签是通过匹配该选择符来加载样式的

{}:选择符后面，整个括号里面的内容都是选择符的声明;括号里面的内容为规则(rule)的集合.一个声明可以有多条规则每个规则用;分开

规则:一个规则是二部分组成,一部分是样式属性,如表示颜色的color。表示字体的font等另外一部分是样式属性的值.

类型选择符

类型选择符(Type Selectors)是以文档中的对象(Element)名为选择符号名,因此型号选择符可以使一个元素原来的颜色转换为另外一个样式.类型选择符的语法代码如下:

E{ 样式属性:属性名称;样式属性:属性名称;.........}

其中E为文档中的元素,如果该文档时XML文档,则E为XML文档中所声明的元素;如果该文档时HTML文档,则E为HTML的元素,则E为HTMl的的元素如p h1 hr img.

  
  <html> 
  <head> 
    <title>CSS学习系列一 CSS的使用(内联样式)</title> 
    <link href="" type="text/css" rel="stylesheet"/> 
    <style type="text/css"> 
   <!--  
    p {font-weight: bold;}  
    a {text-decoration: none;}  
    td {color: green;}  
    
   --> 
    </style> 
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> 
   </head> 
   <body> 
       <p>这是一个测试页面</p> 
       <a href=""></a> 
       <table border="1"> 
           <Tr> 
               <td>这是一个单元格</td> 
               <td>这是另外一个单元格</td> 
           </Tr> 
       </table> 
       <ul> 
           <li>列表项一</li> 
           <li>列表项二</li> 
       </ul> 
  </body> 
 
</html>

类选择符

类选择符可以与元素配合使用,当类选择符与元素(Element)配合时的时候,类选择符的语法如下:

E.classname{ 样式属性:属性值;样式属性:属性值;.............}

其中E是元素名称 class是标签使用的选择符所用的名称.只要E元素才能选择是否使用class样式

注意:E.classname中.是要连接在一起不然是没有作用

\其中E是元素名

  
  <html> 
  <head> 
    <title>类选择符</title> 
    <link href="" type="text/css" rel="stylesheet"/> 
    <style type="text/css"> 
   <!--  
      a.red{color: red;}  
      a.green{color: green}  
      td {color: red;}  
      td.green{color: green;}  
   --> 
    </style> 
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> 
   </head> 
   <body> 
       <a href="">这是一个使用没有样式的超级链接</a> 
       <a href="#" class="red">这是一个class属性值为red的超级链接</a><br><br> 
       <a href="#" class="green">则是一个class属性值为green的超级链接</a><br><br> 
       <a href="" class="black">这是一个引用不存在的样式超级链接</a><br><br> 
       <table border="1"> 
           <tr> 
               <td>这是一个单元格</td> 
               <td class="green">这是一个class属性green的单元格</td> 
           </tr> 
       </table> 
  </body> 
 
</html>

独立于元素的类选择符

类选择符可以和元素配合使用,也可以独立于元素使用,当类选择符独立于元素的使用时,类选择符的语法代码

.classname{样式属性:属性值;样式属性:属性值;..........}

  
   
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> 
<html> 
  <head> 
    <title>类选择符</title> 
    <link href="" type="text/css" rel="stylesheet"/> 
    <style type="text/css"> 
   <!--  
      .red{color: red;}  
      .green{color: green}  
     a.blod{font-weight: bolder;}  
   --> 
    </style> 
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> 
   </head> 
   <body> 
       <a href="red">这是一个使用没有样式的超级链接</a> 
       <a href="#" class="red">这是一个class属性值为red的超级链接</a><br><br> 
       <a href="#" class="green">则是一个class属性值为green的超级链接</a><br><br> 
       <a href="" class="blod">则是一个class属性值为blod的超级链接</a><br><br> 
       <table border="1"> 
           <tr> 
               <td class="red">这是一个class属性red的单元格</td> 
           </tr> 
            <tr> 
               <td class="green">这是一个class属性green的单元格</td> 
           </tr> 
            <tr> 
               <td class="blod">这是一个class属性blod的单元格</td> 
            </tr> 
       </table> 
  </body> 
 
</html>

ID选择符

ID选择符(ID Selector)的使用和类型选择符和类选择符都有点相似,

  
   
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> 
<html> 
  <head> 
    <title>ID选择符</title> 
    <link href="" type="text/css" rel="stylesheet"/> 
    <style type="text/css"> 
      #myclass{color: red;}  
    </style> 
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> 
   </head> 
   <body> 
       <a href="" id="myclass">这是一个超级链接</a><br><br> 
       <a href="" id="yourclass">这是另外一个超级链接</a> 
  </body> 
 
</html>

包含选择符

如果一个标签包含另外一个标签,那么这个标签就是另外一个标签元素的父元素,

  
   
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> 
<html> 
  <head> 
    <title>包含选择符</title> 
    <link href="" type="text/css" rel="stylesheet"/> 
    <style type="text/css"> 
     p a{font-weight: bold;}  
     li{color: red;}  
     ol li{color: green;}  
     table tr td table tr td {text-decoration: line-through;}  
    </style> 
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> 
   </head> 
   <body> 
       <p>这是一个测试网页,<a href="#">这是一个超级链接</a></p> 
       <a href="">这是另外一个超级链接</a> 
       <table border="1"> 
           <tr> 
               <td>这是一个单元格</td> 
               <td> 
                   <table border="2"> 
                       <tr> 
                           <td>这是另外一个表格的单元格</td> 
                       </tr> 
                   </table> 
               </td> 
           </tr> 
 
       </table> 
       <ul> 
           <li>无序列表一</li> 
           <li>无序列表二</li> 
           <li>无序列表三  
               <ol> 
                   <li>有序列表一</li> 
                   <li>有序列表二</li> 
               </ol> 
           </li> 
        </ul> 
  </body> 
 
</html>

选择符分组

在一个HTML文档中,有可以一个或者多个标签使用同一个样式,例如所有的标题都使用下划线这个样式。

采用分组的方式为:

E1,E2,E3,..{样式属性:属性值;}

  
   
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> 
<html> 
  <head> 
    <title>选择符分组</title> 
    <link href="" type="text/css" rel="stylesheet"/> 
    <style type="text/css"> 
    <!--  
     h1, h2, h3,h4{ color: red;}  
    --> 
    </style> 
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> 
   </head> 
   <body> 
       <h1>标题一</h1> 
       <h2>标题二</h2> 
       <h3>标题三</h3> 
       <h4>标题四</h4> 
  </body> 
 
</html>

通用选择符

*{样式属性:属性值;样式属性:属性值;.........}

  
   
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> 
<html> 
  <head> 
    <title>选择符分组</title> 
    <link href="" type="text/css" rel="stylesheet"/> 
    <style type="text/css"> 
    <!--  
     h1, h2, h3,h4{ color: red;}  
    --> 
    </style> 
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> 
   </head> 
   <body> 
       <h1>标题一</h1> 
       <h2>标题二</h2> 
       <h3>标题三</h3> 
       <h4>标题四</h4> 
  </body> 
 
</html>

以上的通用选择符很少用大多数情况是让某一个标签下的所有标签都使用一个样式,此时的通用选择符

E * {样式属性:属性值;样式属性:属性值;.........}

  
   
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> 
<html> 
  <head> 
    <title>通用选择符</title> 
    <link href="" type="text/css" rel="stylesheet"/> 
    <style type="text/css"> 
    <!--  
     div *{text-decoration: line-through;}  
    --> 
    </style> 
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> 
   </head> 
   <body> 
       <p>这是一个测试网页</p> 
       <div>这是一个测试网页,<P>这是一个超级链接</p>这是一个测试网页,<b>这是b标签里面的文字</b></div> 
        
  </body> 
 
</html>

子选择符

从某种程度上来说,子选择符 (child Selectors)与包含选择符很像，但鼻血是从父级标签指定字标签,其语法

E1 > E2 {样式属性:属性值;样式属性:属性值;.........}

其中E1 为E2的父标签

  
   
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> 
<html> 
  <head> 
    <title>子选择符</title> 
    <link href="" type="text/css" rel="stylesheet"/> 
    <style type="text/css"> 
    <!--  
     p > a {font-style: italic;color: red;}  
     div >  p  >  b {text-decoration: line-through;}  
    --> 
    </style> 
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> 
   </head> 
   <body> 
       <p>这是一个测试网页<a href="#">这是一个链接链接</a></p> 
       <div>这是一个div,  
           <p>从这里开始换行  
               <b>这是b标签里面的文字</b> 
            从这里换行结束  
           </p> 
           这是另外一段  
       </div> 
        
  </body> 
 
</html>

Note:IE不支持子选择符其他的3大浏览器都支持

相邻选择符

该选择符作用在一个兄弟标签,但自能作用在相邻的二个兄弟标签之间,其语言代码

E1 + E2 {样式属性:属性值;样式属性:属性值;...........}

其中E2为紧跟在E1之后的兄弟标签,并且样式只能作用在E2上,而不能作用在E1上,

本文出自 “38°仰望” 博客，请务必保留此出处http://suxiangjuner.blog.51cto.com/353064/283475

FG2006

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
CSS选择符

原创作品，允许转载，转载时请务必以超链接形式标明文章原始出处、作者信息和本声明。否则将追究法律责任。http://suxiangjuner.blog.51cto.com/353064/283475CSS学习系列二:CSS选择符选择符的脚本语法: 选择符名{样式属性:属性值;样式属性:属性值;..........}选择符名:选择符的名称,在HTML中文档的标签是
复制链接

扫一扫

专栏目录