本文旨在总结css中各种选择器及其相应用途(持续更新)


通配符(全局)选择器

样式:*{}

示例:

总结:选定文档中所有类型的对象,如图所示写在css样式文件开头用来定义全局通用的一些属性。font-family:定义三种基本的字体类型;margin、padding:将内外边距归零,以防与之后样式发生冲突;

font-size:定义基本字号。

元素(类型)选择器

样式:E{}

示例:

首先编写如下内容:三段文字用了不同的类型定义

然后用元素选择器对需要的类型加上红色效果:

显示结果:

现将元素类型从P修改为h3:

显示结果:

总结:不仅仅是文字,任何元素类型都可以用该选择器查找,读者可以尝试其他类型的效果。类型选择器在css样式中使用程度非常高,通常与其他类型选择器嵌套使用,复合型元素查找后文会给出心得。

id选择器

样式:#(id名){}

示例:

这次三段文字定义相同类型,不同的是给他们加上不同的id:

给要选中的文字加上金黄色效果:

显示结果:

接下来我们想去选中第三段文字:

显示效果:

总结:需要牢牢记住的是一个id在一个样式文档中只能存在一个,重复的话程序会报错。正是由于id的这种唯一性,在选择元素时复合选择器的最外层通常运用父级最近的id名。id选择器在html文件中不易定义过多,通常在编写页面时定义较大的块级,诸如:header、showcase、mainbody、sidebody、bottom、footer等。

类选择器

样式:.A{}

示例:有三段文字,我们给第一、二段加上类名,第三段没有类名

现对类名为“content”的加入样式:

得到结果:

总结:没有类名或者类名不同的均不会被选中并加入样式。在实际编写代码时,可以先写编写一些CSS样式,之后对想要加入该样式的元素赋给相应的类名,以达到通用的效果。

包含(后代)选择器

样式:A B{}

示例:现在把三段文字装进一个div盒子里:

想要选中第一段文字:

显示结果:

总结:后代选择器样式中两类型名中间用空格隔开,级别从左到右递减(爷在左 孙在右),可以不必逐级选择(爷 父 孙),在确定元素不会查找出错的情况下可以简写(爷 孙)。

子对象选择器

样式:A>B{}

该选择器与后代选择器类似,所以不再赘述。不同在于B只能为A的子级,不能跨级选择。

css选择器分类与作用的更多相关文章

  1. css选择器分类

    css选择器大致可以分为10大类: 1.元素选择器 如:p{} 2.类选择器 如:.xx{} 3.ID选择器 如:#xx{} 4.关联选择器 如:p a{} 5.子元素选择器 如:p>a{} 6 ...

  2. CSS选择器分类总结

    一.选择器语法及其意义(pattern and meaning) Pattern Meaning CSS level E an element of type E 标记选择器,匹配所有标签名为E的元素 ...

  3. CSS选择器分类整理

    读完<CSS权威指南>,对选择器有如下整理: selector 本质上是执行元素样式匹配规则,我们可以利用它来限定某些元素 选择器类型: <!-- 实体,即HTML中存在 --> ...

  4. CSS选择器操作大全

    一,CSS选择器分类 二,选择器语法 1,基本选择器语法 选择器 类型 功能描述 *  通配选择器  选择文档中所以HTML元素 E  元素选择器 选择指定类型的HTML元素 #id  ID选择器 选 ...

  5. CSS选择器有哪些?选择器的优先级如何排序?

    CSS选择器分类: CSS的选择器分类可以分为三大类:id选择器,类选择器,标签选择器. 用法如下: 选择器   e.g. 说明 id选择器 #id #header 选择id="header ...

  6. css选择器的分类及优先级计算方法总结

    首先声明一下CSS三大特性—— 继承. 优先级和层叠.继承即子类元素继承父类的样式;优先级是指不同类别样式的权重比较;层叠是说当数量相同时,通过层叠(后者覆盖前者)的样式. css选择符分类 首先来看 ...

  7. CSS选择器优先级总结

    CSS三大特性-- 继承. 优先级和层叠. 继承:即子类元素继承父类的样式; 优先级:是指不同类别样式的权重比较; 层叠:是说当数量相同时,通过层叠(后者覆盖前者)的样式. css选择符分类 首先来看 ...

  8. CSS和CSS选择器

    一:CSS CSS有三种书写形式(优先级从高到低) 1)行内样式:(内联样式)直接在标签style属性中书写 2)内页样式:在本网页的style标签中书写 3)外部样式:在单独的CSS文件中书写,然后 ...

  9. (转)css选择器及其优先级

    文章主要介绍什么是CSS选择器,CSS选择器的分类以及CSS选择器的优先级三部分内容,希望能够帮助到正在学习CSS的童鞋,有什么不足的地方欢迎大家批评指正. 一.什么是CSS选择器? CSS选择器又被 ...

随机推荐

  1. 泛微e-cology和Oracle无法启动的解决方案

    最近公司的泛微OA无法访问,Oracle数据库也无法正常启动,尝试了好多方法,终于解决了,先说说基本情况,希望能给碰到同样问题的朋友带来一点帮助. 服务器操作系统:Window s Server 20 ...

  2. 最小生成数 克鲁斯卡尔 普里姆 matlab

    克鲁斯卡尔: function T=MST_Kruskal(G) n=0; if isfield(G,'w') && ~isempty(G.w) && size(G.w ...

  3. September 28th 2017 Week 39th Thursday

    Every saint has a past and every sinner has a future. 圣人皆有过去,罪人皆有未来. If you were a sinner in the pas ...

  4. B/S网络概述

    B/S网络架构 随着Web2.0时代的到来,互联网的网络架构已经从传统的C/S架构转变到更加方便快捷的B/S架构.这样的转化简化了人们上网的方式,也加速了互联网行业的发展. B/S架构的好处: 1.客 ...

  5. 51nod 1444 破坏道路(bfs+枚举)

    1444 破坏道路 题目来源: CodeForces 基准时间限制:1.5 秒 空间限制:131072 KB 分值: 80 难度:5级算法题 收藏 关注 在某一个国家,那儿有n个城市,他们通过m条双向 ...

  6. python pandas dataframe 操作记录

    从数据看select出数据后如何转换为dataframe df = DataFrame(cur.fetchall()) 如何更改列名,选取列,进行groupby操作 df.columns = ['me ...

  7. Spring AbstractApplicationContext抽象类的refresh()方法--笔记

    Spring中AbstractApplicationContext抽象类的refresh()方法是用来刷新Spring的应用上下文的.下面Spring的应用上下文我都叫作context @Overri ...

  8. 1798. [AHOI2009]维护序列【线段树】

    Description 老师交给小可可一个维护数列的任务,现在小可可希望你来帮他完成. 有长为N的数列,不妨设为a1,a2,…,aN .有如下三种操作形式: (1)把数列中的一段数全部乘一个值; (2 ...

  9. Sequelize-nodejs-2-basic usage

    Basic usage基本使用 To get the ball rollin' you first have to create an instance of Sequelize. Use it th ...

  10. 【题解】洛谷P2577 [ZJOI2005] 午餐(DP+贪心)

    次元传送门:洛谷P2577 思路 首先贪心是必须的 我们能感性地理解出吃饭慢的必须先吃饭(结合一下生活) 因此我们可以先按吃饭时间从大到小排序 然后就能自然地想到用f[i][j][k]表示前i个人在第 ...