CSS中选择器的分类

  • 时间:2018-11-07 23:19 作者:简单印象 来源:简单印象 阅读:170
  • 扫一扫,手机访问
摘要:总结一下在CSS样式表中的少量选择器,供大家参考:1.常用的选择器最常用的选择器类型是类型选择器和后代选择器。类型选择器用来寻觅特定类型的元素,比方段落或者标题元素,只要指定希望应用样式的元素的名称。类型选择器有时候也称为元素选择器或者简单选择器。p{color:red;}后代选择器用来寻觅指定元素

CSS中选择器的分类

总结一下在CSS样式表中的少量选择器,供大家参考:

1.常用的选择器

最常用的选择器类型是类型选择器和后代选择器。类型选择器用来寻觅特定类型的元素,比方段落或者标题元素,只要指定希望应用样式的元素的名称。类型选择器有时候也称为元素选择器或者简单选择器。

p{color:red;}

后代选择器用来寻觅指定元素或者元素组的后代。后代选择器由其余两个选择器之间的空格表示。以下示例中,只缩进是块引用的后代的段落元素,其余所有段落不受影响。

blockquote p{padding-left:2em;}

除此之外,假如要想寻觅更特定的元素,可以使用ID选择器和类型选择器。这两种选择器用于寻觅那些具备指定ID或者类名的元素。ID选择器由一个#字符表示,类选择器由一个点号表示。下例中的第一条规则使简介段落中的文本以粗体显示,第二条规则让日期显示为绿色。

#intro {font-weight:bold;}
.date-posted {color:#ccc;}

Happy Birthday Andy


24/3/2009

2.通用选择器

通用选择器可以是所有选择器中最强大却最少使用的。通用选择器的最用就像是通配符(参考正则表达式知识内容),它匹配所有可用的元素。通用选择器由一个星号表示,一般用来对页面上的所有元素应用样式,例如可以使用以下规则删除每个元素在默认浏览器内边距和外边距:

* {
padding:0;
margin:0;
}

在与其余选择器结合使用时,通用选择器可以用来对某个元素的所有后代应用样式,或者者跳过一级后代。

3.高级选择器

3.1子选择器和相邻同胞选择器

第一个高级选择器是子选择器。后代选择器选择一个元素的所有后代,而子选择器只选择元素的直接后代,即子元素。如:

#nav>li {
background:url(folder.png) no-repeat left top;
}

上述代码意味着ID名为nav的直接后代li才能具有上述样式:

3.2属性选择器

有时,你可能需要根据一个元素与另一个元素的相邻关系对它应用样式。相邻同胞选择器可用于定位同一个父元素下某个元素之后的元素。可以使用相邻同胞选择器让顶级标题后面的第一个段落显示为粗体,如下:

h2 + p {
font-weight:bold;
}

3.3属性选择器

属性选择器是根据某个属性能否存在或者者属性的值来寻觅元素。因为解释篇幅较长,请参考《CSS: 属性选择器》。

3.4层叠和特殊性

因为解释篇幅较长,请参考《CSS: 层叠和特殊性》。

3.5继承

应用样式的元素的后代会继承样式的某些属性,比方颜色和字号。继承使开发人员不必在元素的每个后代上增加相同的样式。假如打算设置的属性是继承而来的属性,那么也可以将它应用于父类。可以编写:

p,div,h1,h2,h3,ul,ol,dl,li {color:black;}

但是下面的写法更简单:

body {color:black;}
  • 全部评论(0)
最新发布的资讯信息
【网页前端|】从BAT大数据工程师那里总结的大数据学习方法(2019-05-23 11:46)
【系统环境|Linux】值得了解的十大数据发展趋势(2019-05-22 11:33)
【系统环境|软件环境】如何成为一名大数据工程师?(2019-05-20 12:11)
【系统环境|Linux】大数据四大常识,不会你敢说自己在做大数据?(2019-05-19 11:39)
【系统环境|】需要同时掌握AVA和Linux,才可以继续大数据课程的学习(2019-05-18 10:28)
【系统环境|软件环境】学习大数据,一定要了解大数据的这些用途(2019-05-16 10:49)
【系统环境|Linux】bt宝塔控制面板mysql频繁自动停止详细解决办法(2019-05-16 08:52)
【系统环境|】大数据零基础学习路线,新人记得保存收藏哦(2019-05-15 10:54)
【系统环境|】全网最全最新的大数据系统学习路径(2019-05-14 15:38)
【系统环境|Linux】毕业设计:音乐分享系统(2019-05-14 07:48)
手机二维码手机访问领取大礼包
返回顶部