CSS 选择器
css 基础选择器的优先级
important>Style>ID> CLASS>元素>通配符*
1.id 选择器
#red {color:red;}
2.类选择器
.center {text-align: center}
类选择器结合元素选择器
p.words{color:red;}
CSS 多类选择器
在 IE7 之前的版本中，不同平台的 Internet Explorer 都不能正确地处理多类选择器。
<p class="important warning">
This paragraph is a very important warning.
</p>
.important {font-weight:bold;}
.warning {font-style:italic;}
.important.warning {background:silver;}
3.元素选择器/类型选择器
p{color:red;}
4.属性选择器
只有在规定了 !DOCTYPE 时，IE7 和 IE8 才支持属性选择器。在 IE6 及更低的版本中，不支持属性选择。
属性选择器在为不带有 class 或 id 的表单设置样式时特别有用
[title]{color:red;}
a[href] {color:red;}
a[href][title] {color:red;}
属性和值选择器
[title=study]{border:5px solid blue;}
a[title="school"] {color: red;}
a[href="https://hao.360.com/"][title="school"] {color: red;}
属性与属性值必须完全匹配
<p class="important warning">This paragraph is a very important warning.</p>
p[class="important warning"] {color: red;}
属性和值选择器 - 多个值---适用于由空格分隔的属性值：
[title~="study"]{border:5px solid blue;}
属性和值选择器 - 多个值---适用于由连字符分隔的属性值：
[lang|="en"] { color:red; }
属性和值选择器 - 多个值---匹配属性值以指定值开头的每个元素：
[title^="study"]{border:5px solid blue;}
属性和值选择器 - 多个值---匹配属性值以指定值结尾的每个元素：
[title$="study"]{border:5px solid blue;}
属性和值选择器 - 多个值---匹配属性值中包含指定值的每个元素：
[title*="study"]{border:5px solid blue;}
5.通配符选择器
* {color:red;}
6.派生选择器
li strong {
font-style: italic;
font-weight: normal;
}
h1 em {color:red;}
<h1>This is a <em>important</em> heading</h1>
<p>This is a <em>important</em> paragraph.</p>
子元素选择器
h1 > strong {color:red;}
<h1>This is <strong>very</strong> <strong>very</strong> important.</h1>
<h1>This is <em>really <strong>very</strong></em> important.</h1>
相邻兄弟选择器
li + li {font-weight:bold;}
<div>
<ul>
<li>List item 1</li>
<li>List item 2</li>
<li>List item 3</li>
</ul>
<ol>
<li>List item 1</li>
<li>List item 2</li>
<li>List item 3</li>
</ol>
</div>
7.伪类
CSS 伪类用于向某些选择器添加特殊的效果。
锚伪类
a:link {color: #FF0000} /* 未访问的链接 */
a:visited {color: #00FF00} /* 已访问的链接 */
a:hover {color: #FF00FF} /* 鼠标移动到链接上 */
a:active {color: #0000FF} /* 选定的链接 */
提示：在 CSS 定义中，a:hover 必须被置于 a:link 和 a:visited 之后，才是有效的。【不是很理解】
提示：在 CSS 定义中，a:active 必须被置于 a:hover 之后，才是有效的。
提示：伪类名称对大小写不敏感。
：first-child 伪类
p:first-child {font-weight: bold;}
li:first-child {text-transform:uppercase;}
<div>
<p>These are the necessary steps:</p>
<ul>
<li>Intert Key</li>
<li>Turn key <strong>clockwise</strong></li>
<li>Push accelerator</li>
</ul>
<p>Do <em>not</em> push the brake at the same time as the accelerator.</p>
</div>
:lang 伪类【不是很理解】
:lang 伪类向带有指定 lang 属性的元素添加样式。
:lang 伪类根据元素的语言编码匹配元素。这种语言信息必须包含在文档中，或者与文档关联，不能从 CSS 指定。:lang 的处理与 |= 选择器相同。
<html> <head> <style type="text/css"> q:lang(no) { quotes: "~" "~" } </style> </head> <body> <p>:lang 伪类允许您为不同的语言定义特殊的规则。在下面的例子中，在下面的例子中，:lang 类为带有值为 "no" 的 lang 属性的 q 元素定义引号的类型：</p> <p>一些文本 <q lang="no">段落中的引用</q> 一些文本。</p> </body> </html>
8.伪元素
CSS 伪元素用于向某些选择器设置特殊效果。
:first-line 伪元素
"first-line" 伪元素用于向文本的首行设置特殊样式。
<html> <head> <style type="text/css"> p:first-line { color: #ff0000; font-variant: small-caps } </style> </head> <body> <p> You can use the :first-line pseudo-element to add a special effect to the first line of a text! </p> </body> </html>
"first-line" 伪元素只能用于块级元素。
:first-letter 伪元素
"first-letter" 伪元素用于向文本的首字母设置特殊样式。
<html> <head> <style type="text/css"> p:first-letter { color: #ff0000; font-size:xx-large } </style> </head> <body> <p> You can use the :first-letter pseudo-element to add a special effect to the first letter of a text! </p> </body> </html>
:before 伪元素
"before" 伪元素可以在元素的内容之前插入新内容。
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html> <head> <style type="text/css"> h1:before {content:url(/i/w3school_logo_white.gif)} </style> </head> <body> <h1>This is a heading</h1> <p>The :before pseudo-element inserts content before an element.</p> <h1>This is a heading</h1> <p><b>注释：</b>如果已规定 !DOCTYPE，那么 Internet Explorer 8 （以及更高版本）支持 content 属性。 </body> </html>
:after 伪元素
":after" 伪元素可以在元素的内容之后插入新内容。
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html> <head> <style type="text/css"> h1:after {content:url(/i/w3school_logo_white.gif)} </style> </head> <body> <h1>This is a heading</h1> <p>The :before pseudo-element inserts content before an element.</p> <h1>This is a heading</h1> <p><b>注释：</b>如果已规定 !DOCTYPE，那么 Internet Explorer 8 （以及更高版本）支持 content 属性。 </body> </html>
浙公网安备 33010602011771号