<!--
 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. JavaWeb基础：Servlet Response

    ServletResponse简介 ServletResponse代表浏览器输出,它提供所有HttpResponse的设置接口,可以设置HttpResponse的响应状态,响应头和响应内容. 生命周期 ...

  2. js——<script>标签的加载顺序

    用了很久的JavaScript,今天突然就碰见了将一个js文件放在<head></head>与<body></body>标签中,一个不可以执行,一个可以 ...

  3. Asp.Net MVC EF各版本区别

      2009年發行ASP.NET MVC 1.0版 2010年發行ASP.NET MVC 2.0版,VS2010 2011年發行ASP.NET MVC 3.0版+EF4,需要.Net4.0支持,VS2 ...

  4. [转]C#综合揭秘——细说进程、应用程序域与上下文之间的关系

    引言 本文主要是介绍进程(Process).应用程序域(AppDomain)..NET上下文(Context)的概念与操作.虽然在一般的开发当中这三者并不常用,但熟悉三者的关系,深入了解其作用,对提高 ...

  5. [Js]碰撞运动

    描述:撞到目标点弹回来(速度反转) 一.无重力的漂浮div var div1=document.getElementById("div1"); var iSpeedX=6; var ...

  6. RelativeLayout练习

    <?xml version="1.0" encoding="utf-8"?> <RelativeLayout xmlns:android=&q ...

  7. IBatis.net动态SQL语句(六)

    在学习动态SQL语句之前,首先必须对条件查询有一定了解,先来学习如何向IBatis.Net的映射文件里传入参数. 一.条件查询 1.传递单个参数 如根据Id查询: <select id=&quo ...

  8. ppurl

    ppurl 就这么挂了?? 简直不敢相信 我才刚上不久,它竟然就这么挂啦??? 还是转到哪了? 有人知道吗? 表示我很愤怒,就好像当年新浪爱问共享就这么挂了一样 过了很久我才知道原来它转到新浪微盘了. ...

  9. （转）如何学好C语言，一个成功人士的心得！

    zidier111发表于 2013-1-26 08:59:05 　　今 天，我能够自称是一个混IT的人，并能以此谋生，将来大家能一次谋生，都要感谢两个人：克劳德.香农和约翰.冯.诺依曼，是他们发现了所 ...

  10. 创建plist文件

    可以先在工程中直接新建一个plist文件,往里面写入自己需要的数据.但是这里的plist文件我们无法修改,是只读的,我们可以将这个plist文件复制一份到沙盒中,然后对沙盒中的文件进行操作.具体代码如 ...