CSS_选择符
2016-10-28
《CSS入门经典》第五章
以下提示注意事项:
1.如何选择使用id选择符还是class选择符:当确信id选择符在页面的唯一性时,就可以使用id选择符。
2.通用选择符在所有元素上设置样式,并不是只设置继承的默认值。
eg:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>笔记</title>
<style>
*{
color: green;
}
h1{
color: blue;
}
</style>
</head>
<body>
<h1>This is <em>very</em> important</h1>
</body>
</html>
注意:使用通用选择符,<em>标签里的内容显示为绿色,而不是<h1>标签的蓝色,它没有继承h1标签的样式。
更改代码:
<style>
body{
color: green;
}
h1{
color: blue;
}
</style>
此时em继承了h1的样式。
3.注意后代选择器与子选择器的区别。(另总结)
4.简单伪类:
(1):active 被激活的元素(例如激活的链接)。
(2):first-child 元素的第一个子元素。
(3):focus 有焦点的元素(例如接收输入的表单字段)。
(4):hover 指向的元素(例如通过鼠标)。
(5):lang() 特定语言的样式。
(6):link 未跟踪的链接。
(7):visited 以前访问过的链接。
注意:
(1) 将伪类和其他的类和伪类放在一起使用时,中间不要留空格,只有.和:指示符。
eg a.offsite:link{color:green;}
(2) link伪类和visited伪类经常一起使用,用link伪类设置链接未访问时的样式,用visited设置链接访问后的样式。
(3) :first-child伪类用于选择元素,选择的元素是另一个元素的第一个子代。如果第一个子代匹配选择符的基本类型。(:first-child 伪类前面的部分),那么将规则应用于该元素。
eg:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>笔记</title>
<style>
body{
color: green;
}
h1{
color: blue;
}
#content p:first-child{
background-color: silver;
font-size: x-large; }
</style>
</head>
<body>
<h1>李白</h1>
<div id="content">
<p>明月出天山,苍茫云海间。
长风几万里,吹度玉门关。
汉下白登道,胡窥青海湾。
由来征战地,不见有人还。
戍客望边邑,思归多苦颜。
高楼当此夜,叹息未应闲。</p>
<p>...</p>
<p>...</p>
</div>
</body>
</html>
浏览器支持
表格中的数字表示支持该属性的第一个浏览器版本号。
选择器 | chrome | IE | Firefox | Safari | Opera |
---|---|---|---|---|---|
:first-child | 4.0 | 7.0 | 3.0 | 3.1 | 9.6 |
注意: :first-child在IE8和更早版本IE版本中必须声明<!DOCTYPE>
ie7.0以前的浏览器是不支持first-child选择器的,所以使用class给特定元素设置样式。
(4):lang()伪类
指示规则应用于匹配某种语言的元素;
eg:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>笔记</title>
<style>
:lang(en-uk) {
background-color: #ccccff;
};
</style>
</head>
<body>
<p>He cried out in a bad Monty Python imitation,
14 <span lang="en-uk">He's pinin for the fjords!</span>
</p>
</body>
</html>
5.CSS中的伪元素
:before 插入元素前的内容
:after 插入元素后的内容
:first-letter 块元素的第一个字母
:first-line 块元素的第一行
(1):first-line伪元素是虚拟伪元素,它只添加应用于首行的特殊样式指示元素的首行。
eg:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>笔记</title>
<style>
p:first-line{
background-color: green;
}
</style>
</head>
<body>
<p>《蝴蝶效应》是一部由埃里克·布雷斯、J·麦凯伊·格鲁伯执导,艾什顿·库彻、艾米·斯马特、约翰·帕特里克·阿梅多利、杰斯·詹姆斯等主演的科幻惊悚电影,
于2004年1月23日在美国正式上映。电影讲述伊万(艾什顿·库奇 饰)在小时候经历了一系列糟糕的事情,损坏了他原本完美的人生。
在童年可怕记忆的折磨下,伊万请求心理医生的帮助,医生鼓励他把发生的事情一件件详细记下来,但是事情变得越来越糟糕。
</p>
</body>
</html>
注意:当浏览器窗口,字体的大小改变时,设置的css样式同样能适用。所以<span>标签不能复制first-line。因为当它显示在用户浏览器上时,网页作者不知道首行 在哪里结束。
(2):first-letter伪元素可以为块元素的首个字母添加特定的样式。
eg:
<style>
p:first-letter{
background-color: green;
}
</style>
CSS_选择符的更多相关文章
- CSS_高级选择符
2016-11-07 <css入门经典>第八章 1.属性选择器 选择器 描述 [attribute] 用于选取带有指定属性的元素. [attribute=value] 用于选取带有指定属性 ...
- CSS基础篇之选择符2
属性选择符: 选择符 版本 描述 E[att] CSS2 选择具有att属性的E元素. E[att="val"] CSS2 选择具有att属性且属性值等于val的E元素. E[at ...
- CSS基础篇之选择符
关系选择符 E F 包含选择符(Descendant combinator) CSS1 选择所有被E元素包含的F元素. <html> <head> <meta chars ...
- 30个你必须记住的CSS选择符
所以你学会了基础的id,类和后代选择符,然后你就一直用它们了吗?如果是这样,你丢失了(css的)巨大的灵活性.在本文中提到的很多选择器属于CSS3规范的一部分,因此,只有在现代浏览器中才可使用. 1. ...
- DOM扩展-Selectors API(选择符 API)、元素遍历
DOM扩展 对DOM的两个主要扩展是SelectorsAPI(选择符API)和HTML5 SelectorsAPI(选择符API)是由W3C发起制定的一个标准,致力于浏览器原生支持CSS查询,Sele ...
- html基本选择符的使用
一.选择符在运用在CSS设计样式时对HTML的指定有至关重要的作用! 二.研究 普通选择符: 1.类型选择符:它可以选择同一个类型的元素! 例如:h1,h2 { color: ...
- CSS属性选择符
属性选择符: E[att] 选择具有att属性的E元素. <style type="text/css"> a[class]{ background-color: red ...
- css选择符
E>F:子选择符,选择所有作为E元素的子元素F.<style type="text/css">li>a {color: #ccc;}</style&g ...
- CSS高级选择符
2016-11-07 <css入门经典>第八章 1.属性选择器 选择器 描述 [attribute] 用于选取带有指定属性的元素. [attribute=value] 用于选取带有指定属性 ...
随机推荐
- twitter typeahead控件使用经历
typeahead控件可以用于自动完成这个功能,在jQuery的UI中也有自动完成的控件.以前都是用jQuery UI中的自动完成的控件,但这次想用个轻量级的自动完成的控件,因此就调查了一下typeh ...
- loadrunner下的putty和plink
loadrunner中是有集成plink和putty的,难怪可以通过监控机监控linux上的负载情况呢,可以通过这个命令来进行访问:C:\Program Files\Mercury\LoadRunne ...
- ibatis的queyrForList和queryForMap区别
https://blog.csdn.net/z69183787/article/details/47360825 https://blog.csdn.net/zyq527758142/article/ ...
- 20165235 实验二Java面向对象程序设计
20165235 Java面向对象程序设计 姓名:祁瑛 学号:20165235 班级:1652 实验课程:JAVA程序设计 实验名称:Java面向对象程序设计 实验时间:2018.4.14 指导老师: ...
- day 57 jQuery插件
在jQuery的console里面 '321'+8 输出结果是"3218" 直接作为字符串给拼接上了 如果是"321"-8 输出结果就是313 直接转换成数 ...
- 怎样将一个Long类型的数据转换成字节数组
直接上代码: //先写进去 long n = 1000000L; ByteArrayOutputStream baos = new ByteArrayOutputStream(); DataOutpu ...
- Java 之 Web前端(五)
1.过滤器 a.定义:是一个中间组件,用于拦截源数据和目的数据之间的消息,并过滤二者之间传递的数据 b.步骤: ①建class继承Filter实现抽象方法 public class EncodingF ...
- SVM:随机产生100个点,建立模型,找出超平面方程——Jaosn niu
import numpy as np import pylab as pl from sklearn import svm # we create 40 separable points #np.ra ...
- Ultra-QuickSort POJ - 2299 (逆序对)
In this problem, you have to analyze a particular sorting algorithm. The algorithm processes a seque ...
- 多媒体开发(8):调试FFmpeg
编译FFmpeg得到二进制文件,之后就是对二进制库的调用,这时FFmpeg就像一个黑盒子.作为程序员,难道不想研究一下FFmpeg的具体实现?比如是怎么拿到歌曲信息的.怎么解码的.怎么推流的,等等. ...