CSS选择器笔记.docx
- 文档编号:25528777
- 上传时间:2023-06-09
- 格式:DOCX
- 页数:20
- 大小:22.05KB
CSS选择器笔记.docx
《CSS选择器笔记.docx》由会员分享,可在线阅读,更多相关《CSS选择器笔记.docx(20页珍藏版)》请在冰豆网上搜索。
CSS选择器笔记
CSS选择器笔记
阮一峰整理
参考网址:
456BereaStreet
一、基本选择器
序号
选择器
含义
1.
*
通用元素选择器,匹配任何元素
2.
E
标签选择器,匹配所有使用E标签的元素
3.
.info
class选择器,匹配所有class属性中包含info的元素
4.
#footer
id选择器,匹配所有id属性等于footer的元素
实例:
*{margin:
0;padding:
0;}
p{font-size:
2em;}
.info{background:
#ff0;}
p.info{background:
#ff0;}
p.info.error{color:
#900;font-weight:
bold;}
#info{background:
#ff0;}
p#info{background:
#ff0;}
二、多元素的组合选择器
序号
选择器
含义
5.
E,F
多元素选择器,同时匹配所有E元素或F元素,E和F之间用逗号分隔
6.
EF
后代元素选择器,匹配所有属于E元素后代的F元素,E和F之间用空格分隔
7.
E>F
子元素选择器,匹配所有E元素的子元素F
8.
E+F
毗邻元素选择器,匹配所有紧随E元素之后的同级元素F
实例:
divp{color:
#f00;}
#navli{display:
inline;}
#nava{font-weight:
bold;}
div>strong{color:
#f00;}
p+p{color:
#f00;}
三、CSS2.1属性选择器
序号
选择器
含义
9.
E[att]
匹配所有具有att属性的E元素,不考虑它的值。
(注意:
E在此处可以省略,比如“[cheacked]”。
以下同。
)
10.
E[att=val]
匹配所有att属性等于“val”的E元素
11.
E[att~=val]
匹配所有att属性具有多个空格分隔的值、其中一个值等于“val”的E元素
12.
E[att|=val]
匹配所有att属性具有多个连字号分隔(hyphen-separated)的值、其中一个值以“val”开头的E元素,主要用于lang属性,比如“en”、“en-us”、“en-gb”等等
实例:
p[title]{color:
#f00;}
div[class=error]{color:
#f00;}
td[headers~=col1]{color:
#f00;}
p[lang|=en]{color:
#f00;}
blockquote[class=quote][cite]{color:
#f00;}
四、CSS2.1中的伪类
序号
选择器
含义
13.
E:
first-child
匹配父元素的第一个子元素
14.
E:
link
匹配所有未被点击的链接
15.
E:
visited
匹配所有已被点击的链接
16.
E:
active
匹配鼠标已经其上按下、还没有释放的E元素
17.
E:
hover
匹配鼠标悬停其上的E元素
18.
E:
focus
匹配获得当前焦点的E元素
19.
E:
lang(c)
匹配lang属性等于c的E元素
实例:
p:
first-child{font-style:
italic;}
input[type=text]:
focus{color:
#000;background:
#ffe;}
input[type=text]:
focus:
hover{background:
#fff;}
q:
lang(sv){quotes:
"\201D""\201D""\2019""\2019";}
五、CSS2.1中的伪元素
序号
选择器
含义
20.
E:
first-line
匹配E元素的第一行
21.
E:
first-letter
匹配E元素的第一个字母
22.
E:
before
在E元素之前插入生成的内容
23.
E:
after
在E元素之后插入生成的内容
实例:
p:
first-line{font-weight:
bold;color;#600;}
.preamble:
first-letter{font-size:
1.5em;font-weight:
bold;}
.cbb:
before{content:
"";display:
block;height:
17px;width:
18px;background:
url(top.png)no-repeat00;margin:
000-18px;}
a:
link:
after{content:
"("attr(href)")";}
六、CSS3的同级元素通用选择器
序号
选择器
含义
24.
E~F
匹配任何在E元素之后的同级F元素
实例:
p~ul{background:
#ff0;}
七、CSS3属性选择器
序号
选择器
含义
25.
E[att^=”val”]
属性att的值以"val"开头的元素
26.
E[att$=”val”]
属性att的值以"val"结尾的元素
27.
E[att*=”val”]
属性att的值包含"val"字符串的元素
实例:
div[id^="nav"]{background:
#ff0;}
八、CSS3中与用户界面有关的伪类
序号
选择器
含义
28.
E:
enabled
匹配表单中激活的元素
29.
E:
disabled
匹配表单中禁用的元素
30.
E:
checked
匹配表单中被选中的radio(单选框)或checkbox(复选框)元素
31.
E:
:
selection
匹配用户当前选中的元素
实例:
input[type="text"]:
disabled{background:
#ddd;}
九、CSS3中的结构性伪类
序号
选择器
含义
32.
E:
root
匹配文档的根元素,对于HTML文档,就是HTML元素
33.
E:
nth-child(n)
匹配其父元素的第n个子元素,第一个编号为1
34.
E:
nth-last-child(n)
匹配其父元素的倒数第n个子元素,第一个编号为1
35.
E:
nth-of-type(n)
与:
nth-child()作用类似,但是仅匹配使用同种标签的元素
36.
E:
nth-last-of-type(n)
与:
nth-last-child()作用类似,但是仅匹配使用同种标签的元素
37.
E:
last-child
匹配父元素的最后一个子元素,等同于:
nth-last-child
(1)
38.
E:
first-of-type
匹配父元素下使用同种标签的第一个子元素,等同于:
nth-of-type
(1)
39.
E:
last-of-type
匹配父元素下使用同种标签的最后一个子元素,等同于:
nth-last-of-type
(1)
40.
E:
only-child
匹配父元素下仅有的一个子元素,等同于:
first-child:
last-child或:
nth-child
(1):
nth-last-child
(1)
41.
E:
only-of-type
匹配父元素下使用同种标签的唯一一个子元素,等同于:
first-of-type:
last-of-type或:
nth-of-type
(1):
nth-last-of-type
(1)
42.
E:
empty
匹配一个不包含任何子元素的元素,注意,文本节点也被看作子元素
实例:
p:
nth-child(3){color:
#f00;}
p:
nth-child(odd){color:
#f00;}
p:
nth-child(even){color:
#f00;}
p:
nth-child(3n+0){color:
#f00;}
p:
nth-child(3n){color:
#f00;}
tr:
nth-child(2n+11){background:
#ff0;}
tr:
nth-last-child
(2){background:
#ff0;}
p:
last-child{background:
#ff0;}
p:
only-child{background:
#ff0;}
p:
empty{background:
#ff0;}
十、CSS3的反选伪类
序号
选择器
含义
43.
E:
not(s)
匹配不符合当前选择器的任何元素
实例:
:
not(p){border:
1pxsolid#ccc;}
十一、CSS3中的:
target伪类
序号
选择器
含义
44.
E:
target
匹配文档中特定"id"点击后的效果
请参看HTMLDOG上关于该选择器的详细解释和实例。
Javascript面向对象编程
(一):
封装
下面就是我的学习笔记,希望对大家学习这个部分有所帮助。
我主要参考了Object-OrientedJavaScript和ProfessionalJavaScriptforWebDevelopers(2ndEdition)这两本书。
它们都是非常优秀的Javascript读物,推荐阅读。
笔记分成两部分。
今天的第一部分是讨论"封装"(Encapsulation),下一次的第二部分讨论"继承"(Inheritance)。
============================
Javascript面向对象编程
(一):
封装
作者:
阮一峰
Javascript是一种基于对象(object-based)的语言,你遇到的所有东西几乎都是对象。
但是,它又不是一种真正的面向对象编程(OOP)语言,因为它的语法中没有class(类)。
那么,如果我们要把"属性"(property)和"方法"(method),封装成一个对象,甚至要从原型对象生成一个实例对象,我们应该怎么做呢?
1.生成对象的原始模式
假定我们把猫看成一个对象,它有"名字"和"颜色"两个属性。
varCat={
name:
'',
color:
''
}
现在,我们需要根据这个原型对象,生成两个实例对象。
varcat1={};
cat1.name="大毛";
cat1.color="黄色";
varcat2={};
cat2.name="二毛";
cat2.color="黑色";
好了,这就是最简单的封装了。
但是,这样的写法有两个缺点,一是如果多生成几个实例,写起来就非常麻烦;二是实例与原型之间,没有任何办法,可以看出有什么联系。
2.原始模式的改进
我们可以写一个函数,解决代码重复的问题。
functionCat(name,color){
return{
name:
name,
color:
color
}
}
然后生成实例对象,就等于是在调用函数:
varcat1=Cat("大毛","黄色");
varcat2=Cat("二毛","黑色");
这种方法的问题依然是,cat1和cat2之间没有内在的联系,不能反映出它们是同一个原型对象的实例。
3.构造函数模式
为了解决从原型对象生成实例的问题,Javascript提供了一个构造函数(Constructor)模式。
所谓"构造函数",其实就是一个普通函数,但是内部使用了this变量。
对构造函数使用new运算符,就能生成实例,并且this变量会绑定在实例对象上。
比如,猫的原型对象现在可以这样写,
functionCat(name,color){
this.name=name;
this.color=color;
}
我们现在就可以生成实例对象了。
varcat1=newCat("大毛","黄色");
varcat2=newCat("二毛","黑色");
alert(cat1.name);//大毛
alert(cat1.color);//黄色
这时cat1和cat2会自动含有一个constructor属性,指向它们的构造函数。
alert(cat1.constructor==Cat);//true
alert(cat2.constructor==Cat);//true
Javascript还提供了一个instanceof运算符,验证原型对象与实例对象之间的关系。
alert(cat1instanceofCat);//true
alert(cat2instanceofCat);//true
4.构造函数模式的问题
构造函数方法很好用,但是存在一个浪费内存的问题。
请看,我们现在为Cat对象添加一个不变的属性"type"(种类),再添加一个方法eat(吃老鼠)。
那么,原型对象Cat就变成了下面这样:
functionCat(name,color){
this.name=name;
this.color=color;
this.type="猫科动物";
this.eat=function(){alert("吃老鼠");};
}
还是采用同样的方法,生成实例:
varcat1=newCat("大毛","黄色");
varcat2=newCat("二毛","黑色");
alert(cat1.type);//猫科动物
cat1.eat();//吃老鼠
表面上好像没什么问题,但是实际上这样做,有一个很大的弊端。
那就是对于每一个实例对象,type属性和eat()方法都是一模一样的内容,每一次生成一个实例,都必须为重复的内容,多占用一些内存。
这样既不环保,也缺乏效率。
alert(cat1.eat==cat2.eat);//false
能不能让type属性和eat()方法在内存中只生成一次,然后所有实例都指向那个内存地址呢?
回答是可以的。
5.Prototype模式
Javascript规定,每一个构造函数都有一个prototype属性,指向另一个对象。
这个对象的所有属性和方法,都会被构造函数的实例继承。
这意味着,我们可以把那些不变的属性和方法,直接定义在prototype对象上。
functionCat(name,color){
this.name=name;
this.color=color;
}
Cat.prototype.type="猫科动物";
Cat.prototype.eat=function(){alert("吃老鼠")};
然后,生成实例。
varcat1=newCat("大毛","黄色");
varcat2=newCat("二毛","黑色");
alert(cat1.type);//猫科动物
cat1.eat();//吃老鼠
这时所有实例的type属性和eat()方法,其实都是一个内存地址,指向prototype对象,因此就提高了运行效率。
alert(cat1.eat==cat2.eat);//true
6.Prototype模式的验证方法
6.1isPrototypeOf()
这个方法用来判断,某个proptotype对象和某个实例之间的关系。
alert(Cat.prototype.isPrototypeOf(cat1));//true
alert(Cat.prototype.isPrototypeOf(cat2));//true
6.2hasOwnProperty()
每个实例对象都有一个hasOwnProperty()方法,用来判断某一个属性到底是本地属性,还是继承自prototype对象的属性。
alert(cat1.hasOwnProperty("name"));//true
alert(cat1.hasOwnProperty("type"));//false
6.3in运算符
in运算符可以用来判断,某个实例是否含有某个属性,不管是不是本地属性。
alert("name"incat1);//true
alert("type"incat1);//true
in运算符还可以用来遍历某个对象的所有属性。
for(varpropincat1){alert("cat1["+prop+"]="+cat1[prop]);}
(完)
上一次的文章,主要介绍了如何"封装"数据和方法,从原型对象生成实例。
今天要介绍的是,多个原型对象之间如何"继承"。
比如,现在有一个"动物"对象,
functionAnimal(){
this.species="动物";
}
还有一个"猫"对象,
functionCat(name,color){
this.name=name;
this.color=color;
}
怎样才能使"猫"继承"动物"呢?
1.原型对象绑定
最简单的方法,大概就是使用call或apply方法,将父对象绑定在子对象上,也就是在子对象函数中加一行:
functionCat(name,color){
Animal.apply(this,arguments);
this.name=name;
this.color=color;
}
varcat1=newCat("大毛","黄色");
alert(cat1.species);//动物
2.prototype模式
更常见的做法,则是使用prototype属性。
如果"猫"的prototype对象,指向一个Animal的实例,那么所有"猫"的实例,就能继承Animal了。
Cat.prototype=newAnimal();
Cat.prototype.constructor=Cat;
varcat1=newCat("大毛","黄色");
alert(cat1.species);//动物
代码的第一行,我们将Cat的prototype对象指向一个Animal的实例。
Cat.prototype=newAnimal();
它相当于完全删除了prototype对象原先的值,然后赋予一个新值。
但是,第二行又是什么意思呢?
Cat.prototype.constructor=Cat;
原来,任何一个prototype对象都有一个constructor属性,指向它的构造函数。
也就是说,Cat.prototype这个对象的constructor属性,是指向Cat的。
我们在前一步已经删除了这个prototype对象原来的值,所以新的prototype对象没有constructor属性,所以我们必须手动加上去,否则后面的"继承链"会出问题。
这就是第二行的意思。
总之,这是很重要的一点,编程中务必要遵守。
下文都遵循这一点,即如果替换了prototype对象,
o.prototype={};
那么,下一步必然是为新的prototype对象加上constructor属性,并将这个属性指回原来的构造函数。
o.prototype.constructor=o;
3.直接继承prototype
由于Animal对象中,不变的属性都可以直接写入Animal.prototype。
所以,我们也可以让Cat()跳过Animal(),直接继承Animal.prototype。
现在,我们先将Animal对象改写:
functionAnimal(){}
Animal.prototype.species="动物";
然后,将Cat的prototype对象,然后指向Animal的prototype对象,这样就完成了继承。
Cat.prototype=Animal.prototype;
Cat.prototype.constructor=Cat;
varcat1=newCat("大毛","黄色");
alert(cat1.species);//动物
与前一种方法相比,这样做的优点是效率比较高(不用执行和建立Animal的实例了),比较省内存。
缺点是Cat.prototype和Animal.prototype现在指向了同一个对象,那么任何对Cat.prototype的修改,都会反映到Animal.prototype。
所以,上面这一段代码其实是有问题的。
请看第二行
Cat.prototype.constructor=Cat;
这一句实际上把Animal.prototype对象的constructor属性也改掉了!
alert(Animal.prototype.constructor);//Cat
4.利用空对象作为中介
由于"直接继承prototype"存在上述的缺点,所以可以利用一个空对象作为中介。
varF=function(){};
F.prototype=Animal.prototype;
Cat.prototype=newF();
Cat.prototype.constructor=Cat;
F是空对象,所以几乎不占内存。
这时,修改Cat的prototype对象,就不会影响到Animal的prototype对象。
alert(Animal.prototype.constructor);//Animal
5.prototype模式的封装函数
我们将上面的方法,封装成一个函数,便于使用。
functionextend(Child,Parent){
varF=function(){};
F.prototype=Parent.prototype;
Child.prototype=newF();
Child.prototype.constructor=Child;
Child.uber=Parent.prototype;
}
使用的时候,方法如下
extend(Cat,Animal);
varcat1=newCat("大毛","黄色");
- 配套讲稿:
如PPT文件的首页显示word图标,表示该PPT已包含配套word讲稿。双击word图标可打开word文档。
- 特殊限制:
部分文档作品中含有的国旗、国徽等图片,仅作为作品整体效果示例展示,禁止商用。设计者仅对作品中独创性部分享有著作权。
- 关 键 词:
- CSS 选择器 笔记