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> <meta charset="utf-8" /> <title>css study!</title> <style> .specialtext {font-style:italic;} </style> </head> <body> <article> <!-- <h1>Contextual selectors are <em>very</em> selective</h1> <p>This text is very important!</p> --> <section> <h2>An H2 Heading</h2> <p>This is paragraph1</p> <p>Paragraph 2 has <a href="#">a link</a> in it.</p> <a hred="#">Link</a> </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;}
<img src="images/yellow_flower.jpg" title="yellow flower" alt="yellow flower" />
户鼠标移动到这些图片上时，此时浏览器会显示一个（利用title 属性中的文本生成的）提示条。
1.1.3.2 属性值选择符
img[title="red flower"] {border:4px solid green;}
<img src="images/red_flower.jpg" title="red flower" alt="red flower" />
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 class="age">25</p>
p.age::before {content:"Age: ";} 【在具有 age样式的 p 标签的内容前面加 "Age:"】
p.age::after {content:" years.";}【在具有 age样式的 p 标签的内容后面加 " years."】
结果：Age: 25 years.