<!--
 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. python中的md5加密

    import md5 import types def get_md5(data): if type(data) is not types.StringType: # 检验输入的数据是否为字符串 pr ...

  2. CF---（452）A. Eevee

    A. Eevee time limit per test 1 second memory limit per test 256 megabytes input standard input outpu ...

  3. ARM 汇编的一些规范

    A.5.1  文件格式        ARM 源程序文件(即源文件)为文件格式,可以使用任一文本编辑器编写程序代码.         在一个项目中,至少要有一个汇编源文件或C 程序文件,可以有多个汇编 ...

  4. DOM操作 append prependTo after before

    通过JavaScript可以很方便的获取DOM节点,从而进行一系列的DOM操作.但实际上一般开发者都习惯性的先定义好HTML结构,但这样就非常不灵活了. 试想下这样的情况:如果我们通过AJAX获取到数 ...

  5. 转载解决：错误的语法：”XXXX“必须是批处理中仅有的语句

    SQL Server 数据库提示“错误的语法:”XXXX“必须是批处理中仅有的语句”报错的原因分析 解析:批处理必须以 CREATE 语句开始.也就是说一个查询分析器里面只有一个批处理语句才是规范的语 ...

  6. 未能加载文件或程序集“System.Data.SQLite”或它的某一个依赖项。解决办法

    找到使用中的程序池,右键,设置应用程序默认设置,如下 确定即可.

  7. SerialPort使用

    1.简介随 着USB的流行,串口通讯已经应用到日常生活的很多方面了,USB是一种高速的串口通讯协议,USB接口非常复杂,通常被用在需要传输大量数据数据的地 方,如U盘.相机.打印机等.除了USB这种较 ...

  8. ASP.NET-【缓存】-使用ASP.NET缓存

    缓存一个List 泛型结构 1.显示 var s = Get("personsl"); foreach (var item in s) { Response.Write(item. ...

  9. mysql的部分命令图解

    1.查询有哪些库: show databases;  图中除了Carlton库之外,其它都是系统自带的. 要养成在命令后加入:的习惯 2.查看某个库的表 show tables; 3. 查看表的字段 ...

  10. HDU 4046 Panda

    线段树单点更新,要注意两段合并多出的答案的计算即可 //======================================================================== ...