CSS打卡|第一天
CSS（层叠样式表）提供了多种选择器，用于选择要应用样式的 HTML 元素。
CSS 选择器用于选择你想要的元素的样式的模式。
CSS1、CSS2 和 CSS3 是层叠样式表（Cascading Style Sheets）的不同版本，以改进网页样式的控制和设计。
1. 基础选择器：
- ID选择器：#id
例如：
<h1 id="title">I am a title</h1>
如果要选择标签<h1>则可以使用id选择器：#title。
- 标签选择器：Tagname
例如：
<h1 id="title">I am a title</h1>
如果要选择标签<h1>则可以使用id选择器，或者直接使用标签选择器：h1。
- 类选择器：.class
例如：
<div class="card"></div>
如果要选择标签<div>,可以使用类选择器:.card。
-
通用选择器：*
可以选中页面中所有的标签
2. 组合器：
- 子组合：> （匹配的目标元素是其他元素的直接后代）
例如：
<div>
<p>AAA</p>
<span><p>aaa</p></span>
</div>
如果使用div->p则会选中代码中的<p>AAA</p>而代码中<span>标签的中的<p>不会被选中。
- 相邻的兄弟组合器：+ (匹配的目标是紧跟在在其他元素后面的）
例如：
<h1>AAA</h1> <p>aaa</p> <p>BBB</p>
如果使用h1+p则会选择内容为aaa的<p>标签，而不会选择内容为BBB<p>标签。
- 通用兄弟组合器：~ 匹配所有跟随在指定元素之后的兄弟元素
例如：
<h1>AAA<h1> <p>aaa</p> <p>BBB</p> <span>CCC</span> <p>bbb</p>
如果使用h1~p,则会选中内容为aaa,BBB,bbb的<p>标签。
3.伪类选择器
-
first-child
使用first-child伪类来选择父元素的第一个子元素。
例如:
<p>This is some text1.</p> <p>This is some text2.</p>
如果使用p:first-child,则会选中第一个内容This is some text1.的<p>标签，第二个<p>标签没有被选中。
-
:link
:visited
:hover
:active从上往下依次是：
- 选择所有未访问链接
- 选择所有访问过的链接
- 选择鼠标在链接上面时
- 选择活动链接
4. 伪元素选择器
它可以在不改变 HTML 结构的情况下对页面元素的特定部分进行样式设置。CSS 伪元素是用来添加一些选择器的特殊效果。常用的 CSS 伪元素有 ::before、::after、::first-line、::first-letter 等。
<style>
p:first-line
{
color:#ff0000;
font-variant:small-caps;
}
</style>
<body>
<p>CSS</p>
</body>
使用 "first-line" 伪元素向文本的首行设置特殊样式。
属性选择器（Attribute Selector）： 通过元素的属性选择 HTML 元素。属性选择器可以根据属性名和属性值进行选择。例如，input[type=“text”] 选择器将选择所有 type 属性为 “text” 的 <input> 元素。
