CSS 选择符

1.1.1 上下文选择符

用于选择指定祖先后代的元素。

article p {font-weight:bold;}【上面这条规则的目标是位于article 上下文中的p 元素】

1.1.1.1 子选择符>

section > h2 {font-style:italic;}【选择section 标签下的 h2 标签】

1.1.1.2 紧邻同胞选择符 +

h2 + p {font-variant:small-caps;}

两标签同级，且标签2是标签1的第一个兄弟元素。

1.1.1.3 一般同胞选择符~

标签1 ~ 标签2

h2 ~ a {color:red;}【只要标签2是标签1的兄弟就行。】

1.1.2 ID选择符/类选择符

1.1.2.1 常规

不用考虑文档结构。

p {font-family:helvetica, sans-serif; font-size:1.2em;}
.specialtext {font-style:italic;}

<html>

<head>

<title>css study!</title>

<style>

.specialtext {font-style:italic;}

</style>

</head>

<body>

<!-- <h1>Contextual selectors are <em>very</em> selective</h1>

<p>This text is very important!</p> -->

<h2>An H2 Heading</h2>

<p>This is paragraph1</p>

<p>Paragraph 2 has <a href="#">a link</a> in it.</p>

</section>

<h1 class="specialtext">This is a heading with the <span>same class</span> as the second paragraph.</h1>

<p>This tag has no class.</p>

<p class="specialtext"> When a tag has a class attribute, you can target it <span>regardless</span> of its position in the hierarchy.</p>

</article>

</body>

</html>

1.1.2.2 标签带类选择符

p.specialtext {color:red;}【选择 p标签下带 specialtext样式的标签】

p.specialtext span {font-weight:bold;} 【选择 p标签下带 specialtext样式的 span标签】

1.1.2.3 多类选择符

可以给元素添加多样式。

样式写法：.specialtext.featured {font-size:120%;}【同时具有这两个样式名的元素】

使用：<p class="specialtext featured">Here the span tag <span>may or may not</span>be styled.</p>

1.1.2.4 ID属性 #

<p id="specialtext">This is the special text.</p>

#specialtext {CSS 样式声明}

p#specialtext {CSS 样式声明}

也可以用于页内导航

<a href="#bio">Biography</a>【表示这个链接的目标在当前页面中的目标ID，因而不会触发浏览器加载页面】

<h3 id="bio">Biography</h3>

用户单击前面的链接时，页面会向下滚动到ID 值为bio 的h3 元素的位置。如果链接的href属性里只有一个#，那么点击该链接会返回页面顶部。

如果你暂时不知道某个href 应该放什么 URL，也可以用#作为占位符，但不能把该属性留空。

经常会给页面中每个顶级区域都添加一个ID，从而得到非常明确的上下文，以便编写CSS 时只选择嵌套在相应区域内的标签

1.1.3 属性选择符

1.1.3.1 属性名选择符 []

img[title] {border:2px solid blue;}

户鼠标移动到这些图片上时，此时浏览器会显示一个（利用title 属性中的文本生成的）提示条。

1.1.3.2 属性值选择符

img[title="red flower"] {border:4px solid green;}

1.1.4 伪类

一个冒号（:）表示伪类，两个冒号（::）表示CSS3 新增的伪元素。

1.1.4.1 UI伪类

1) 链接伪类

a:link {color:black;}
a:visited {color:gray;}
a:hover {text-decoration:none;}
a:active {color:red;}

p:hover {}【段落背景在鼠标悬停时变成灰色】

2) :focus 伪类

input:focus {border:1px solid blue;}【会在光标位于input 字段中时，为该字段添加一个蓝色边框。这样可以让用户明确地知道输入的字符会出现在哪里】

3) target 伪类

<a href="#more_info">More Information</a>

<h2 id="more_info">This is the information you are looking for.</h2>

#more_info:target {background:#eee;}【会在用户单击链接转向 ID 为 more_info 的元素时，为该元素添加浅灰色背景】

1.1.4.2 结构化伪类

1) :first-child 和:last-child

ol.results li:first-child {color:blue;}

<ol class="results">
<li>My Fast Pony</li>
<li>Steady Trotter</li>
<li>Slow Ol' Nag</li>
</ol>

文本“ My Fast Pony”就会变成蓝色。

2) e:nth-child(n)

li:nth-child(3)

会选择一组列表项中的每个第三项。

1.1.5 伪元素

1) e::first-letter

p::first-letter {font-size:300%;}【段落首字符放大的效果】

2) e::first-line

p::first-line {font-variant:small-caps;}【可以把第一行以小型大写字母显示】

3) e::before
e::after

可用于在特定元素前面或后面添加特殊内容。

p.age::before {content:"Age: ";} 【在具有 age样式的 p 标签的内容前面加 "Age:"】
p.age::after {content:" years.";}【在具有 age样式的 p 标签的内容后面加 " years."】

结果：Age: 25 years.