1.标签选择器 2.类选择器 3.id选择器 4.A B表示后代选择器 5.A,B表示与集选择器 6.A.B表示交集选择器 7.A*表示A的所有后代元素,如果A是<body>可省略A不写 8.A+B表示选择紧接着A元素后的B元素(A和B有共同的父元素) h1 + p {margin-top:50px;} 选择紧接在 h1 元素后出现的段落,h1 和 p 元素拥有共同的父元素 9.A~B: p~ul选择器 p之后出现的所有ul。 两种元素必须拥有相同的父元素,但是 ul不必直接紧随 p。 10.A>B: css3特有的选择器,A>B 表示选择A元素的所有子B元素。 与A B的区别在于,A B选择所有后代元素,而A>B只选择一代。 11.p:first-child选择属于其父元素的首个子元素的每个 <p> 元素 设置每个 <ul> 的首个子元素,并设置其样式: ul>:first-child { background:yellow; } 12.:only-child :only-child 选择器匹配属于其父元素的唯一子元素的每个元素。 ul li:only-child 选择属于ul唯一li的li 13.last-child p:last-child 指定属于其父元素的最后一个子元素的 p 元素的背景色 14.nth-child() :nth-child(n) 选择器匹配属于其父元素的第 N 个子元素,不论元素的类型。 n 可以是数字、关键词或公式。 规定属于其父元素的第二个子元素的每个 p 的背景色: p:nth-child(2) { background:#ff0000; } 15.nth-last-child() 规定属于其父元素的第二个子元素的每个 p 元素,从最后一个子元素开始计数: p:nth-last-child(2) { background:#ff0000; } 16.first-of-type 指定父元素的首个 p 元素的背景色: p:first-of-type { background:#ff0000; } :first-of-type 选择器匹配属于其父元素的特定类型的首个子元素的每个元素。 提示:等同于 :nth-of-type(1)。 17.nth-of-type(n) 规定属于其父元素的第二个 p 元素的每个 p: p:nth-of-type(2) { background:#ff0000; } :nth-of-type(n) 选择器匹配属于父元素的特定类型的第 N 个子元素的每个元素. n 可以是数字、关键词或公式。 提示:请参阅 :nth-child() 选择器,该选择器选取父元素的第 N 个子元素,与类型无关。 18.only-of-type :only-of-type 选择器匹配属于其父元素的特定类型的唯一子元素的每个元素 19.last-of-type :last-of-type 选择器匹配属于其父元素的特定类型的最后一个子元素的每个元素。 20.empty :empty 选择器匹配没有子元素(包括文本节点)的每个元素 21.:not(X)选择除了X选择器以外的元素 22.属性选择器 选择器 描述 [attribute] 用于选取带有指定属性的元素。 [attribute=value] 用于选取带有指定属性和值的元素。 [attribute~=value] 用于选取属性值中包含指定词汇的元素。 [attribute|=value] 用于选取带有以指定值开头的属性值的元素,该值必须是整个单词。 [attribute^=value] 匹配属性值以指定值开头的每个元素。 [attribute$=value] 匹配属性值以指定值结尾的每个元素。 [attribute*=value] 匹配属性值中包含指定值的每个元素。 A[attribute]选择所有拥有attribute属性的A
|
|