CSS选择器练习 - CSSDiner 详细解析

答案不唯一
练习网址 http://wuyangzengmeng.com

解析：

第01题答案：plate

第02题答案：bento //tag

第03题答案：#fancy #id

第04题答案：plate apple //后裔选择器
A B
选择在A元素中的所有B。B被称为后代，因为它在A内。
例如
p strong 选择所有在P标签内部的 所有标签
#fancy span选择任何跨度id =“fancy”的元素内部的元素

第05题答案：#fancy pickle //选择 id为"fancy" 标签内部的所有 元素

第06题答案：apple.small 或者 .small // 选择 class 为 small 的所有元素

第07题答案：orange.small //组合类选择器
A.className
您可以将类选择器与其他选择器（如类型选择器）组合使用。
例子
ul.important 选择所有的 class ="important" 的ul元素.(必须满足1.首先是1个 ul 元素, 2.class 为 important)
＃big.wide 选择id =“big” 同时他们的class ="wide"的所有元素

第08题答案：bento orange.small 或者 bento > orange.small //选择所有 bento 标签下的 class="small"的所有 orange元素

第09题答案：plate , bento //逗号组合
用逗号将不同的选择器结合起来使用
A, B
由于采用了Shatner技术，因此可以选择所有A和B元素。您可以通过这种方式组合任何选择器，并且可以指定两个以上。
例子
p,.fun 选择全部p元素以及class ="fun"的所有元素
a, p, div 选择所有的

和

第10题答案：* //选择所有

第11题答案：plate * //子代全选

★★★
第12题答案：plate + apple //(+)相邻(紧贴着的)的兄弟选择器
选择所有的(跟随 plate后面的且是apple的元素), 注意必须是紧紧跟随的, 紧贴的才算!!!
p + a
这将选择直接跟随

的所有元素。这里的 后面可能还有等, 但是只有第一个紧贴在

的后面的才会被选中。相互追随的元素称为兄弟姐妹。它们处于同一水平或深度。在此级别的HTML标记中，具有相同缩进的元素是兄弟。
例子
p + .intro选择所有符合 ( 跟随

后面的且class = "intro"的元素)
div + a选择所有符合 ( 跟随在

后面的标签)

★★★
第13题答案： bento ~ pickle //(~)一般兄弟选择器
选择跟随在bento 元素后面的所有 pickle 元素, 这里的 pickle 可能有多个, 但是只要是追随在 bento 后面连续的 pickle, 都可以被选择的到。
A~B
您可以选择跟随它的元素的所有兄弟节点。这就像相邻选择器（A + B），但是它获得所有以下元素而不是一个。
例子
A~B选择跟随A的所有B (除非B被某元素阻断了, 不然会一直选择下去)
下图是对 A+B 与 A~B的一个示意图:

第14题答案： plate > apple // (>)第一子代选择
选择某个标签下的第一层(儿子)的元素

第15题答案： plate orange:first-child //第一个孩子选择器
:first-child 选择第一个子元素。
p:first-child 选择一系列的

标签的第一个
div p：first-child 选择所有(嵌套在

元素内的第一个

)。

第16题答案： plate *:only-child //唯一的孩子（该孩子不能是爸爸）
选中嵌套在内部且只有一个元素的那个元素
!!!! 有时候我们选中某个标签内部的所有元素 一定不能忘记用<标签> *, 星号一定不能漏掉!!!

第17题答案： #fancy *:last-child , plate + pickle //上面几个结合使用

★★★★★★
第18题答案： plate:nth-child(3) //第n个孩子
``` ```

★★★
第19题答案： bento:nth-last-child(3) //倒数第n个孩子

第20题答案：apple:first-of-type //选择特定类里面的第一个
例如
span:first-of-type 选择嵌套在任何元素中的标签为 的第一个

★★★★★★★★★
第21题答案：plate:nth-of-type(2n) //跳位的运算（这招非常好用）
还有2n+1等

第22题答案：plate:nth-of-type(2n+3) //同上，初始值

第23题答案：plate apple.small:only-of-type //该标签下只有这个类型
选择在嵌套在某个元素中的唯一类型的元素
例子
p span:only-of-type    选择嵌套在
标签下的且
标签下只有一个子标签且这个子标签是的

第24题答案：orange:last-of-type, apple:last-of-type //该类型集合的最后一个

第25题答案：bento:empty //子集为空

★★★★★★★★★★★★★★★★★★
第26题答案：apple:not(.small) // 选择与(否定选择器)不匹配的所有元素
例子
:not(#fanc) 选择所有没有id ="fancy"的元素。
div:not(:first-child) 选择所有不作为第一个子元素(nth-child)的

。

table tbody tr:not(:first-child):not(:last-child) td{
  text-align: right;
/*
  以上代码可以选择table表格中tbody部分非首个、
  非最后一个的tr，并设置其子元素td文本样式居右, 
  这里面需要注意not的语法格式
*/
}
/*选中div里面非首个、非最后一个的中间p元素*/
div p:not(:first-child):not(:last-child){
}

第27题答案：[for] //   属性选择器  选择具有特定属性的所有元素
[属性]
属性出现在元素的开始标记内，如下所示：< span> attribute="value"   属性并不总是有值，它可以是空白的！
例子
a [href]选择所有具有href ="anything"属性的。
[type]选择type ="?"的所有元素。

第28题答案：plate[for]   //选择所有具有 for 属性的plate

第29题答案：[for="Vitaly"] // 属性值选择器
选择具有特定属性值的所有元素
[属性= "值"]
属性选择器区分大小写，每个字符必须完全匹配。
例子
input [type ="checkbox"] 选择所有属性是 type ="checkbox" 元素。

第30题答案：[for^="Sam"],[for^="Sarah"] // 选择具有以特定字符开头的属性值的所有元素

第31题答案：[for$="Hayato"],[for$="Minato"] // 选择具有以特定字符结尾的属性值的所有元素
例子
img[src$=".jpg"]  选择所有以.jpg结尾的标签.

第32题答案：[for*="Robbie"],[for*="Bobby"] // 选择具有包含特定字符的属性值的所有元素
[属性* = "值"]
★★★ 这是一个有用的选择器, 你会经常在class, href or src 元素中见到一些属性，
例子
img[src*="/thumbnails/"] 选择显示"thumbnails" 文件夹中图像的所有元素。
[class*="heading"] 选择类中带有"heading" 的所有元素，如class ="main-heading"和class ="sub-heading"