css-css的常用选择器

css-css的常用选择器

1.类选择器

<style type="text/css">
	.top{color:red;}
</style>

<p class="top">类选择器</p>

2.id选择器

<style type="text/css">
	#top{color:red;}
</style>

<p id="top">id选择器</p>

3.标签选择器

<style type="text/css">
	p{color:red;}
</style>

<p>标签选择器</p>

4.群组选择器

<style type="text/css">
	p,h1,h2{color:red;}
</style>

<p>标签选择器</p>
<h1>标签选择器1</h1>
<h2>标签选择器2</h2>

附

• .intro选择class="intro"的所有元素。1
• #firstname选择id="firstname"的所有元素。1
• *选择所有元素。2
• p选择所有<p>元素。1
• div,p选择所有<div>元素和所有<p>元素。1
• divp选择<div>元素内部的所有<p>元素。1
• div>p选择父元素为<div>元素的所有<p>元素。2
• div+p选择紧接在<div>元素之后的所有<p>元素。2
• [target]选择带有target属性所有元素。2
• [target=_blank]选择target="_blank"的所有元素。2
• [title~=flower]选择title属性包含单词"flower"的所有元素。2
• [lang|=en]选择lang属性值以"en"开头的所有元素。2
• a:link选择所有未被访问的链接。1
• a:visited选择所有已被访问的链接。1
• a:active选择活动链接。1
• a:hover选择鼠标指针位于其上的链接。1
• input:focus选择获得焦点的input元素。2
• p:first-letter选择每个<p>元素的首字母。1
• p:first-line选择每个<p>元素的首行。1
• p:first-child选择属于父元素的第一个子元素的每个<p>元素。2
• p:before在每个<p>元素的内容之前插入内容。2
• p:after在每个<p>元素的内容之后插入内容。2
• p:lang(it)选择带有以"it"开头的lang属性值的每个<p>元素。2
• p~ul选择前面有<p>元素的每个<ul>元素。3
• a[src^="https"]选择其src属性值以"https"开头的每个<a>元素。3
• a[src$=".pdf"]选择其src属性以".pdf"结尾的所有<a>元素。3
• a[src*="abc"]选择其src属性中包含"abc"子串的每个<a>元素。3
• p:first-of-type选择属于其父元素的首个<p>元素的每个<p>元素。3
• p:last-of-type选择属于其父元素的最后<p>元素的每个<p>元素。3
• p:only-of-type选择属于其父元素唯一的<p>元素的每个<p>元素。3
• p:only-child选择属于其父元素的唯一子元素的每个<p>元素。3
• p:nth-child(2)选择属于其父元素的第二个子元素的每个<p>元素。3
• p:nth-last-child(2)同上，从最后一个子元素开始计数。3
• p:nth-last-of-type(2)同上，但是从最后一个子元素开始计数。3
• p:last-child选择属于其父元素最后一个子元素每个<p>元素。3
• :root选择文档的根元素。3
• p:empty选择没有子元素的每个<p>元素（包括文本节点）。3
• #news:target选择当前活动的#news元素。3
• input:enabled选择每个启用的<input>元素。3
• input:disabled选择每个禁用的<input>元素3
• input:checked选择每个被选中的<input>元素。3
• :not(p)选择非<p>元素的每个元素。3
• ::selection选择被用户选取的元素部分。3