CSS选择器
2019-03-07 本文已影响0人
酵母小木
本文转载自Thoughtworks学习平台的训练营的学习任务，仅供个人笔记回忆之用
选择器用来从页面中选择元素，以给它们定义样式。
1. 简单选择器
- 通配选择器
/* 匹配所有元素 */
* {
box-sizing: inherit;
}
- 标签选择器
/* 匹配所有P元素 */
p {
margin: 1em 0;
}
- id选择器
<!-- HTML -->
<p id="example">Just test content</p>
<!-- CSS -->
<style type="text/css">
/* 匹配id为example的元素
* 注意：id 值在一个 HTML 中必须唯一
*/
#example {
font-size: 2em;
line-height: 1.6;
color: red;
}
</style>
- 类选择器
<!-- HTML -->
<p class="error">Error message</p>
<!-- 可以给一个元素指定多个class，用空格隔开 -->
<p class="error icon">Another error message</p>
<!-- CSS -->
<style type="text/css">
.error {
color: orange;
}
.icon {
background: url(error.png) no-repeat 0 0;
}
</style>
2. 复杂选择器
- 属性选择器
<!-- HTML -->
<p>
<label>用户名：</label>
<input name="username" value="tw" disabled>
</p>
<p>
<label>密码：</label>
<input type="password" required>
</p>
<!-- CSS -->
<style>
/* 选中所有的禁用的输入框 */
input[disabled] {
background: #ddd;
color: #999;
cursor: not-allowed;
}
/* 选中所有输入框类型为"密码"的元素 */
input[type="password"] {
border-color: red;
color: red;
}
</style>
- 伪类选择器
伪类用于选择DOM树之外的信息，或是不能用简单选择器进行表示的信息。前者包含那些匹配指定状态的元素，比如:visited，:active；后者包含那些满足一定逻辑条件的DOM树中的元素，比如:first-child，:first-of-type，:target。
| 属性 | 描述 |
|---|---|
| :active | 向被激活的元素添加样式。 |
| :focus | 向拥有键盘输入焦点的元素添加样式。 |
| :hover | 当鼠标悬浮在元素上方时，向元素添加样式。 |
| :link | 向未被访问的链接添加样式。 |
| :visited | 向已被访问的链接添加样式。 |
| :first-child | 向元素的第一个子元素添加样式。 |
| :lang | 向带有指定 lang 属性的元素添加样式。 |
| :checked | 可以用来定义选中（checked）的元素，比如 单选按钮（radio）或多选按钮（checkbox） |
基于DOM之外的信息去（比如根据用户和网页的交互）选择元素，示例如下：
a:link { ... } /* 未访问过的链接 */
a:visited { ... } /* 已访问过的链接 */
a:hover { ... } /* 鼠标移到链接上的样式 */
a:active { ... } /* 鼠标在连接上按下时的样式 */
a:focus { ... } /* 获得焦点时的样式 */
<!-- 伪类的代码示例 -->
<!-- HTML -->
<nav>
<ul>
<li><a href="http://w3.org">W3C</a>
<li><a href="http://example.com">example.com</a>
<li><a href="http://www.360.com">360</a>
</ul>
</nav>
<label>搜索：<input name="q" type="search"></label>
<!-- CSS -->
<style>
a:link {
color: black;
}
a:visited {
color: gray;
}
a:hover {
color: orange;
}
a:active {
color: red;
}
:focus {
outline: 2px solid red;
}
</style>
- 伪元素选择器
伪元素为DOM树没有定义的虚拟元素。不同于其他选择器，它不以元素为最小选择单元，它选择的是元素指定内容。比如::before表示选择元素内容的之前内容，也就是""；::selection表示选择元素被选中的内容。
在CSS3中，伪类与伪元素在语法上也有所区别，伪元素修改为以::开头。但因为历史原因，浏览器对以:开头的伪元素也继续支持，但建议规范书写为::开头。
| 属性 | 描述 |
|---|---|
| ::first-letter | 选择指定元素的第一个单词 |
| ::first-line | 选择指定元素的第一行 |
| ::after | 在指定元素的内容前面插入内容 |
| ::before | 在指定元素的内容后面插入内容 |
| ::selection | 选择指定元素中被用户选中的内容 |
<h1>这是h1</h1>
<h2>这是h2</h2>
<!-- CSS -->
<style>
h1::before{
content:"h1后插入内容"
}
h2::after{
content:"none"
}
</style>
注意：
- 伪元素要配合content属性一起使用
- 伪元素不会出现在DOM中，所以不能通过js来操作，仅仅是在 CSS 渲染层加入
- 伪元素的特效通常要使用:hover伪类样式来激活
3. 不同的选择器之间也可以组合。
- 直接组合 EF
<!-- HTML -->
<p class="warning">这是一条警告信息</p>
<div class="warning icon">这是另外一条警告信息</div>
<!-- CSS -->
/* 标签选择器和类选择器组合 */
p.warning { color: orange; }
- 后代组合 E F
<!-- HTML -->
<article>
<h1>一级标题</h1>
<p>第一段第一段。</p>
<section>
<h2>二级标题</h2>
<p>第二段第二段。</p>
</section>
</article>
<!-- CSS -->
<style>
/* 后代选择器 */
/* 选中 article 标签下的 所有 p 元素 */
article p {
color: coral;
}
/* 选中 article 标签下的 section 标签下的 所有 h2 元素*/
article section h2 {
border-bottom: 1px dashed #999;
}
</style>
- 亲子组合 E > F
<!-- HTML -->
<article>
<h1>一级标题</h1>
<p>第一段第一段。</p>
<section>
<h2>二级标题</h2>
<p>第二段第二段。</p>
</section>
</article>
<!-- CSS -->
<style>
/* 亲子选择器 */
/* 亲子选择器和后代选择器不同的就是：后代选择器可以选中嵌套在标签内部任意层级的标签元素，而亲子选择器只能选中当前标签向内一层的元素，即亲子选择器只能匹配直接后代，通俗一点，就是只能匹配儿子辈，不能匹配孙子辈。*/
article > p {
color: limegreen;
}
</style>
- 为一组选择器同时定义样式
/* 下面的选择器将会同时将CSS规则应用在body/h1/h2/h3/h4/h5/h6/ul/ol/li上 */
body, h1, h2, h3, h4, h5, h6, ul, ol, li {
margin: 0;
padding: 0;
}
[type="checkbox"], [type="radio"] {
box-sizing: border-box;
padding: 0;
}
