分享

CSS选择器大全详解:

 大明遺民 2018-09-28
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

    本站是提供个人知识管理的网络存储空间,所有内容均由用户发布,不代表本站观点。请注意甄别内容中的联系方式、诱导购买等信息,谨防诈骗。如发现有害或侵权内容,请点击一键举报。
    转藏 分享 献花(0

    0条评论

    发表

    请遵守用户 评论公约

    类似文章 更多