CSS基础知识:常见选择器示例
CSS(Cascading Style Sheet),中文译为层叠样式表,可以让设计者方便灵活地控制Web页面的外观表现。CSS是1996年由W3C审核通过并且推荐使用的。CSS的引入,就是为了使HTML语言更好地适应网页的美工设计。CSS详细规范说明要查阅CSS手册,或登录W3C官网(http://www.w3c.org)。
使用CSS,要了解常用的各种选择器。
1.标记选择器:
一个HTML页面由很多不同的标记组成,而CSS选择器就是声明哪些标记采用哪种CSS样式。每一种HTML标记的名称都可以作为相应的标记选择器的名称。示例:
<style>
h1 {
color: red;
font-size:25px;
}
</style>
每一个选择器都包含选择器本身、属性和值,其中属性和值可以设置多个,从而实现对同一标记名称声明多种样式。
CSS语言对于所有属性和值都有相对严格的要求,如果声明的属性在CSS规范中没有,或者某个属性的值不符合该属性的要求,都不能使该CSS语句生效。
还有一种通配选择器“*”,表示其中设置的样式会应用于所有的网页元素。示例:
* {
font-family:Verdada,Arial,sans-serif;
}
2.类选择器:
类选择器的名称可以由用户自定义,属性和值与标记选择器一样,必须符合CSS规范。示例:
<html><head><title>class选择器</title>
<style type="text/css">
.red{
color: red;
font-size:18px;
}
.green{
color: green;
font-size:20px;
}
</style></head>
<body>
<p class="red">class选择器1</p>
<p class="green">class选择器2</p>
<h3 class="green">h3使用class</h3>
</body></html>
任何一个class选择器都适用于所有HTML标记,只需要用HTML标记的class属性即可。
3.ID选择器:
ID选择器只能在HTML页面中使用一次,利用HTML标记中的ID属性,有更强的针对性。示例:
<html><head><title>ID选择器</title>
<style type="text/css">
#bold{
font-weight: bold;
}
#green{
font-size:30px;
color:#009900;
}
</style></head>
<body>
<p id="bold">ID选择器1</p>
<p id="green">ID选择器2</p>
</body></html>
ID选择器也可以用于多个标记,但因为JavaScript等脚本语言也使用id,如果一个HTML中有两个相同的id标记,会导致查找id时出错,所以一个id最好只能赋予一个HTML标记。ID选择器不支持像class那样的多风格同时使用。
4.交集选择器:
交集选择器由两个选择器直接连接构成,其结果是选中二者各自元素范围的交集,其中第1个必须是标记选择器,第2个必须是类别选择器或者ID选择器。交集选择器是两个选择器连续书写,之间不能有空格。示例:
<html><head><title>交集选择器</title>
<style type="text/css">
p{ /*标记选择器*/
color: blue;
}
p.special{ /*标记.类别选择器*/
color: red;
}
.special{ /*类别选择器*/
color: green;
}
</style></head>
<body>
<p >普通段落文本(蓝色)……</p>
<h3 >普通标题文本(黑色)……</h3>
<p class="special">指定了.special类别的段落文本(红色)……</p>
<h3 class="special">指定了.special类别的标题文本(绿色)……</h3>
</body></html>
上面的代码中,定义了<p>标记的样式,也定义了.special类别的样式,此外还单独定义了p.special用于特殊的控制,而这个p.special中定义的风格样式仅仅适用于
<p class="special">标记,而不会影响使用了.special样式的其他标记。
5.并集选择器:
并集选择器,也称为集体声明,是同时选中各个基本选择器所选择的范围。任何形式的选择器都可以作为并集选择器的一部分。并集选择器是多个选择器通过逗号连接而成。示例:
<html><head><title>并集选择器</title>
<style type="text/css">
h1,h2,h3.h4.h5.p{ /*并集选择器*/
color: purple;
font-size:15px;
}
h2.special,.special,#one{ /*集体声明*/
text-decoration:underline;
}
</style></head>
<body>
<h1 >示例文字h1……</h1>
<h2 class=”special” >示例文字h2……</h2>
<h3 >示例文字h3……</h3>
<p >示例文字p1……</p>
<p class="special">示例文字p2……</p>
<p id="one">示例文字p3……</p>
</body></html>
显示结果中,所有颜色都是紫色purple,字体大小都为15px。
对于网站中的一些小页面,例如弹出的小对话框和上传附件的小窗口等,希望这些页面中所有标记都使用同一种CSS样式,可以使用全局选择器“*”,就不用逐个声明了。
6.后代选择器:
可以通过嵌套的方式对特殊位置的HTML标记进行声明,把外层标记写在前面,内层标记写在后面,之间用空格分隔。当标记发生嵌套时,内层标记就成为外层标记的后代。嵌套示例:
<p>最外层文字<span>中间层文字<b>最内层文字</b></span></p>
后代选择器示例:
<html><head><title>后代选择器</title>
<style type=”text/css”>
p span{ /*嵌套声明*/
color: red;
}
span{
color:blue;
}
</style></head>
<body>
<p >嵌套使<span>用CSS(红色)</span>标记的方法</p>
嵌套之外的<span>标记(黑色)</span>不生效
</body></html>
通过将span选择器嵌套在p选择器中进行声明,显示效果只适用于<p>和</p>之间的<span>标记,而其外的<span>标记并不产生任何效果。
后代选择器的使用很广泛,不仅标记选择器可以这样组合,类别选择器和ID选择器都可以进行嵌套。示例:
.special i{color:red;}
#one li{padding-left:5px;}
td.out .inside strong{font-size:16px;}
三层嵌套的对应HTML为:
<td class="out">
<p class="inside">
其他内容<strong>CSS控制的部分</strong>其他内容
</p>
</td>
选择器的嵌套在CSS编写中可以大大减小对class和id的声明,因此在构建页面HTML框架时通常只给外层标记定义class或者id,内层标记能通过嵌套表示的则利用嵌套的方式,而不需要再定义新的class或者专用id。只有当子标记无法利用此规则时,才单独进行声明。例如一个<ul>标记中包含多个<li>标记,而需要对其中某个<li>单独设置CSS样式时才赋给该<li>一个单独id或者类别,而其他<li>同样采用“ul
li{...}”的嵌套方式设置。
7.子选择器:
后代选择器产生的影响不仅限于元素的直接后代,而且会影响到它的各级后代。因此,CSS还规定了子选择器,也就是只对直接后代有影响的选择器,而对以后的多个层的后代不产生作用。子选择器是用>连接。示例:
p>span{
color:blue;
}
8. 相邻兄弟选择器:
相邻选择器描述的是页面标记里两个元素左右相邻的关系。示例:
li+li {
color:blue;
}
相邻选择器用+来连接。
9. 属性选择器:
a[link]{
text-decoration:none;
}
input[type="text"]{
width:33%;
}
10.伪类:
常用的伪类是基于超链接的a:link、a:visited、a:hover和a:active,分别表示平常的超链接、以点击过的超链接、鼠标移动经过的超链接和激活的超链接样式。
还有3个伪类,分别是first-child、:focus和:lang(n)。
11.伪元素:
开发者还可以使用伪元素,而不必依赖元素标记来样式化Web文档里的某个项目。示例:
p:first-letter{
font-size:200%;
font-weight:bold;
}
伪元素包括:first-letter、:first-line、:before和:after。可以使用“:first-line”样式化第1行元素:
p:first-line{
font-size:200%;
font-weight:bold;
}
以上选择器可以总结为下表:
基本选择符 |
名称 |
说明 |
版本 |
* |
通配选择符 |
匹配所有元素 |
CSS2 |
E |
类型选择符 |
匹配指定标记的元素 |
CSS1 |
E#myid |
ID选择符 |
匹配唯一标识id属性为myid的E元素 |
CSS1 |
e.myclass |
类选择符 |
匹配class属性为myclass的所有E元素 |
CSS1 |
关系选择符 |
名称 |
说明 |
版本 |
E F |
包含选择符 |
选择所有被E元素包含的F元素 |
CSS1 |
E,F,G |
选择符分组 |
选择所有的E元素、F元素和G元素 |
CSS1 |
E>F |
子对象选择符 |
选择所有作为E元素的子元素F |
CSS2 |
E+F |
相邻选择符 |
选择紧贴在E元素之后的F元素 |
CSS2 |
CSS新增了很多选择符,并兼容CSS1和CSS2中的选择符。
1.属性选择符:
CSS3中,属性选择符已经构成了非常强大的标记属性过滤体系:
属性选择符 |
说明 |
版本 |
E[attr] |
选择具有attr属性的E元素 |
CSS2 |
E[attr="val"] |
选择具有attr属性且属性值等于value的E元素 |
CSS2 |
E[attr~="val"] |
选择具有attr属性且属性的空格分隔的字词列表中其中一个等于val的E元素 |
CSS2 |
E[attr|="val"] |
选择具有attr属性且属性值的连字符分隔的字词列表中由val开始的E元素 |
CSS2 |
E[attr^="val"] |
选择具有attr属性且属性值以val开头的字符串的E元素 |
CSS3 |
E[attr$="val"] |
选择具有attr属性且属性值以val结尾的字符串的E元素 |
CSS3 |
E[attr*="val"] |
选择具有attr属性且属性值包含val的字符串的E元素 |
CSS3 |
2.结构伪类选择符:
可以通过文档结构的相互关系来匹配特定的元素。对于有规律的文档结构,可以减少class属性和id属性的定义。
伪类选择符 |
说明 |
版本 |
E:root |
选择匹配E所在文档的根元素 |
CSS3 |
E:not(s) |
选择匹配所有不匹配简单选择符s的E元素 |
CSS3 |
E:empty |
匹配没有任何子元素(包括text节点)的元素E |
CSS3 |
E:target |
匹配当前链接地址指向的E元素 |
CSS3 |
E:first-child |
匹配父元素的第一个子元素E |
CSS2 |
E:last-child |
匹配父元素的最后一个子元素E |
CSS3 |
E:nth-child(n) |
匹配父元素的第n个子元素E |
CSS3 |
E:nth-last-child(n) |
匹配父元素的倒数第n个子元素E |
CSS3 |
E:only-child |
匹配父元素仅有的一个子元素E |
CSS3 |
E:first-of-type |
匹配同类型中的第一个同级兄弟元素E |
CSS3 |
E:last-of-type |
匹配同类型中的最后一个同级兄弟元素E |
CSS3 |
E:only-of-type |
匹配同类型中的唯一一个同级兄弟元素E |
CSS3 |
E:nth-of-type(n) |
匹配同类型中的第n个同级兄弟元素E |
CSS3 |
E:nth-last-of-type(n) |
匹配同类型中的倒数第n个同级兄弟元素E |
CSS3 |
其中,E:nth-child(n)中的参数n,可以是一个数字,可以是关键字odd或even,可以是公式2n或2n-1等,n的索引起始值为1。
3.状态伪类选择符:
可以设置元素处在某种状态下的样式:
伪类选择符 |
说明 |
版本 |
E:link |
设置超链接a在未被访问前的样式 |
CSS1 |
E:visited |
设置超链接a在其地址已被访问过的样式 |
CSS1 |
E:hover |
设置元素在鼠标悬停其上的样式 |
CSS1/CSS2 |
E:active |
设置元素在被用户激活(在鼠标单击与释放之间)时的样式 |
CSS1/CSS2 |
E:focus |
设置元素在成为焦点(onfocus事件发生)时的样式 |
CSS1/CSS2 |
E:checked |
匹配表单元素上处于选中状态的元素E(radio和checkbox) |
CSS3 |
E:enabled |
匹配表单上处于可以状态的元素E |
CSS3 |
E:disabled |
匹配表单上处于禁用状态的元素E |
CSS3 |
4.伪元素选择符:
CSS3还有一种伪元素选择符,针对CSS已经定义好的伪元素使用:
伪元素选择符 |
说明 |
版本 |
E:first-letter |
设置对象内的第一个字符的样式 |
CSS1/CSS3 |
E:first-line |
设置对象内的第一行的样式 |
CSS1/CSS3 |
E:before/E::before |
设置在对象前发生的内容,与content属性一起用 |
CSS2/CSS3 |
E:after/E::after |
设置在对象后发生的内容,与content属性一起用 |
CSS2/CSS3 |
E::selection |
设置对象被选择时的颜色 |
CSS3 |
CSS3中的伪元素选择符,冒号都改成了双冒号。
CSS基础知识:常见选择器示例的更多相关文章
- 前端学习——css基础知识,选择器与html模板、值得收藏的html标签
一.css需要的html(采用html5标准) DTD,文档类型声明: <!Doctype html> 文本编码声明: <meta charset="utf-8" ...
- HTML+CSS基础知识(2)选择器的使用、盒子模型的讲解、列表的使用
文章目录 1.CSS基础知识 2.css样式 2.1.代码: 2.2 测试结果 3.CSS的语法 3.1 代码 4.块元素和行内元素 4.1 代码 4.2 测试结果 5.常用的选择器 5.1 代码块 ...
- 【CSS】 CSS基础知识 属性和选择
css基础知识 html的基本标签都是千篇一律的,为了能够个性化外观,就需要进行样式的调整,而css就是专门用来维护,管理样式的一种格式.在html中定义css有三种方法 1. 为标签添加style属 ...
- CSS 基础知识点 样式 选择器 伪类
CSS 基础知识点汇集 版权声明:这篇博客是别人写的,大神博客地址 : https://www.cnblogs.com/Mtime/p/5184685.html 1.CSS 简介 CSS 指层叠样式表 ...
- CSS基础知识筑基
01.CSS 简介 CSS 指层叠样式表 (Cascading Style Sheets),对HTML网页内容进行统一外观样式设计和管理,给网页进行各种装饰,让她变得美观,是HTML的化妆师.(Cas ...
- 前端开发:css基础知识之盒模型以及浮动布局。
前端开发:css基础知识之盒模型以及浮动布局 前言 楼主的蛮多朋友最近都在学习html5,他们都会问到同一个问题 浮动是什么东西? 为什么这个浮动没有效果? 这个问题楼主已经回答了n遍.今天则是把 ...
- (转)第一天 XHTML CSS基础知识 文章出处:标准之路(http://www.aa25.cn/div_css/902.shtml)
欢迎大家学习<十天学会web标准>,也就是我们常说的DIV+CSS.不过这里的DIV+CSS是一种错误的叫法,建议大家还是称之为web标准. 学习本系列教程需有一定html和css基础,也 ...
- CSS基础知识之position
最近在慕课网学习了 网页布局基础 和 固定层效果 ,都是由声音甜美的 婧享人生 老师所录制,视频详细讲解了CSS中position的用法,在此把学习笔记分享给大家. CSS定位机制 标准文档流(Nor ...
- CSS基础知识01
一.CSS基础知识介绍 1.css是cascading style sheet层叠式样式表的简写 2.css小用法 加粗:font-weight:bold; 正常用:norma ...
- 〖前端开发〗HTML/CSS基础知识学习笔记
经过一天的学习,把慕课网的HTML/CSS基础知识学完了,笔记整理: 1. 文件结构: HTML文件的固定结构: <html> <head>...</head> & ...
随机推荐
- MySQL多项模糊查询
最近有个需求,就是要根据搜索框里面的关键字,找到符合条件的数据. 如果是单个条件的话,其实就是一个普通的select语句. 但是需求是这个关键字,要在id,desc,step等多个字段模糊查找. 然后 ...
- 基于七牛Python SDK写的一个批量下载脚本
前言 上一篇基于七牛Python SDK写的一个同步脚本所写的脚本只支持上传,不支持文件下载. 虽然这个需求不太强烈,但有可能有人(在备份.迁移时)需要,而官方有没提供对应的工具,所以我就把这个功能也 ...
- Linux运维常见故障排查和处理的33个技巧汇总
作为linux运维,多多少少会碰见这样那样的问题或故障,从中总结经验,查找问题,汇总并分析故障的原因,这是一个Linux运维工程师良好的习惯.每一次技术的突破,都经历着苦闷,伴随着快乐,可我们还是执着 ...
- SVN 与Git的区别
1:最主要的区别是Git是分布式版本控制系统,而SVN是集中式的版本控制系统.能理解这一点,区别它们就会容易很多,Git并不是目前唯一的分布式版本控制系统,比如还有Mercurial等.不过话说回来G ...
- kibana-4.6.3-linux-x86_64.tar.gz的安装(图文详解)(升级)
前期博客 kibana-4.6.3-linux-x86_64.tar.gz的下载(图文详解) 因为,我的机器情况是如下: 1.上传 [hadoop@master app]$ rz [hadoop@m ...
- 动态修改datagrid中的numberbox的最大值和最小值
注意datagrid使用的触发函数是: onBeginEdit,只有在这个触发条件下,editor才真正初始化完成,不然没法动态修改numberbox中的最大最小值. 示例代码:(注意这一块:onBe ...
- AOP的MethodBeforeAdvice
使用Spring自动生成代理类,spring利用的是动态代理机制 接口 Java代码 public interface UserDao { void addUser(); void deleteUse ...
- Java的SSH网站
1.框架 strusts2 + Hibernate + spring 2.图片 图1-1 网站结构 图1-2 java代码结构 3.源代码 3.1 UserAction.java package co ...
- inline-block元素出现位置错位的解决方法
如下代码所示: <div class="container"> <div style="display: inline-block; height: 1 ...
- Linux运维基础入门(一)网络基础知识梳理01
一,计算机网络参考模型 1.1 OSI七层模型 1)物理层 主要功能是完成相邻节点之间原始比特流的传输.(网卡等) 物理层协议关心的典型问题是使用什么样的物理信号来表示数据1和0:持续的时间有多长:数 ...