CSS 通用和分组选择器

一、通用选择器

通用选择器可能是所有选择器中最强大的,却使用最少的。通用选择器的作用就像是通配符,它匹配所有可用元素。通用选择器由一个星号表示。通用选择器一般用来对象页面上所有元素应用样式

例如:可使用,以下规则删除第个元素上的默认的空白边界

*{margin:0;
padding:0;
}

二、分组选择器

分组选择器不是一种选择器类型,而是一种选择器使用方法。当多个对象定义了相同的样式时,就可以把它们分成一组,这样能够简化代码。

/*定义所有级别的标题和段落行高为22px*/
h1,h2,h3,h4,h5,h6,p{
    line-height:22px;
}

分组选择器,可以使用逗号把同组内不同对象分隔。分组选择器与类选择器在性质上有点类似,都可以为不同元素或者对象定义相同的样式。

将以下样式改变

.class1{
    font-size:13px;
    color:red;
    text-decoration:underline;
    }
.class2{
    font-size:13px;
    color:blue;
    text-decoration:underline;
    }

分组选择器使用

.class1{
    color:red;
    }
.class2{
    color:blue;
    }
    /*共同样式*/
.class1,class2{
    font-size:13px;
    text-decoration:underline;
    }

分组选择器坚持以下两个原则

  • 方便原则。不能为了分组而分组,如把每个元素、对象中具有相同的声明都抽取出来分为一组,只能给自己带来麻烦。此时定义一个类会理更方便
  • 就近原则。如果几个元素相邻,并同处在同一个模块内,可以考虑把相同声明提取出来进行分组。理由便于分组,容易维护,也更容易理解
时间: 2024-11-08 15:41:07

CSS 通用和分组选择器的相关文章

CSS 通用和分组选择器(十)

一.通用选择器 通用选择器可能是所有选择器中最强大的,却使用最少的.通用选择器的作用就像是通配符,它匹配所有可用元素.通用选择器由一个星号表示.通用选择器一般用来对象页面上所有元素应用样式 例如:可使用,以下规则删除第个元素上的默认的空白边界 *{margin:0; padding:0; } 二.分组选择器 分组选择器不是一种选择器类型,而是一种选择器使用方法.当多个对象定义了相同的样式时,就可以把它们分成一组,这样能够简化代码. /*定义所有级别的标题和段落行高为22px*/ h1,h2,h3

HTML和CSS前端教程03-CSS选择器

目录 1. CSS定义 2. 创建CSS的三种方法 2.1. 元素内嵌(权重最高) 2.2. 文档内嵌 2.3. 外部引用 3. CSS层叠和继承 3.1. 浏览器样式 3.2. 样式表层叠 3.3. 样式继承 4. CSS选择器 4.1. 选择器的总汇 (1) 基本选择器 (2) 复合选择器 (3) 伪元素选择器:: (4) 伪类选择器 1. CSS定义 层叠样式表 2. 创建CSS的三种方法 2.1. 元素内嵌(权重最高) <p style="color:red;font-size:5

CSS选择器之基本选择器总结

一.元素选择器(所有浏览器支持) 元素选择器(标签名选择器)其实就是文档的元素,如html,body,p,div等等, 下面例子中选择了span元素,并设置了字体颜色为红色. <body> <p>这里使用<span>标签名选择器</span>改变了样式</p> </body> CSS: span{ color: red; }  效果: 二.类选择器 (所有浏览器都支持类选择器,但多类选择器(.className1.className2

[读书笔记] CSS权威指南1: 选择器

通配选择器 可以与任何元素匹配,就像是一个通配符 /*每一个元素的字体都设置为红色*/ * { color: red; } 元素选择器 指示文档元素的选择器. /*为body的字体设置为红色*/ body { color: red: } 分组 选择器分组 h1, h2, h3 { color: red; } 声明分组 h1 { font: 18px Helvetica; color: purple; background: aqua; } 结合选择器和声明分组 h1, h2, h3 { font

div+css通用兼容性代码整理

一.Div+css通用兼容性代码 你可以在css开头加入 *html{padding:0px} 复制代码 代码如下: <style> *html{padding:0px} /* Clear Fix */ .clearfix:after { content:”.”; display:block; height:0; clear:both; visibility:hidden; } .clearfix { display:inline-block; } /* Hide from IE Mac */

【CSS】CSS的三种选择器

css概述 为了让网页元素的样式更加丰富,也为了让网页的内容和样式能拆分开,CSS由此思想而诞生,CSS是 Cascading Style Sheets 的首字母缩写,意思是层叠样式表.有了CSS,html中大部分表现样式的标签就废弃不用了,html只负责文档的结构和内容,表现形式完全交给CSS,html文档变得更加简洁. css基本语法 css的定义方法是: 选择器 { 属性:值: 属性:值: 属性:值:} 选择器是将样式和页面元素关联起来的名称,属性是希望设置的样式属性,每个属性有一个或多个

css(二)-- 选择器

选择器的作用是找到对应的数据进行样式化. 选择器的格式 选择器{  属性:属性值;  } 常用选择器 标签选择器        h2{  } 类选择器          .a {  }  <h2 class="a">           // 不能是数字 ID选择器          #a{  }  <h2 id="a">                // ID要唯一 交集选择器      h1,h2{  } 并集选择器(父类选择器) p

css 通用属性(部分)

css 通用属性(部分) /*消除浏览器自带内外边距*/ *{margin: 0;padding:  0;} /*清除浮动,加在要清除浮动元素的父元素的选择器上*/ .fix{*zoom:1; }  .fix:after,.fix:before{    display:block;     content:"clear";     height:0;     clear:both;     overflow:hidden;     visibility:hidden;  }     a

作为初学者如何高效快速辨别使用css中不同的选择器

首先,晒出自己的第一次作品,以次当作对日后的鼓励. 作为一个css初学者,一开始接触到许多的选择器还是有些头疼的,特别是看到style中的符号不能第一时间判断出这是哪个选择器时.先列出目前所学的选择器及格式:1.标签选择器  div{ backgound-color:^;   width:^;   height:^; magin:^,^,^,^; padding:^,^,^,^; } 2.类选择器    .lei{ 同上 } 3.ID选择器  #ID{ 同上 } 4.分组选择器 DIV,SPAN