1、选择器:
*选择器(selector),会告诉浏览器:网页 上的哪些元素需要设置什么样的样式。
*比如:p这个选择器就表示选择页面中的所 有的p元素,在选择器之后所设置的样式会 应用到所有的p元素上
元素选择器:
*元素选择器(标签选择器),可以根据标 签的名字来从页面中选取指定的元素。
*语法: 标签名 { }
*比如p则会选中页面中的所有p标签,h1会 选中页面中的所有h1标签。
2、类选择器:
类选择器,可以根据元素的class属性值选取元素。
语法:
.className{}
比如.hello会选中页面所有class属性为hello的元素。
3、ID选择器
ID选择器,可以根据元素的id属性值选取元素。
语法:#地{}
比如:#box会选中页面中的id属性值为box的元素,和class属性的不同,id属性是不能重复的。
4、复合选择器
复合选择器,可以同时使用多个选择器,这样可以先择同时满足多个选择器的元素。
语法:选择器,选择器{}
例如:div.box1会选中页面中具有box1这个class的div元素。
5、群组选择器:
群组选择器,可以同时使用多个选择器,多个选择器将同时应用指定的样式。
语法:选择器1,选择器2,选择器3{}
比如p,hello,#box会同时选中页面中p元素,class为hello的元素,id为box的元素。
6、通用选择器:*{}
7、标签之间的关系:
祖先元素:直接或间接包含后代元素的元素。
后代元素:直接或间接被祖先元素包括的元素。
父亲元素:直接包含子元素的元素。
子元素:直接被父元素包含的元素。
8、兄弟元素:拥有相同父元素的元素。
9、后代选择器:后代选择器可以根据标签的关系,为处在元素内部的代元素设置样式。
语法:祖先元素,后代元素,后代元素{}
比如:p strong会选中页面中的所有中的p元素内的strong元素。
10、给链接定义样式:
正常连接:a:link
访问过的链接:a:visited
鼠标还过的链接:a:hover
鼠标点击的链接:a:active
其他:
获取焦点:fcous
指定元素前:before
指定元素后:after
远中的元素::selection
11、给段落定义样式:
首字母:first-letter
首行:first-line
12、自选择器:父选择器>子选择器
其他的子元素选择器
:first-child 选择第一个子标签
:last-child选择做后一个子标签
:not-child选择指定的子元素
:first-of-type
:last-of-type
:nth-of-type这三者对应不同的指定类型的子元素
13、兄弟选择器:兄弟元素+兄弟元素{}查找后面一个兄弟元素
查找后面的所有兄弟元素. 兄弟元素~兄弟元素{}
否定伪元素:not(选择器){}
比如p:not(.hello)表示选择所有的p元素但 是class为hello的除外。
*********************************************************************
1题 plate(元素选择器)
2题bento(元素选择器)
3题#fancy(id选择器)
4题plate apple(后代元素选择器)
5题#fancy pickle(复合选择器)
6题.small(类选择器)
7题bento .small,plate .small(并集选择器)
8题bento orange(后代元素选择器)
9题plate,bento,plate(并集选择器)
10题*(通配选择器)
11题plate*(后代元素选择器)
12题plate + apple(兄弟元素选择器)
13题bento~pickle(兄弟元素选择器)
14题plate > apple(子类元素选择器)
15题orange:first-child(子元素选择器)
16题:only-child(子元素选择器)
17题.small:last-child(子元素选择器)
18题plate:nth-child(3)(子元素选择器)
19题:nth-last-child(4)(子元素选择器)
20题apple:first-of-type(子元素选择器)
21题plate:nth-of-type(even)(子元素选择器)
22题plate:nth-of-type(2n+3)(子元素选择器)
23题apple:only-of-type(子元素选择器)
24题.small:nth-child(even)(子元素选择器)
25题bento:empty(子元素选择器)
26题apple:not(.small)(not选择器)