文档章节

Css样式技巧:常用的选择器和通用选择器

2
 2846613430
发布于 2016/04/15 09:58
字数 1081
阅读 56
收藏 4
点赞 1
评论 0

有效且结构良好的文档为你要应用的样式提供了一个框架。要想使用CSS将样式应用于特定的HTML少已素,需要想办法找到这个元素口在CsS中,执行这一任务的样式规则部分称为选择器。

 常用选择器:

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

后代选择器可用来寻找特定元素或元素组的后代。后代选择器由其他两个选择器之间的空格表示。在这个示例中,只缩进是块引用的后代的段落元素,其他所有段落不受影响。

    这两种选择器适合于应用那些应用范围广的一般性样式。要想寻找更特定的元素,可以使用ID选择器和类选择器口顾名思义,这两种选择器用于寻找那些具有指定ID或类名的元素。ID选择器由一个#字符表示,类选择器由一个点号表示。下面示例中的第一条规则使简介段落中的文本以粗体械示,第二条规则让日期显示为绿色:

    前面提到过,许多CSS开发人员过度依赖类选择器和皿选择器。如果他们希望以一种方式对主内容区域中的标题应用样式,而在第二个内容区域中采用另一种方式,那么他们很可能创建两个类并几在每个标题上应用一个类,一种简单得多的方法是结合使用类型、后代、D和类这几种选择器:

这是一个非常简单明朗的示例。但是,让你吃惊的是,只使用前面讨论的4种选择器就可以成功地找到了许多元素。如果你发现自己在文档添加了许多不必要的类,那么这可能是文档结构不合理的一个警告信号。这时应该分析这些元素之间的差异。你常常会发现唯一的差异是它们在页面.上出现的位置。不要给这些元素指定不1司的类,而应将一个类或ID应用于它们的祖先,然后使用后代选择器定位它们。

伪类:

有时候,我们需要根据文档结构之外的其他条件对元素应用样式,例如表单元素或链接的状态。这要使用伪类选择器来完成。

:link:visited称为链接伪类,只能应用于锚元素。:hover  :active:focus称为动态伪类,理论上可以应用于任何元素。大多数浏览器都支持这个功能口但是,IE6只注意应用于锚链接的:active:hover选择器,完全忽略:focusIE7在任何元素上都支持:hover,但是忽略:active:focus

最后,值得指出的是:通过把伪类连接在一起,可以创建更复杂的行为,比如在已访问链接和未访问链接上实现不同的鼠标悬停效果。

 通用选择器

通用选择器可能是所有选择器中最强大却最少使用的。通用选择器的作用就像是通配符,匹配所有可用元素。与其他语言中的通配符一样,通用选择器由一个星号表示。通用选择器一般用来对页面上的所有元素应用样式。例如,可以使用以下规则删除每个元素上默认的浏览器内边距和外边距:

 

在与其他选择器结合使用时,通用选择器可以用来对某个元素的所有后代应用样式,或者跳过一级后代。在本文以后将看到这么做的实际效果。

本文来自 >> 尚学堂; 转载请注明:http://www.sxt.cn/u/13421/blog/9068

© 著作权归作者所有

共有 人打赏支持
2
粉丝 2
博文 25
码字总数 24679
作品 0
海淀
端程序员入门所要学习的16个知识点

1、HTML常用标签 语言是什么 、Web前端开发语言、 HTML超文本标记语言 、 网页主体结构 、常用标签、超链接(a标签)、Img图片标签 2、盒子模型 初探Div盒子模型 、css样式、 简单css样式、盒...

急速奔跑中的蜗牛
06/07
0
0
Less-学习笔记

这是less官网的介绍: http://www.1024i.com/demo/less/document.html 大家都是在一起学习,最好的地方无疑就是官网,不过每个人学习方式和基础不同,以至于学完后掌握才会出现差异 开源中国...

透笔度
2015/10/16
137
0
CSS基础知识(常复习,常修正)

Part1 CSS简介 CSS 层叠样式表:主要用于定义html内容在浏览器内的显示样式,如文字、大小、字体加粗等 css注释 /注释语句/ html注释 css样式由选择符和声明组成,而声明又由属性和值组成。当...

yuanyuan_chen
2016/11/02
8
0
前端CSS规范整理-豆瓣的CSS规范

一、文件规范 1、文件均归档至约定的目录中。 具体要求通过豆瓣的CSS规范进行讲解: 所有的CSS分为两大类:通用类和业务类。通用的CSS文件,放在如下目录中: 基本样式库 /css/core 通用UI元...

杨军军
2013/06/17
0
3
css(表现层)Cascading Style Sheets层叠样式表

HTML:===> 结构层 css:===> 表现层 js:===> 行为层 css的常用三种类型选择器: 1、基本选择器: id class 标签 * 逗号选择器(,) 2、包含选择器: 子代选择器(>) 后代选择器(空格) ...

AAA年华
2017/12/09
0
0
CSS冷门及难理解的选择器学习

