IT新手入门,零基础学IT,转行做IT,IT行业的职位选择,你我一同探讨!

IT新手入门网给你介绍IT行业的职位有哪些,让你转行做IT不发愁,IT入门有捷径

当前位置: 主页 > 技能提升 > PHP开发 > css 学习之css中的选择器介绍(第九天)

css 学习之css中的选择器介绍(第九天)

时间:2017-01-18 08:30来源:原创 作者:恪己 点击:
一.基本选择器 1.通配符选择器 *{...} 2.标记选择器 标记名称{...} 3.class选择器 .class名称{...} 应用标记加属性: class=class名称1 class名称2... 4.id选择器 #id名称{...} 应用标记加属性: id=id名称
一.基本选择器
 1.通配符选择器  *{...}
 2.标记选择器     标记名称{...}
 3.class选择器  .class名称{...}
          应用标记加属性: class="class名称1 class名称2..."
 4.id选择器       #id名称{...}
         应用标记加属性: id="id名称"  
 5.群组选择器    选择器名称,选择器名称...{....}
    (不同选择器相同属性的缩写)
 6.后代选择器   选择器名称 选择器名称{...}
   (两个选择器至少是父子关系)
 7. 子代选择器   选择器名称>选择器名称{...}
   (两个选择器必须是父子关系)
二.选择器优先级
      标记选择器          权值 0001
   class选择器      权值  0010
   id选择器            权值  0100
      内联样式             权值  1000
  说明: 权值越大优先级越高,权值相同后面的样式
             覆盖前面的样式,继承的有限级样式最低
      !important 优先级最高 
三.伪类选择器
  1. 行为伪类
               超链接的4个状态
     :link 超链接未访问过状态
     :visited 超链接访问过状态
     :hover  设置鼠标悬停状态
     :active 设置鼠标激活状态
          说明:
       a. LVHA 顺序设置
       b. 常用:
        a{
     color:gray;
         text-decoration:none;
        }
        a:hover{
     color:red;
         text-decoration:underline;
        }
     :focus 设置获得鼠标焦点的选择器
  2.UL元素伪类
     :enabled  设置元素开启状态的选择器
     :disabled 设置元素关闭状态的选择器
     :checked  设置元素被选中状态的选择器 
  3.Css3.0新增
     :first-child:找每个父元素中第一个子元素
     :last-child:找每个父元素中最后子元素
     :nth-child(n):找每个父元素中n子元素
     :only-child: 找每个父元素中唯一一个子元素
四.伪元素选择器
     :before 在元素的前面添加内容
     :after  在元素的后面添加内容
      p:before{
         content:"文本内容"|URL(图像)|attr(属性);
      }     
     
     :target 与超链接有关,选择当前活动的 锚点名称元素。
五.文本样式
  1.font-size:value; 文本大小
    说明:单位(像素 px;
          em:父元素默认文本大小倍数 例如:1.5em;
                      百分比)
  2.font-family:宋体,arial,'Times New Roman'; 文本字体
  3.color:value; 文本颜色
    说明:
       颜色值
    a.单词 : red blue green yellow...
    b.十六进制(0-9 a b c d e f)
            红色: #ff0000  == #f00 (red green blue)

     

------分隔线----------------------------
栏目列表
推荐内容