【css技术指南笔记】 第二章 选择器 伪类

摘要: CSS 选择器 伪类 伪元素

选择器

<div>
<h2>An H2</h2>
<p>This is paragraph</p>
<p>Paragraph 2 has <a href="#">a link</a></p>
<a href="#">Link</a>
</div>

子选择符：div>a ； 结果：<a>Link</a>，意思是只能选中所有的儿子，而不包括所有的孙子

紧邻同胞选择符：h2+p ；结果：<p>This is paragraph</p>

一般同胞选择器：h2~a；结果：<a>Link</a>，选中在 h2 之后的兄弟（同辈元素）,在 h2 之前的 a 是不会被选中的

通用选择器：div * a；结果<a>a link</a>，选中 div 的孙子 a

属性选择符：a[href] 选中 a 标签有 href 属性的

a[href="#"] 选中 a 标签 href 属性为#的

伪类

分为两种：1、UI 伪类，某种状态，例如 a 鼠标悬停；2、结构化伪类，例如某组元素第一个或最后一个

UI 伪类；一个冒号 : 表示伪类，两个冒号 :: 表示 CSS3 新增的伪类

链接伪类，如果需要使用多个，尽量按照 l v h a 的顺序：

a:link 普通状态，等待被点击

a:visited 已经点击过（访问过）

a:hover 鼠标悬停

a:active 正在被点击，鼠标按下的状态

:focus 伪类，获得元素焦点时，input:focus{border:2px solid #444;}

:target，例：

#more_info:target{background:#eee;}

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

当浏览器的链接为 smartisan.com#more_info 时，则h2的背景则会变成 #eee

结构化伪类：

:first-child :last-child

li:first-child 选中的是 li 组中的第一个 li，而不是 li 的第一个孩子

nth-child

li:nth-child(2) 选中第二个 li，计数不是从0开始的

li:nth-child(odd) 奇数列，li:nth-child(event) 偶数列

伪元素，！伪元素的信息不会被搜索引擎获得

p::first-letter{font-size:200%;} 将 p 中的第一个字符选中，效果：abc

p::first-line{font-variant:samll-caps;} 将 p 中的第一行全变为大写，不同浏览器尺寸第一行都是不一样的

::before ::after

<p class="age">24</p>

p.age::before{content:"Age: ";}

p.age::after{content:" years."}

结果：Age: 24 years.