平常大家在写css样式的时候,大都都是用的几个常用的选择器,比如类选择器,后代选择器,并集选择器,子选择器等等。不过最近,我学习了一点冷门的选择器,发现这些选择器在特定情况下非常好...

会写代码的husky
2016/10/19
84
0
HTML&CSS基础学习笔记1.30-选择器是什么

选择器是什么 选择器是CSS样式为了定位页面上的任意元素的一种方法。 选择器主要分为:元素标签选择器、通用选择器、类选择器、ID选择器、属性选择器、组合选择器、伪类选择器、伪元素选择器...

MayaTeacher
2016/09/20
10
1
【CSS选择符】群组选择符 和 通用选择符

0008.jpg 有时候我们需要一种简单的方式把相同的格式应用到不同的元素上。例如,可能想让网页中的所有标题使用相同的颜色和字体显示。如果分别为每一级标题(h1, h2, h3, h4等)定义样式,工...

KelvinZ
2017/12/25
0
0
精通CSS高级Web标准解决方案

第一章 基础知识 XHTML,指的是Extendsible Hypertext Marker Language , 当使用(X)HTML这个术语时指的是XHTML和HTML;1.1 设计代码的结构1.1.1 使用有意义的标记1 ID和类名 一个ID名只能够...

LuXing
2014/01/24
0
0
如何写出优雅的 CSS 代码 ?

  对于同样的项目或者是一个网页,尽管最终每个前端开发工程师都可以实现相同的效果,但是他们所写的代码一定是不同的。有的优雅,看起来清晰易懂,代码具有可拓展性,这样的代码有利于团队...

前端技术栈
2017/01/03
0
0

没有更多内容

加载失败,请刷新页面

加载更多

下一页

Git 基础 - 远程仓库的使用

远程仓库的使用 要参与任何一个 Git 项目的协作,必须要了解该如何管理远程仓库。远程仓库是指托管在网络上的项目仓库,可能会有好多个,其中有些你只能读,另外有些可以写。同他人协作开发某...

谢思华
7分钟前
0
0
面试宝典-悲观锁和乐观锁

悲观锁(Pessimistic Lock), 顾名思义,就是很悲观,每次去拿数据的时候都认为别人会修改,所以每次在拿数据的时候都会上锁,这样别人想拿这个数据就会block直到它拿到锁。 乐观锁(Optimistic...

suyain
8分钟前
0
0
崛起于Springboot2.X之集成MongoDb使用mongoTemplate CRUD(27)

1、pom依赖 <dependency> <groupId>com.alibaba</groupId> <artifactId>fastjson</artifactId> <version>1.2.7</version></dependency><dependency> <groupId>log4j</......

木九天
18分钟前
0
0
切分log日志

新建logback.xml放到resource里面 <?xml version="1.0" encoding="utf-8"?><configuration> <appender name="consoleLog" class="ch.qos.logback.core.ConsoleAppender"> <......

talen
24分钟前
0
0
spring @Resource 和 @Autowired 的使用区别

这两个 注解 @Resource 和 @Autowired , 常识都知道 @Resource 是 JAVAEE 自带的,@Autowired 是 spring 的自定义注解。 一般情况下, 使用 bean的时候, 这两个注解 随便使用一个即可。 但...

之渊
29分钟前
0
0
springboot集成elasticsearch客户端问题记录

1背景说明 服务端ES版本为5.5.2,springboot版本为1.5.6。 工程中添加如下依赖 2问题记录 2.1 NetworkPlugin类找不到 报错java.lang.ClassNotFoundException: org.elasticsearch.plugins.Net...

zjg23
31分钟前
1
0
快速构建ceph可视化监控系统

前言 ceph的可视化方案很多,本篇介绍的是比较简单的一种方式,并且对包都进行了二次封装,所以能够在极短的时间内构建出一个可视化的监控系统 本系统组件如下: ceph-jewel版本 ceph_expor...

万建宁
31分钟前
0
0
Java构造器使用注意

public class 父类A {int age = 10;protected void say() {System.out.println("父类A");}public 父类A() {override();}public void override() {Syst...

咸鱼AI
31分钟前
0
0
TensorFlow 线性分类

构造直线 z = 2 * x - 3 * y + 4 x0*w0+x1*w1+b=0 x1=-x0* w0/w1-b/w1 斜率 k= -w0/w1 截距 -b/w1 随机生成数据,加入一定的偏差,用直线将二维平面分为两部分 使用线性模型拟合参数 损失函数...

阿豪boy
34分钟前
0
0
翻译冒泡排序测试

翻译一个冒泡排序: var a = [1,3,2,4,6,5];var f = 0;var n = a.length ;for( var i =1; i<= n; i++) { for( var j = n-1 ; j >= i; j --) { if(a[j] < a[j+1]) { ......

钟元OSS
36分钟前
0
0

没有更多内容

加载失败,请刷新页面

加载更多

下一页

返回顶部
顶部