<!--
 css样式选择器
     HTML选择器
     类选择器
     ID选择器
     关联选择器
     组合选择器
     伪元素选择器

 selector{                    /* selector是样式选择器
     property:value;          /* color：red;
     property:value;          /*  font-size:4cm;
     .....
     }

 selector当定义一条样式规则时，必须指定受这条样式规则作用的网页元素，在一条规则中定义的网页元素就是selector（选择器），也就是选择该样式规则作用于的网页元素。

 -->
 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
 <html xmlns="http://www.w3.org/1999/xhtml">
 <head>
 <meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
 <title>css样式选择器</title>
 <!--HTML选择器-->
 <style>
     p{
     color:#000000;
     font-size:2cm;
     }
 </style>

 <!--类选择器
 同一个选择器能有不同的类，因而允许同一个元素有不同的样式
 定义方法
     [tag].类名（类名是自定义的，如果不加则代表所有HTML元素）
     <tag class="类名1 类名2 类名3">
 -->
 <style>
     p.cl1{
     color:#0000CC;
     font-size:2cm;
     }
     p.cl2{
     color:#00FF00;
     font-size:3cm;
     }
     .cl3{
     color:#FF00FF;
     font-size:4cm;
     }
 </style>

 <!--
 ID选择器
 在HTMl页面中，ID属性指定了某个单一元素，ID属性就是用来对单一元素定义单独样式
 一个HTML页面中。ID属性值要唯一
 定义方法
     #idname{ }
 用：<tag id="idname">

 -->
 <style>
     #id1{
     color:#0000FF;
     font-size:2cm;
     }
 </style>
 <!--关联选择器
 关联选择器只不过是一个用空格隔开的两个或更多的单一选择器组成的字符串

 必须按关联关系使用，不能有反顺序

 只要能保持关联关系可以，不管是在多少层

 -->
 <style>
     div #id1 .cl1 p{
     color:#0000FF;
     font-size:2cm;}
 </style>

 <!--组合选择器
 为了减少样式表的重复声明，组合是允许的
 只要使用英文逗号（,）隔开每个选择符

 -->
 <style>
     p,d,div{
     background-color:#0033FF;
     }
 </style>

 <!--
 伪元素选择器是指对同一个HTML元素在不同的状态下的一种定义状态
 目前只有a和p两个HTML元素可以使用
 使用时的语法
     标签:伪元素
     例：a:link            a标签在没有任何运作前的状态
         a：hover          光标移动到超链接的状态
         a:active          选择超链接的状态
         a:visited         访问过超链接的状态
         p:first-letter    一个段落中首个字母的状态
         p:first-line      一个段落中首行的状态

 -->
 <style>
     a.one:link{
         color:green;
         font-size:1cm;
     }
     a.one:hover{
         color:red;
         font-size:2cm;
     }
     a.one:active{
         color:blue;
         font-size:3cm;
     }
     a.one:visited{
     color:yelow;
     font-size:5cm;
     }

     a.two:link{
         color:yellow;
         font-size:1cm;
     }
     a.two:hover{
         color:green;
         font-size:2cm;
     }
     a.two:active{
         color:red;
         font-size:3cm;
     }
     a.two:visited{
     color:blue;
     font-size:5cm;
     }
     p:first-letter{
     color:red;
     font-size:3cm;
     }
     p:first-line{
     color:yellow;
     font-size:1cm;
     }
 </style>
 </head>

 <body>
     <p>
 1111111111111111111111111111111111111111111111111<br />                        1111111111111111111111111111111111111111111111111<br />
 1111111111111111111111111111111111111111111111111</p><br />
     <b class="cl1">aaaaaaaaaa</b><br />
     <b class="cl2">bbbbbbbbbb</b><br />
     <b class="cl3">cccccccccc</b><br />
     <b class="cl1">dddddddddd</b><br />
     <b class="cl2">eeeeeeeeee</b><br />
     <b class="cl3">hhhhhhhhhhhhhh</b><br />
     <b id="id1">ddddddddddddddd</b><br />
     <div>
         <div id="id1">
             <div class="cl1">
                 <p>wwwwwwwwwwww</p>
             </div>
         </div>
     </div>
     <a class="one" href="../1/11.html">1.html</a><br />
     <a class="two" href="../2/21.html">2.html</a>
 </body>
 </html>

CSS样式选择器的更多相关文章

  1. JS实战 · 仿css样式选择器

    代码如下: <html> <head>     <meta http-equiv="Content-Type" content="text/ ...

  2. CSS样式选择器优先级

    CSS样式选择器分为4个等级,a.b.c.d,可以以这四种等级为依据确定CSS选择器的优先级. 1.如果样式是行内样式(通过Style=””定义),那么a=12.b为ID选择器的总数3.c为Class ...

  3. 前端基础：CSS样式选择器

    前端基础:CSS样式选择器 CSS概述 CSS是Cascading Style Sheets的简称,中文意思是:层叠样式表,对html标签的渲染和布局.CSS规则由两个主要的部分组成:1.选择器:2. ...

  4. Web前端新人之CSS样式选择器

    最近在学习css样式.那么我就想先整理一下css样式的选择器 规则结构: 每个规则都有两个基本部分:选择器和声明块.声明块由一个或者多个声明组成,每个声明则是一个属性—值对(property-valu ...

  5. css样式——选择器（三）

    https://www.cnblogs.com/haiyan123/p/7552235.html 1.怎么找到标签 2.如何操作标签的对象 一.css概述 CSS是Cascading Style Sh ...

  6. html添加css——样式选择器

    如何给html添加样式.两种方法: 一.新建立一个css样式表,与原html同目录,然后通过link标签链接.如:<link type="text/css" rel=&quo ...

  7. 一个页面弄懂 CSS 样式选择器

    <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/ ...

  8. 玩转css样式选择器----利用padding实现元素等比缩放

  9. 玩转css样式选择器----当父元素只有一个子元素时居中显示，多个水平排列

随机推荐

  1. ARM流水线关键技术分析与代码优化

    引 言    流水线技术通 过多个功能部件并行工作来缩短程序执行时间,提高处理器核的效率和吞吐率,从而成为微处理器设计中最为重要的技术之一.ARM7处理器核使用了典型三级流 水线的冯·诺伊曼结构,AR ...

  2. web页面动态加载UserControl，并调用用户控件中的方法来初始化控件

    1,HTML页 头部注册: <%@ Register Src="~/WorkLog/WorkLogNewV1/UserControl/CeShiBu.ascx" TagPre ...

  3. E-Eating Together(POJ 3670)

    Eating Together Time Limit: 1000MS   Memory Limit: 65536K Total Submissions: 5579   Accepted: 2713 D ...

  4. mvc+ef+oracle环境中报错：ORA-00001: 违反唯一约束条件

    分析原因: 在oracle中,主健不能自动生成,不过可以通过“序列”来实现,如果是这样的话,问题很可能就出在“序列”上了: ORACLE表主键ID突然从已经存在的ID值开始自动生成,导致违反主键唯一性 ...

  5. [转]开发者需要了解的WebKit(mark)

    以下内容转自:http://www.infoq.com/cn/articles/webkit-for-developers -------------------------------------- ...

  6. [整理]Svn常见问题汇总。

    1.’.’ is not a working copy.Can’t open file‘.svn/entries’: 系统找不到指定的路径. 解答:原因是输入的访问路径不正确,如svn://192.1 ...

  7. HDU 5768 中国剩余定理

    题目链接:Lucky7 题意:求在l和r范围内,满足能被7整除,而且不满足任意一组,x mod p[i] = a[i]的数的个数. 思路:容斥定理+中国剩余定理+快速乘法. (奇+ 偶-) #incl ...

  8. POJ 1258 最小生成树

    23333333333 完全是道水题.因为是偶自己读懂自己做出来的..T_T.prim的模板题水过. DESCRIPTION:John竞选的时候许诺会给村子连网.现在给你任意两个村子之间的距离.让你求 ...

  9. LAMP整理

    LAMP第一部分 查看编译了哪些软件:是编译时自动生成的 Cat /usr/local/apache2/build/config.nice 网站根目录存放处: /usr/local/apache2/h ...

  10. 检索 COM 类工厂中 CLSID 为 {10020200-E260-11CF-AE68-00AA004A34D5} 的组件时失败,解决方法如下：

    检索 COM 类工厂中 CLSID 为 {10020200-E260-11CF-AE68-00AA004A34D5} 的组件时失败,解决方法如下: 第 一步:首先将msvcr71.dll,  SQLD ...