CSS自用学习笔记（一）——选择器

选择器

• 基本选择

1. .class

.intro{}            //选择 class="intro" 的所有元素  

2. .class1.class2

.intro1.intro2 {}  //选择 class="intro1 intro2" 的所有元素。

3. .class1 .class2

<div class="class1">
      <p class="class2"></P> (要选的)
</div>

.class1 .class2{}  //选择类名 class1 元素后代的所有类名 class2 元素  

4. #id

#firstname{}       //选择 id="firstname" 的元素 

5. *

*{}                // 选择所有元素

6. element

p{}                //选择所有<p>元素

7. element.class

p.intro{}          //选择 class="intro" 的所有p元素

8. element1，element2

p,a{}              //选择所有<p>元素和<a>元素

9. element1 element2

p a {}             //选择所有<p>包含的<a>元素

10. element1 > element2

p > a{}            //选择父元素是<p>的所以<a>元素

11. element1 + element2

div+p{}            //选择紧跟 <div> 元素的首个 <p> 元素。

12. element1 ~ element2

p ~ ul {}          //选择前面有 <p> 元素的每个 <ul> 元素

• 属性选择：

13. [attribute]

[target] {}        //选择带有target属性的所有元素

<a href="" target="_blank">disney.com</a>   //都被选中
<a href="" target="_top">wikipedia.org</a>  //都被选中

14. [attribute=value]

[target=_blank]{}    //选择带有 target="_blank" 属性的所有元素

<a href="" target="_blank">disney.com</a>   //被选中
<a href="" target="_blank">dis.com</a>      //被选中
<a href="" target="_top">wikipedia.org</a>  //不被选

15. [attribute~=value]

[title~=flower]{}    //选择 title 属性包含单词 "flower" 的所有元素。

<img src="" title="tulip flower" />   //被选中
<img src="" title="aaaa flower" />    //被选中
<img src="" title="lupu bridge" />    //不被选

16. [attribute^=value]

img[title^=flower]{}   //选择其title属性值以"flower"开头的每个<img>元素。

<img src="" title="flower aaa" />     //被选中
<img src="" title="aaaa flower" />    //不被选
<a href="" title="flower aaa" />     //不被选
<img src="" title="lupu bridge" />    //不被选

17. [attribute$=value]

img[title$=flower]{}   //选择其title属性值以"flower"结尾的每个<img>元素。

<img src="" title="flower aaa" />     //不被选
<img src="" title="aaaa flower" />    //被选中
<a  href="" title="aaaa flower"/>    //不被选
<img src="" title="lupu bridge" />    //不被选

18. [attribute|=value]

[lang|=en] {}        // 选择lang属性值以"en"开头的所有元素

<p lang="en-us">Hi!</p>     //被选中
<p lang="us">Hi!</p>        //不被选

19. [attribute*=value]

a[href*="abc"] {}    //选择href属性值中包含"abc"子串的每个<a>元素。

<a class="test">这是段落中的文本。</a>   //被选中 
<div class="test">第三个 div 元素。</div>   //不被选中
<p class="test">这是段落中的文本。</p>      //不被选中

• 链接选择：

20. :active

a:active{}        //选择活动的链接（正在点击的）

21. :link

a:link{}          //选择未访问过的链接

22. :visited

a:visited{}          //选择所有已访问的链接

已访问，未访问, 正在访问

• 前后插入内容：

23. ::after

p::after{}           //给p元素之后插入内容

24. ::before

p::before{}          //给p元素之前插入内容

• input属性选择：

25. :checked

input:checked {}    //每个被选中的<input>元素

26. :default

input:default{}     //选择刚开始默认的<input>元素

27. disabled

input:disabled{}     //每个被禁用的<input>元素

28. :enabled

input:enabled{}      //每个启用的<input>元素

29.:focus

input:focus {}       //获得焦点的<input>

30.:in-range

input:in-range{}    //选择值在范围内的<input>元素

31. ::placeholder

input::placeholder{}   //选择已规定 "placeholder" 属性的 input 元素。

32.:read-write

input:read-write {}     //选择未规定 "readonly" 属性的 input 元素。

33. :required

input:required{}       //选择已经规定 "readonly" 属性的 input 元素。

34. :valid

input:valid{}          //选择带有有效值的所有 input 元素。  

