css选择器的使用详解

-、css选择器的分类:

二、常用选择器详解:

  1、标签选择器:

  语法:

    标签名 {

      属性:属性值;

    }

  代码示例:

    h1 {

      color: #ccc;

      font-size: 28px;

    }

  2、类选择器:

   语法:

    .类名 {

      属性:属性值;

    }

   代码示例:

    .top {

      margin-top:25px;

    }

    <div class="top"></div>

  3、id选择器:

   语法:

    #ID名称 {

      属性:属性值;

    }

   代码示例:

   #top {

    padding-top:10px;

   }

   <div id="top"></div>

  注意:ID属性是唯一标识。

  4、伪类

   语法:

   元素:伪类 {

    属性:属性值;

   }

   代码示例:

   a:link {

    color:blue;

    }

  5、并集选择器:

   语法:

   标签名,.类名,#ID名称 {

    属性:属性值;

   }

   代码示例:

   p,.top,#title {

    color:red;

   }

  6、后代选择器:

   语法:

   p span {

     属性:属性值;

   }

三、通用选择器详解:

  语法:

  *{

   属性:属性值;

  }

四、高级选择器详解:

  1、子选择器:

    代码示例:

    #nav>li {

      padding-left: 20px;

    }

  2、相邻同胞选择器:

    代码示例:

    h2+p {

      font-size: 1.4em;

    }

  3、属性选择器:

    代码示例:

    [id="header"] {

      background: url(branding-color.png) repeat-y left top;

    }

    a[rel="nofollow"] {

      padding-right: 20px;

    }

五、样式的优先级(权重):

  基本选择器之间:ID选择器〉类选择器〉标签选择器

  样式表之间:  行内样式〉内嵌样式〉外部样式

  css样式之间:  同一个选择器且两条相同的声明,后一条声明会覆盖前一条声明

时间: 2024-10-10 02:28:39

css选择器的使用详解的相关文章

CSS的padding用法详解

CSS的padding用法详解:建议:尽可能的手写代码,可以有效的提高学习效率和深度.padding属性在网页中使用非常的频繁,所以这里详细介绍一下此属性的用法.此属性用来定义元素的内边距或者内补白,所谓的内边距就是元素中的内容与元素内侧之间的空白区域.可以单独定义上下左右某一方位的内边距.代码实例:实例一:没有设置父div的内边距的时候: <!DOCTYPE html> <html> <head> <meta charset=" utf-8"

DIV css中cursor属性详解-鼠标移到图片变换鼠标形状 (转)

css中cursor属性详解-鼠标移到图片变换鼠标形状 语法: cursor : auto | all-scroll | col-resize| crosshair | default | hand | move | help | no-drop | not-allowed | pointer | progress | row-resize | text | vertical-text | wait | *-resize | url ( url )  取值: auto  :   默认值.浏览器根

通俗易懂的CSS的浮动float详解

目录: 1. CSS浮动属性float详解 2. CSS常见页面布局 3. CSS浮动清除和清除浮动的几种方法 4. 高度塌陷的产生条件和解决方法 ## CSS浮动属性float详解 *首先,我们需要了解什么是浮动?浮动是指(浮动的特点):- 将元素排除在普通流之外,即元素将脱离标准文档流.- 元素将不在页面占用空间.- 将浮动元素放置在包含框的左边或者右边.- 浮动的框可以向左或者向右移动,直到它的外边缘碰到包含框或另一个浮动框的边框为止.- 经常使用它来实现特殊的定位效果. float的属性

css样式之background详解

background用法详解: 1.background-color 属性设置元素的背景颜色 可能的值 color_name            规定颜色值为颜色名称的背景颜色(比如 red) hex_number          规定颜色值为十六进制值的背景颜色(比如 #ff0000) rgb_number          规定颜色值为 rgb 代码的背景颜色(比如 rgb(255,0,0)     transparent           默认 背景颜色为透明 html代码 <div

CSS样式表继承详解

最近在恶补css样式表的基础知识.上次研究了css样式表之冲突问题详解 .这次是对 css 继承 特性的学习. 什么是css 继承?要想了解css样式表的继承,我们先从文档树(HTML DOM)开始.文档树由HTML元素组成. 文档树和家族树类似,也有祖先.后代.父亲.孩子和兄弟^_^.这很容易理解吧,笔者在这里就不一一赘述了.希望深入了解的朋友请google之. 那么CSS样式表继承指的是,特定的CSS属性向下传递到子孙元素. 下面举个例子,有如下html代码片段: <p>CSS样式表<

CSS中background属性详解

CSS背景属性 background css 说明 background-image:url(图片的网址); 背景图 background: url( 图片的网址 ); 背景 background-color:#色码; 背景色彩 Exp: background-image:url(背景图案.jpg,gif,bmp); background-color:#FFFFFF; background-color : tra CSS背景属性 background css 说明 background-imag

CSS position属性整理详解

在css布局中position的使用非常广泛.在一些面试题目中也会常见到position的问题.所以在这篇博客里面整理一下position属性的使用,在以后的深入学习中还会在补充的. 1.position有哪些属性? static:所以元素的默认定位是position:static,这意味着元素没有被定位,元素出现在正常流中. relative:生成相对定位的元素,相对于其正常位置定位,还占有原来的位置,元素通过top,right,left,bottom属性进行规定. absolute:生成绝对

CSS背景属性Background详解

本文详解了CSS的背景属性Background,包括CSS3中新增的背景属性.如果你是个CSS初学者,还可以查看之前介绍的CSS浮动属性和CSS透明属性详解. css2 中的背景(background) CSS2 中有5个主要的背景(background)属性,它们是: background-color: 指定填充背景的颜色. background-image: 引用图片作为背景. background-position: 指定元素背景图片的位置. background-repeat: 决定是否

[TimLinux] CSS float和position详解

1. float 详解 1.1. 定义 摘自w3school:float 属性定义元素在哪个方向浮动.以往这个属性总应用于图像,使文本围绕在图像周围,不过在 CSS 中,任何元素都可以浮动.浮动元素会生成一个块级框,而不论它本身是何种元素.如果浮动非替换元素,则要指定一个明确的宽度:否则,它们会尽可能地窄. 注释:假如在一行之上只有极少的空间可供浮动元素,那么这个元素会跳至下一行,这个过程会持续到某一行拥有足够的空间为止. 1.2. 关键点 从上面的定义,分析几个关键点: float是可以独立存