CSS基础笔记系列
- 《CSS基础笔记-01CSS概述》
- 《CSS基础笔记-02动画》
前言
在前面两篇博客中，我实际上已经使用过了选择器。但到底什么是选择器、有什么作用，我反而不能表达出来。因此，决定记录了我的学习和思考。
什么是选择器
selector是css rule的第一个部分，用于匹配HTML元素，并使用规则中的属性样式化对应元素。
/* CSS syntax */
selector{
property: value;
}
本文将结合具体的示例来展示：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>Tao Te Ching</title>
<link rel="stylesheet" href="./style.css" />
</head>
<body>
<h1>第二章（治国）</h1>
<p class="special"><em>天下皆知美之为美，斯恶已</em>；皆知善之为善，斯不善已。</p>
<p>有无相生，难易相成，长短相形，高下相倾，音声相和，前后相随，恒也。</p>
<p>是以圣人处无为之事，行不言之教；万物作而弗始，生而弗有，为而弗恃，<strong>功成而弗居</strong>。夫唯弗居，是以不去。</p>
</body>
</html>
元素选择器
以HTML元素为作为selector。 也叫 标签选择器 或 类型选择器。
例如，以
作为选择器，那么所有的p标签都会应用这个样式。
h1 {
color: blue;
}
p {
color: blueviolet;
}
strong {
color: red;
}
em {
color: gray;
}
类选择器
类选择器以一个句点（.）开头，会选择文档中应用了这个类的所有标签。例如，使用.highlight将指定的p标签高亮。
类选择器的组合使用：
ID选择器
ID选择器以一个句点（#）开头。在html中对指定的元素添加id属性，然后在css中添加对应id的样式。
属性选择器
用属性选择器来选中带有特定属性的元素。属性名放在[]中。
接下来通过一个无需列表来演示，属性选择器的使用：
<ul>
<li>第三章</li>
<li class="chapter4">第四章</li>
<li class="chapter4 chapter5">第五章</li>
<li class="chapter4chapter5">第六章</li>
</ul>
/* 将所有使用了class属性的元素的字体大小设置为20% */
[class]{
font-size: 20%;
}
/* 将所有含有class属性的li标签的字体大小设置为200% */
li[class]{
font-size: 200%;
}
/* 匹配仅有chapter4属性值的li标签*/
li[class="chapter4"]{
background-color: red;
}
/* 匹配只要有chapter4属性值的li标签*/
/* 当class属性有多个值时，每个值用空格分开 */
/* 说明：这个样式会覆盖上面的，因为本样式的权重值更大 */
li[class~="chapter4"]{
background-color: yellow;
}
伪类选择器(pseudo-class)
用于选择处于特定状态的元素。
伪类就是开头为冒号的关键字:
selector:pseudo-class {
property: value;
}
例如，我只想让article的第一个段落的文字字体加粗加大，无论任何时候都可以在article的最开始动态插入p标签且保持设置的特定样式始终有效，而不用再修改代码。
article p:first-child{
font-size: 120%;
font-weight: bold;
}
像常规的类一样，可以在选择器中将任意数量的伪类链在一起。
伪元素选择器(pseudo-elements)
伪元素是一个附加至选择器末的关键词，允许你对被选择元素的特定部分修改样式
selector::pseudo-element {
property: value;
}
一个选择器中只能使用一个伪元素。伪元素必须紧跟在语句中的简单选择器/基础选择器之后。
/* 使用伪元素选择器，使段落的第一行文字总是被应用样式 */
/* 而不管屏幕的大小如何变化 */
article p::first-line{
font-size: 120%;
font-weight: bold;
}
/* 选择一个<article>元素里面的第一个<p>元素的第一行。 */
article p:first-child::first-line{
font-size: 120%;
font-weight: bold;
}
/* 在box类 前插入一个伪元素 */
.box::before {
content: "hello";
color: aqua;
display: block;
width: 100px;
height: 100px;
background-color: brown;
border: 1px solid black;
}
/* 在box类 后插入一个伪元素 */
.box::after{
content: "after usage";
color: blue;
}
关系选择器(combinator)
后代选择器(descendant combinator)
用单个空格来组合两个或多个元素的选择器。
/* 匹配body中的article中的p标签 */
body article p
子代选择器(child combinator)
子代选择器是个大于号（>），只会在选择器选中直接子元素的时候匹配。继承关系上更远的后代则不会匹配。
<ul>
<li>Unordered item</li>
<li>Unordered item
<ol>
<li>Item 1</li>
<li>Item 2</li>
</ol>
</li>
</ul>
ul>li {
/* 非继承属性 */
border: thick double #32a1ce;
/* 继承属性 */
color: red;
}
紧邻兄弟选择器（next-sibling combinator）
紧邻兄弟选择器（+）用来选中恰好处于另一个在继承关系上同级的元素旁边的元素。
<article>
<h1>一级标题</h1>
<p>第一段的内容</p>
<p>第二段的内容</p>
</article>
h1 + p {
font-weight: bold;
background-color: #333;
color: #fff;
padding: 2px;
}
兄弟选择器(subsequent-sibling combinator)
使用(~)来选择任意兄弟元素。
<article>
<h1>一级标题</h1>
<p>第一段的内容</p>
<div>无效内容</div>
<p>第二段的内容</p>
</article>
h1 ~ p {
font-weight: bold;
background-color: #b03636;
color: #fff;
padding: 2px;
}
总结
本文学习了10种选择器，掌握它们的关键：一是先理解，二是多练；多使用才会积累更多的经验，多尝试不同的组合。单纯的去记，我是记不住的！！！另外，关于这篇文章的内容，等有空时录个视频，看起来就会更直观啦！关于cascading、specificity、 inheritanc还有点儿迷，明天再学习下。