35. :optional

input:optional{}       //选择不带 "required" 属性的 input 元素。

<p>可选的 input 元素：<br><input></p>        //选中
<p>必填的 input 元素：<br><input required></p>  //未选中

36. input:out-of-range

input:out-of-range{}   //选择值超出指定范围的 input 元素。

37.:read-only

input:read-only{}       //选择已规定 "readonly" 属性的 input 元素。

<input type="number" min="5" max="10" value="17">  //选中
<input type="number" min="5" max="10" value="7">   //未选中

• 子类选择器

38. :empty

p:empty{}           //没有子元素的每个<p>元素

<p>第一个段落。</p>   //没选中
<p></p>              //选中

39. :first-child

p:first-child{}      //<p>父元素的第一个<p>元素

<div>
  <p>父元素首个子元素。</p>     //选中
  <p></p>                     //没选中
</div>

40. ::first-letter

p::first-letter{}    //选择每个<p>元素的首字母

41. :first-line

p:first-line {}     //选择每个<p>元素的首行

42. :first-of-type

p:first-of-type{}    //父元素的首个<p>元素

<div>
  <p>1111</p>        //选中
  <p>2222</p>
</div>
<p>这是第二个段落。</p>   //选中
<p>这是第三个段落。</p>   //未选中

43. :nth-child(n)

p:nth-child(2){}    //选择父元素的第二个子元素的<p>元素

44. :nth-last-child(n)

p:nth-last-child(2){}   //选择父元素的倒数第二个子元素的<p>元素

45. :nth-of-type(n)

p:nth-of-type(2){}        //选择父元素第二个<p>元素

46. :nth-last-of-type(n)

p:nth-last-of-type(2){}   //选择父元素的倒数第二个<p>元素

47. :only-of-type

p:only-of-type        //选择父元素唯一的<p>元素的每个<p>元素。

<!DOCTYPE html>
<html>
<head>
<style> 
p:only-of-type
{
background:#ff0000;
}
</style>
</head>

<body>

<div>
<p>这是一个段落。</p>
</div>

<div>
<p>这是一个段落。</p>
<p>这是一个段落。</p>
</div>

</body>
</html>

48. :only-child

p:only-child{}         //选择父元素的唯一子元素的每个<p>元素。

<div>
  <p>这是一个段落。</p>           //选中
</div>
<div>
  <span>这是一个 span。</span>   //未选中
  <p>这是一个段落。</p>          //未选中
</div>

• 其他分类 49.:hover

a::hover {}          //选择鼠标指针位于其上的元素

50. :fullscreen

:fullscreen        //处于全屏的元素

:fullscreen {
  background-color: yellow;
}

<button onclick="openFullscreen();">打开全屏模式</button>
<button onclick="closeFullscreen();">关闭全屏模式</button>

<script>
var elem = document.documentElement;
function openFullscreen() {
  if (elem.requestFullscreen) {
    elem.requestFullscreen();
  } else if (elem.webkitRequestFullscreen) { /* Safari */
    elem.webkitRequestFullscreen();
  } else if (elem.msRequestFullscreen) { /* IE11 */
    elem.msRequestFullscreen();
  }
}

function closeFullscreen() {
  if (document.exitFullscreen) {
    document.exitFullscreen();
  } else if (document.webkitExitFullscreen) { /* Safari */
    document.webkitExitFullscreen();
  } else if (document.msExitFullscreen) { /* IE11 */
    document.msExitFullscreen();
  }
}
</script>

51. :not(selector)

:not(p){}           //选择非<p>元素的每个元素。

<h1>这是标题</h1>                    //选中
<p>这是一个段落。</p>                //未选中
<p>这是另一个段落。</p>              //未选中
<div>这是 div 元素中的文本。</div>    //选中

不常用：

52.:root

:root{}                //选择文档的根元素 HTML

53.::selection

::selection{}           //选择用户已选取的元素部分

54.:target

#news:target{}          //选择当前活动的 #news 元素

补充：（子类选择器常用）

odd奇数
even偶数

p:nth-of-type(odd){}
p:nth-of-type(even){}

使用公式 (an + b)。描述：表示周期的长度，n 是计数器（从 0 开始），b 是偏移值

p:nth-of-type(3n+0){}  // 下标3倍数的所有p