<!--
 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. hdu 1520

    Anniversary party Time Limit: 2000/1000 MS (Java/Others)    Memory Limit: 65536/32768 K (Java/Others ...

  2. Android 页面滑动

    1.PagerAdapter适配器     PagerAdapter主要是viewpager的适配器,而viewPager是android.support.v4扩展中新添加的一个强大控件,可以实现控件 ...

  3. Jquery表单提交方式

    1.使用调用submit方法 function tes1(){ //执行判断 if(校验通过){ $("#formId").submit(); }else{ return; } } ...

  4. redhat enterprixe 5.0 下DHCP服务器rpm安装配置及其测试

    一.了解DHCP DHCP服务提供动态指定IP地址和配置参数的机制.有动态和静态两种方式. 二.rpm安装 因为配过Samba,所以感觉挺简单. 首先找到主程序和几个附属程序的rpm的安装包.应该都是 ...

  5. LAMP之安装mysql/apache/php

    1. 安装mysqlcd /usr/local/src/ wget http://mirrors.sohu.com/mysql/MySQL-5.1/mysql-5.1.73-linux-i686-gl ...

  6. spring aop编程

    1.AOP,面向切面编程(aspect Oriental programing),使用aop,可以将处理切面aspect的代码注入到主程序,通常主程序的主要目的不是处理这些切面aspect,可以防止代 ...

  7. [Js]基础知识

    一.JavaScript组成 1.ECMAScript 解释器.翻译(提供功能有限,如加减乘除,定义变量.函数等)   几乎没有兼容性问题 2.DOM    有一些兼容性问题 3.BOM(用的少,交互 ...

  8. HDU 2676 Network Wars 01分数规划,最小割 难度:4

    http://acm.zju.edu.cn/onlinejudge/showProblem.do?problemId=1676 对顶点i,j,起点s=1,终点t=n,可以认为题意要求一组01矩阵use ...

  9. undefined reference to typeinfo - C++ error message

    undefined reference to typeinfo - C++ error message There are some compiler and loader error message ...

  10. 一模 （2） day1

    第一题: 题目大意: 设 2n 张牌分别标记为 1, 2, ..., n, n+1, ..., 2n,初始时这 2n 张牌按其标号从小到大排列.经一次洗牌后,原来的排列顺序变成 n+1, 1, n+2 ...