<!--
 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. [maven] 跳过单元测试

    1.mvn命令 $ mvn install -Dmaven.test.skip=true 2.通过配置pom <project> [...] <build> <plugi ...

  2. MyBatis执行过程显示SQL语句的log4j配置

    log4j.properties文件   log4j.rootLogger=debug,stdout,logfile log4j.appender.stdout=org.apache.log4j.Co ...

  3. uva------Help is needed for Dexter(11384)

    Problem H Help is needed for Dexter Time Limit: 3 Second Dexter is tired of Dee Dee. So he decided t ...

  4. Sql server 日期函数和日期转换

    时间函数 SQL Server Date 函数 下面的表格列出了 SQL Server 中最重要的内建日期函数: 函数 描述 GETDATE() 返回当前日期和时间 DATEPART(Type,dat ...

  5. mvc伪静态<三> IIS配置

    上一篇已经已经讲述了mvc伪静态的代码实现. 下面以IIS 7.5为例演示一下IIS如何配置才能在服务器显示.html的伪静态 一.进入IIS,选择处理程序映射 二添加脚本映射 三根据你的处理程序的版 ...

  6. spring校验相关

    转载:http://elim.iteye.com/blog/1812584 对于任何一个应用而言在客户端做的数据有效性验证都不是安全有效的,这时候就要求我们在开发的时候在服务端也对数据的有效性进行验证 ...

  7. Eclipse 反编译器

    Help-->Install New SoftWare 贴上反编译地址:http://opensource.cpupk.com/decompiler/update/ 选择add,一路向北,起飞.

  8. DOM系列---进阶篇【转】

    内容提纲: 1.DOM类型 2.DOM扩展 3.DOM操作内容 一．DOM类型 DOM基础篇中,我们了解了DOM的节点并且了解怎样查询和操作节点,而本身这些不同的节点,又有着不同的类型.   DOM类 ...

  9. java模式之-模板方法模式

    模板方法模式是java设计模式常见的模式之一. <JAVA与模式>中写道: 模板方法模式是类的行为模式.准备一个抽象类,将部分逻辑以具体方法以及具体构造函数的形式实现,然后声明一些抽象方法 ...

  10. closeChrome

    function closeChrome(){ var browserName=navigator.appName; if (browserName=="Netscape") { ...