(四)CSS选择器和派生选择器
CSS派生选择器允许你根据文档的上下文关系来确定某个标签的样式。在学习派生之前,先来了解基本的CSS选择器。前面的文章中提到过下图,选择器的位置如下所示:
CSS选择器
分为几种基本选择器:元素选择器、id选择器、类选择器、属性选择器
1.元素选择器
html {color:black;}
h1 {color:blue;}
h2 {color:silver;}
2.id选择器:为指定id的HTML元素指定样式。
#red {color:red;}
#green {color:green;}
在HTML代码中,使用
<p id="red">这个段落是红色。</p>
<p id="green">这个段落是绿色。</p>
注意:id属性只能在每个HTML文档中出现一次。
3.类选择器:为所有拥有该类的HTML元素指定样式。
.center {text-align: center}
HTML中使用:
<h1 class="center">
This heading will be center-aligned
</h1> <p class="center">
This paragraph will also be center-aligned.
</p>
4.属性选择器:为拥有指定属性的HTML元素设置样式,不仅限于class和id属性。
属性选择器是HTML5的规则。IE7以上版本并且包含!DOCTYPE时,才能使用该规则。具体规则不再赘述,因为到用到才会真正理解每一个的含义,下面表 格你只要知道有这个概念,具体使用时,可点击链接查看每一项的具体含义。
选择器 | 描述 |
---|---|
[attribute] | 用于选取带有指定属性的元素。 |
[attribute=value] | 用于选取带有指定属性和值的元素。 |
[attribute~=value] | 用于选取属性值中包含指定词汇的元素。 |
[attribute|=value] | 用于选取带有以指定值开头的属性值的元素,该值必须是整个单词。 |
[attribute^=value] | 匹配属性值以指定值开头的每个元素。 |
[attribute$=value] | 匹配属性值以指定值结尾的每个元素。 |
[attribute*=value] | 匹配属性值中包含指定值的每个元素。 |
属性选择器有以下几种常见用法:
*[title] {color:red;}/*将所有包含title的元素变为红色*/
a[href] {color:red;}/*只对有href属性的a元素应用该样式*/
a[href][title] {color:red;}/*为同时有属性href和title的a元素应用样式*/
img[alt] {border: 5px solid red;}/*所有带有alt属性的图像应用样式,从而突显这些有效的图像,这个例子更适合用来诊断而不是设计,即使用该样式来确定图像是否确实有效。*/
属性选择器在XML文档中相当有用,因为XML语言主张要针对元素和属性的用途指定元素名和属性名。
<planet>Venus</planet>
<planet moons="1">Earth</planet>
<planet moons="2">Mars</planet>planet[moons] {color:red;}
另外属性与属性值必须完全匹配,
<p class="important warning">This paragraph is a very important warning.</p>
p[class="important warning"] {color: red;}
选择器分组的概念前面已经提到过,就是属于同一组的样式相同不再赘述,例如:
body, h2, p, table, th, td, pre, strong, em {color:gray;}
通配符选择器匹配所有元素,下面的例子中代表文档中的每个元素的颜色都是红色的。
* {color:red;}
CSS派生选择器
1.id选择器和派生选择器
#sidebar p {
font-style: italic;
text-align: right;
margin-top: 0.5em;
}
上面的样式只会应用于出现在id是sidebar的元素内的段落。
2.class派生选择器
.fancy td {
color: #f60;
background: #666;
}
上述的样式是指在类名为fancy的更大的元素内的表格单元td都会以灰色背景橙色文字显示。
- 另外,元素也可以基于它们的类而被选择:
td.fancy {
color: #f60;
background: #666;
}上述是指,类名为fancy的td将会带有的样式。
- CSS多类选择器,将两种类名链接在一起,仅可以选择同时包含这些类名的元素,类名顺序不限。
<p class="important warning">
This paragraph is a very important warning.
</p><p class="important urgent warning">
This paragraph is a very important and urgent warning.
</p>上述两种情况,多可以用以下规则匹配:
.important.urgent {background:silver;}
但是若类名只有important或者urgent,则该规则不匹配。
- 类选择器和id选择器的区别:
- id选择器只能在文档中使用一次,类选择器可以为任意个元素指定类。
- id选择器不能结合使用,因为id属性不允许有以空格分隔的此列表。类选择器却可以多类使用。
- 相同的一点是,类选择器和id选择器可能是区分大小写的。
后代选择器
h1 em {color:red;}
子元素选择器
与后代元素相比,子元素选择器只能选择作为某元素子元素的元素,也就是说只能是子,不能为孙。
h1 > strong {color:red;}
相邻兄弟选择器
可以选择紧接在另一个元素后面的元素,且二者有共同的父元素。
h1 + p {margin-top:50px;}
解读为,选择紧邻h1元素后出现的段落,h1和p元素拥有共同的父元素。
(四)CSS选择器和派生选择器的更多相关文章
- CSS 简介、语法、派生选择器、id 选择器、类选择器、属性选择器
CSS 概述 CSS 指层叠样式表 (Cascading Style Sheets) 样式定义如何显示 HTML 元素 样式通常存储在样式表中 把样式添加到 HTML 4.0 中,是为了解决内容与表现 ...
- CSS魔法堂:选择器及其优先级
一.前言 首先看看一道阿里这期网申的题目吧! 1.找出下面优先级相同的选择器 A. img.thumb:after B.[data-job="frontend"]::firs ...
- CSS 中常用的选择器(选择符)
一.标签选择器:直接将HTML标签(Tag)作为选择器,可以是p.h1.dl.strong等HTML标签.如: p { font:12px;}em { color:blue;}dl { float:l ...
- css3笔记系列-3.css中的各种选择器详解,不看后悔系列
点击上方蓝色字体,关注我 最详细的css3选择器解析 选择器是什么? 比较官方的解释:在 CSS 中,选择器是一种模式,用于选择需要添加样式的元素. 最常见的 CSS 选择器是元素选择器.换句话说 ...
- CSS 派生选择器
派生选择器 通过依据元素在其位置的上下文关系来定义样式,你可以使标记更加简洁. 在 CSS1 中,通过这种方式来应用规则的选择器被称为上下文选择器 (contextual selectors),这是由 ...
- CSS学习总结4:派生选择器学习总结
派生选择器:通过依据元素在其位置的上下文关系来定义样式,你可以使标记更加简洁.派生选择器中一共分为三种:后代选择器.子元素选择器.相邻兄弟选择器. 1.初识派生选择器 实例:你希望列表中的 stron ...
- Css基础-派生选择器
如果要修改li strong 里面文字的颜色可以这样写样式 派生选择器: li strong { color:red; } 效果:
- HTML+CSS教程(四)选择器(id选择器,类选择器,标签选择器,子代选择器,后代选择器,组选择器,伪类选择器)/css引入页面的形式(行内样式、内嵌样式、外联样式)
一.回顾内容 前端的三大组成(三大模块) HTMl(超文本标记语言) 结构层 css(层叠样式表) 表现层:用来美化HTML结构 JS(Java script)(脚本语言) 行为层: ...
- CSS样式----图文详解:css样式表和选择器
主要内容 CSS概述 CSS和HTML结合的三种方式:行内样式表.内嵌样式表.外部样式表 CSS四种基本选择器:标签选择器.类选择器.ID选择器.通用选择器 CSS三种扩展选择器:组合选择器.后代选择 ...
随机推荐
- AnyChartStock去除水印方法
最近在使用AnyChartStock的图表,功能很强大,但下载过来是有水印的,虽然网上也有很多破解无水印的版本,但基本都是AnyChart的,AnyChartStoc的几乎没有.所以自己尝试着去除水印 ...
- iOS7之定制View Controller切换效果
在iOS5和iOS6前,View Controller的切换主要有4种: 1. Push/Pop,NavigationViewController常干的事儿 2. Tab,TabViewControl ...
- IOS开发之──应用之间调用(2)
在上一篇文章中,讲解了如何在自己应用之间调用问题,今天介绍一下如果调用IOS自带的app的方法 一.调用app store界面方法 在实际开发中,往往要推荐自己其他应用和推荐自己的收费软件,那么我们就 ...
- php必看六本书
php和mysql web开发 PHP高级程序设计_模式.框架与测试.pdf PHP专业项目实例开发.pdf PHP5高级应用开发实践.pdf [深入PHP面向对象.模式与实践(第2版)].(美)赞 ...
- SVN备份教程(三)
上次的博文SVN备份教程(二)中,我们讲解了一下SVN定时备份的相关内容,同时我们又提出了一种新的SVN备份方案--自动备份. 1.简介 所谓自动备份,它实现的思路非常简单,就是利用SVN自带的hoo ...
- Leetcode-Read N Characters Given Read4 II
The API: int read4(char *buf) reads 4 characters at a time from a file. The return value is the actu ...
- Notes of the scrum meeting(10/31)
meeting time:3:00~4:30p.m.,October 30th,2013 meeting place:绿园 attendees: 顾育豪 ...
- android 讯飞语音识别(离线)注意事项
讯飞语音识别:使用注意事项:mainfest.xml中一定要记得权限写进去21001:我的情况是没有写SpeechApp类,并且需要在application中注册:20005:无匹配结果23300:本 ...
- p1205单词翻转-递归解决
题目描述 Description 给出一个英语句子,希望你把句子里的单词顺序都翻转过来 输入描述 Input Description 输入包括一个英语句子. 输出描述 Output Descripti ...
- Kali Linux 优化过程
修改输入法横向候选字 vim ~/.config/fcitx/conf fcitx-classic-ui.config 修改此行 为 false :VerticalList=False mb这玩 ...