类选择器和ID选择器的区别

1id只能用一回,类可以循环使用

2可以使用类选择器词列表方法为一个元素同时设置多个样式。我们可以为一个元素同时设多个样式,但只可以用类选择器的方法实现,ID选择器是不可以的(不能使用 ID 词列表)。

例子

.stress{

    color:red;

}

.bigsize{

    font-size:25px;

}

<p>到了<span class="stress bigsize">三年级</span>下学期时,我们班上了一节公开课...</p>

子选择器

还有一个比较有用的选择器子选择器,即大于符号(>),用于选择指定标签元素的第一代子元素。

包含选择器,即加入空格,用于选择指定标签元素下的后辈元素。

请注意这个选择器与子选择器的区别,子选择器(child selector)仅是指它的直接后代,或者你可以理解为作用于子元素的第一代后代。而后代选择器是作用于所有子后代元素。后代选择器通过空格来进行选择,而子选择器是通过“>”进行选择。

总结:>作用于元素的第一代后代,空格作用于元素的所有后代。

通用选择器

通用选择器是功能最强大的选择器,它使用一个(*)号指定,它的作用是匹配html中所有标签元素

伪类选择符

更有趣的是伪类选择符,为什么叫做伪类选择符,它允许给html不存在的标签(标签的某种状态)设置样式

HTML学习笔记CSS的更多相关文章

  1. amazeui学习笔记--css(布局相关1)--网格Grid

    amazeui学习笔记--css(布局相关1)--网格Grid 一.总结 基本使用 1.div+class布局:amaze里面采取的就是div+class的布局方式  <div class=&q ...

  2. amazeui学习笔记--css(基本样式4)--打印样式Print

    amazeui学习笔记--css(基本样式3)--打印样式Print 一.总结 1.打印显示url方法: 利用 CSS3 content 属性,将 <a> 和 <abbr> 的 ...

  3. amazeui学习笔记--css(基本样式3)--文字排版Typography

    amazeui学习笔记--css(基本样式3)--文字排版Typography 一.总结 1.字体:amaze默认非 衬线字体(sans-serif) 2.引用块blockquote和定义列表:引用块 ...

  4. amazeui学习笔记--css(基本样式2)--基础设置Base

    amazeui学习笔记--css(基本样式2)--基础设置Base 一.总结 1.盒子模型:外margin,内padding,这里的内外指的边框 2.border-box:Amaze UI 将所有元素 ...

  5. amazeui学习笔记--css(基本样式)--样式统一Normalize

    amazeui学习笔记--css(基本样式)--样式统一Normalize 一.总结 1.统一浏览器默认样式: Amaze UI 也使用了 normalize.css,就是让不同浏览器显示相同的样式 ...

  6. amazeui学习笔记--css(常用组件16)--文章页Article

    amazeui学习笔记--css(常用组件16)--文章页Article 一.总结 1.基本使用:文章内容页的排版样式,包括标题.文章元信息.分隔线等样式. .am-article 文章内容容器 .a ...

  7. amazeui学习笔记--css(常用组件15)--CSS动画Animation

    amazeui学习笔记--css(常用组件15)--CSS动画Animation 一.总结 1.css3动画封装:CSS3 动画封装,浏览器需支持 CSS3 动画. Class 描述 .am-anim ...

  8. amazeui学习笔记--css(常用组件14)--缩略图Thumbnail

    amazeui学习笔记--css(常用组件14)--缩略图Thumbnail 一.总结 1.基本样式:在 <img> 添加 .am-thumbnail 类:也可以在 <img> ...

  9. amazeui学习笔记--css(常用组件13)--进度条Progress

    amazeui学习笔记--css(常用组件13)--进度条Progress 一.总结 1.进度条基本使用:进度条组件,.am-progress 为容器,.am-progress-bar 为进度显示信息 ...

  10. amazeui学习笔记--css(常用组件12)--面板Panel

    amazeui学习笔记--css(常用组件12)--面板Panel 一.总结 1.面板基本样式:默认的 .am-panel 提供基本的阴影和边距,默认边框添加 .am-panel-default,内容 ...

随机推荐

  1. 单台主机上DB2 10.5和arcgis 10.4 空间数据库配置

    该篇文章重点参考arcgis官网说明:http://enterprise.arcgis.com/zh-cn/server/10.4/publish-services/linux/register-db ...

  2. AtCoder Beginner Contest 082 A - Round Up the Mean

    题目链接:https://abc082.contest.atcoder.jp/tasks/abc082_a Time limit : 2sec / Memory limit : 256MB Score ...

  3. JustOj 1032: 习题6.7 完数

    题目描述 一个数如果恰好等于它的因子之和,这个数就称为"完数". 例如,6的因子为1.2.3,而6=1+2+3,因此6是"完数". 编程序找出N之内的所有完数, ...

  4. NFS客户端阻塞睡眠问题与配置调研

    Linux NFS客户端需要很小心地配置,否则在NFS服务器崩溃时,访问NFS的程序会被挂起,用ps查看,进程状态(STAT)处于D,意为(由于IO阻塞而进入)不可中断睡眠(如果是D+,+号表示程序运 ...

  5. ubuntu数据库安装配置

    感谢原作者 http://www.linuxidc.com/Linux/2016-12/138081.htm

  6. Django高级

    一 登录装饰器 def login_required(view_func): '''登录判断装饰器''' def wrapper(request, *view_args, **view_kwargs) ...

  7. tomcat 启动时遇到org.apache.jasper.servlet.TldScanner.scanJars At least one JAR was scanned for TLDs yet contained no TLDs

    当发生这样的错误的时候 org.apache.jasper.servlet.TldScanner.scanJars At least one JAR was scanned for TLDs yet ...

  8. 计算概论(A)/基础编程练习2(8题)/5:点和正方形的关系

    #include<stdio.h> #include<math.h> int main() { // 输入坐标 float x, y; while(scanf("%f ...

  9. 【题解】Luogu UVA1411 Ants

    原题传送门 博客里对二分图匹配的详细介绍 这道题是带权二分图匹配 用的是KM算法 我们要知道一个定理:要使线段没有相交,要使距离总和最小 我们先把任意一对白点.黑点的距离算一下 然后运用KM算法 因为 ...

  10. Failed to set session cookie. Maybe you are using HTTP instead of HTTPS to access phpMyAdmin.

    原因:使用负载均衡的时候,第一次请求phpMyAdmin主页的时候web01进行处理,页面返回的cookie存放在web01上.填写用户名密码提交之后,是web02进行处理的,此时给页面的cookie ...