当前位置：首页 > news >正文

CSS学习1

news 来源：原创 2024/9/21 12:26:07

CSS

前言
一、类选择器
二、id选择器
三、通配符选择器
四、伪类选择器
- 1. 链接伪类选择器
- 2. 结构（位置）伪类选择器
- 3. 目标伪类选择器

前言

CSS：层叠样式表
样式规则：选择器 {属性：值；属性：值；}
类选择器：用于向某些选择器添加特殊效果

一、类选择器

类选择器：“.名字{属性：值}”
多类名选择器：html选择器中的class可以放多个值，多个类名没有先后顺序。空格隔开即可。

注意：名字最好用英文字字母表示，可以加-

<html><head><title>类选择器</title><style>.c-red {color: red;}</style></head><body><span class="c-red">G</span><span>G</span><span>G</span><span>G</span></body>
</html>

二、id选择器

id选择器：“#名字{属性：值}”
与类选择器的区别：类选择器可以重复使用，id选择器类似身份证，只能用一次。

<html><head><title>id选择器</title><style>.c-red {color: red}#c-p {color: pink}</style></head><body><span class="c-red">G</span><span id="c-p">G</span><span>G</span><span>G</span></body>
</html>

三、通配符选择器

通配符选择器：“*{属性：值}”

四、伪类选择器

1. 链接伪类选择器

作用：给链接添加特殊效果
:link 未访问链接
:visited 已访问链接
:hover 鼠标移动到链接上
:active 选定的链接（点击别松开）
注意：写的时候顺序不要颠倒，lovehate

<html><head><title>链接伪类选择器</title><style>a:link { /*未访问的状态*/font-size: 16px;color: red;font-weight: 700;}a:visited { /*已访问的状态*/font-size: 16px;color: green;font-weight: 700;}a:hover { /*鼠标移动上去*/font-size: 16px;color: orange;font-weight: 700;}a:active { /*选定的状态*/font-size: 16px;color: pink;font-weight: 700;}a {/*标签选择器，设置所有a*/font-size: 16px;color: gray;font-weight: 700;}</style></head><body><div><a href="#">秒杀</a></div></body>
</html>

2. 结构（位置）伪类选择器

:first-child
:last-child
:nth-child(odd) 从前往后，odd可以选择所有奇数，even(2n)选偶数，n选所有的（从0开始）
:nth-last-child 从后往前

<html><head><title>位置伪类选择器</title><style>li:first-child { /*第一个*/color: red;}li:last-child { /*最后一个*/color: red;}li:nth-child(4) { color: red;}li:nth-last-child {color: deeppink;}</style></head><body><ul><li>第一个孩子</li><li>第二个孩子</li><li>第三个孩子</li><li>第四个孩子</li><li>第五个孩子</li></ul></body>
</html>

3. 目标伪类选择器

:target 可用于选取当前活动的目标元素

<html><head><title>document</title><style>:target {color: red;}</style></head><body><h2>目录</h2><hr/>1.早年经历<br/><a href="#movie">2.演艺经历</a><br/>3.个人生活<br/>4.主要作品<br/><hr/><h3>早年经历</h3><h3 id="movie">演艺经历</h3><h3>个人生活</h3><h3>主要作品</h3></body>
</html>