当前位置:首页 > 开发 > Web前端 > Css > 正文

css选择器分类与作用

发表于: 2015-11-13   作者:互联网   来源:转载   浏览次数:
css
摘要: 本文旨在总结css中各种选择器及其相应用途(持续更新)   通配符(全局)选择器 样式:*{} 示例: 总结:选定文档中所有类型的对象,如图所示写在css样式文件开头用来定义全局通用的一些属性。font-family:定义三种基本的字体类型;margin、padding:将内外边距归零,以防与之后样式发生冲突; font-size:定义基本字号。   元素

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

 


通配符(全局)选择器

样式:*{}

示例:

css选择器分类与作用

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

font-size:定义基本字号。

 

元素(类型)选择器

样式:E{}

示例:

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

css选择器分类与作用

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

显示结果:

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

显示结果:

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

 

id选择器

样式:#(id名){}

示例:

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

css选择器分类与作用

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

显示结果:

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

 

显示效果:

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

 

类选择器

样式:.A{}

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

css选择器分类与作用

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

得到结果:

css选择器分类与作用

 

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

 

 

包含(后代)选择器

样式:A B{}

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

css选择器分类与作用

想要选中第一段文字:

显示结果:

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

 

子对象选择器

样式:A>B{}

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

 

 

css选择器分类与作用

  • 0

    开心

    开心

  • 0

    板砖

    板砖

  • 0

    感动

    感动

  • 0

    有用

    有用

  • 0

    疑问

    疑问

  • 0

    难过

    难过

  • 0

    无聊

    无聊

  • 0

    震惊

    震惊

编辑推荐
1. 选择器浏览器支持情况 使用CSS选择器时,要考虑到不同浏览器下的支持情况,主要是IE的不同版本。
三种基本选择器: 类型选择器:以文档语言对象类型作为选择符,匹配指定的元素。 p {color:red;}
1、标签选择器 p{ font-size: 12px; background: #900; color: 090; } 2、ID选择器 <style> #
CSS的选择器 最近在研究jQuery的选择器,大家知道jQuery的选择器和css的选择器非常相似,所以整理一
类选择器在css样式编码中是最常用到的,如右侧代码编辑器中的代码:可以实现为“胆小如鼠”、“勇气
1.css选择器 (1)标记选择器:选择器{属性1:值;属性2:值} 用来指定确定标记的样式 <p style="
一个样式规则由两部分组成:选择器和样式声明。选择器表明要为哪一个元素设置样式,样式声明则表明
选择器(selector)是CSS中很重要的概念,所有HTML语言中的标记都是通过不同的CSS选择器进行控制的。
1.基础的选择器 选择器 含义 示例 <tr style="margin: 0px; padding: 0px; border-image:
一个样式规则由两部分组成:选择器和样式声明。选择器表明要为哪一个元素设置样式,样式声明则表明
版权所有 IT知识库 CopyRight © 2009-2015 IT知识库 IT610.com , All Rights Reserved. 京ICP备09083238号