css的属性选择器简单介绍

css中最常用的5个选择器

id选择器(唯一)

html:
	<div id="live">休息休息下休息休息下小行星</div>
css:
	#live{
	background:red;
	}

class选择器(多个)

hmtl:
	<ul>
		<li>1231</li>
		<li class="bac">124</li>
		<li>12312</li>
		<li class="bac">32423</li>
	</ul>
css:
	.bac{
	background:pink;
	}

标签选择器(将所有的P标签都加上同一的样式)

html:
	<p>skf</p>
	<p>sfkll</p>
	<p>jljl</p>
css:
	p{
	background:blue;
}

通配符选择器

*：页面的所有标签
css:
	*{background:pink;}

属性选择器

	[value]:选取到标签的属性有value的标签
	[value=a]:选取到标签的属性值为a的标签
	：hover ==>选择鼠标指针指向的链接

1. p 选择所有 <p> 元素。

html:
		<p>skf</p>
		<p>sfkll</p>
		<p>jljl</p>
	css:
		p{
		background:blue;
	}

3. div,p 选择所有 <div> 元素和所有<p> 元素。

    h1,p
{ 
background-color:yellow;
}

3. div p 选择 <div> 元素内部的所有 <p> 元素。

div p
{ 
background-color:yellow;
}

4.div>p 选择父元素为 <div> 元素的所有 <p> 元素。

div>p
{ 
background-color:yellow;
} 	

5.div+p 选择紧接在 <div> 元素之后的所有 <p> 元素。

div>p
{ 
background-color:yellow;
} 	

6. [target] 选择带有 target 属性所有元素。
   为带有 target 属性的 元素设置样式：

a[target]
{ 
background-color:yellow;
}

7. [target=_blank]
   选择 target="_blank" 的所有元素。

a[target=_blank]
{ 
background-color:yellow;
} 	 

8. [attribute~=value] [title~=flower]
   选择 title 属性包含单词 “flower” 的所有元素。

[title~=flower]
{ 
background-color:yellow;
} 	

9. [lang|=en]
   选择 lang 属性值以 “en” 开头的所有元素。

 [lang|=en]
{ 
background-color:yellow;
}	

10. :link a:link 选择所有未被访问的链接。

	a:link
{ 
background-color:yellow;
}

11. :visited a:visited 选择所有已被访问的链接。

a:visited
{ 
background-color:yellow;
}

12. 12.:active a:active 选择活动链接。

a:active
{ 
background-color:yellow;
}

13. :hover a:hover 选择鼠标指针位于其上的链接。

a:hover
{ 
background-color:yellow;
}

14. :focus input:focus 选择获得焦点的 input 元素。

input:focus
{ 
background-color:yellow;
}

15. :first-letter p:first-letter 选择每个 <p> 元素的首字母

p:first-letter
{ 
font-size:200%;
color:#8A2BE2;
}

16. :first-line p:first-line 选择每个 <p> 元素的首行

p:first-line
{ 
background-color:yellow;
}

17. :first-child
    p:first-child 选择属于父元素的第一个子元素的每个 <p> 元素

p:first-child
{ 
background-color:yellow;
}

18. :before p:before 在每个

<p> 元素的内容之前插入内容

p:before
{ 
content:"台词：";
}

19. :after p:after 在每个 <p> 元素的内容之后插入内容

p:after
{ 
content:"台词：";
}

20. :lang(language) p:lang(it) 选择带有以 “it” 开头的 lang 属性值的每个<p> 元素

p:lang(en)
{ 
background:yellow;
}

21. element1~element2 p~ul 选择前面有 <p>元素的每个 <ul > 元素

p~ul
{
background:#ff0000;
}

22- [attribute^=value] a[src^=“https”] 选择其 src 属性值以 “https” 开头的每个 <a>元素

div[class^="test"]
{
background:#ffff00;
}

23. [attribute$=value]a[src$=".pdf"] 选择其 src 属性以 “.pdf” 结尾的所有 <a> 元素

div[class$="test"]
{
background:#ffff00;
}

24. [attribute*=value] a[src*=“abc”] 选择其 src 属性中包含 "abc"子串的每个 <a> 元素

div[class*="test"]
{
background:#ffff00;
}

25. :first-of-type p:first-of-type 选择属于其父元素的首个 <p>元素的每个 <p> 元素

p:first-of-type
{
background:#ff0000;
}

26. :last-of-type p:last-of-type 选择属于其父元素的最后 <p>元素的每个 <p> 元素。

p:last-of-type
{
background:#ff0000;
}

27. :only-of-type p:only-of-type 选择属于其父元素唯一的 <p>元素的每个 <p> 元素。

p:only-of-type
{
background:#ff0000;
}

28. :only-child p:only-child 选择属于其父元素的唯一子元素的每个 <p>元素。

p:only-child
{
background:#ff0000;
}

29. :nth-child(n) p:nth-child(2) 选择属于其父元素的第二个子元素的每个<p> 元素。

p:nth-child(2)
{
background:#ff0000;
}

30. :nth-last-child(n) p:nth-last-child(2) 同上，从最后一个子元素开始计数

p:nth-last-child(2)
{
background:#ff0000;
}

31. :nth-of-type(n) p:nth-of-type(2) 选择属于其父元素第二个 <p> 元素的每个 <p> 元素。

p:nth-of-type(2)
{
background:#ff0000;
}

32. :nth-last-of-type(n) p:nth-last-of-type(2) 同上，但是从最后一个子元素开始计数

p:nth-last-of-type(2)
{
background:#ff0000;
}

33. :last-child p:last-child 选择属于其父元素最后一个子元素每个 <p> 元素

p:last-child
{ 
background:#ff0000;
}

34. :root :root 选择文档的根元素

:root
{ 
background:#ff0000;
}

35. :empty p:empty 选择没有子元素的每个 <p> 元素（包括文本节点）

p:empty
{ 
background:#ff0000;
}

36. :target #news:target 选择当前活动的 #news 元素。

p:target
{ 
border: 2px solid #D4D4D4;
background-color: #e5eecc;
}

37. :enabled input:enabled 选择每个启用的 <input> 元素。

input[type="text"]:enabled
{ 
background-color: #ff0000;
}

38. :disabled input:disabled 选择每个禁用的 < input> 元素

input[type="text"]:disabled
{ 
background-color: #dddddd;
}

39. :checked input:checked 选择每个被选中的 <input > 元素。

input:checked
{ 
background-color: #ff0000;
}

40. :not(selector) :not( p ) 选择非 <p> 元素的每个元素。

:not(p)
{ 
background-color: #ff0000;
}

41. ::selection ::selection 选择被用户选取的元素部分。

<!--选择部分颜色变为红色-->
::selection
{
color:#ff0000;
}

::-moz-selection
{
color:#ff0000;
}

总结：

在学习前端的时候要做到活学活用，在编辑这个文档的时候我发现"<xxx>“这个元素自动编译导致文本换行（自动识别前边为一个段落），为解决这个可以加”<span>“行内元素将其连接成为一行。