一天一个css小技巧

人生_何处_不相逢
145 阅读4分钟

一天一个css小技巧

CSS简介

CSS是层叠样式表（Cascading Style Sheet ）的简称是一种标记语言，用于设置页面的外观样式实现结构与样式分离，便于开发维护。
CSS由选择器和一条或多条声明组成。

CSS选择器

CSS选择器：根据不同需求把不同的标签选出来
CSS选择器分为两类：基础选择器和符合选择器
1. 基础选择器
1.1 标签选择器
标签选择器也称为元素选择器，用html标签名称作为选择器，按标签名称分类，为页面中某一类型标签指定统一的CSS样式
  • 作用：标签选择器可以把某一类标签全部选择出来，如所有的 div 标签
  • 优点：能快速为页面同类型的标签统一设置格式
  • 缺点：不能设计差异化样式，只能选择全部的当前标签

image-20220809133714578.png

1.2 类选择器
类选择器也就是类名选择器，差异化选择不同的标签，单独选一个或者某几个标签

书写格式：. + 自定义类名，在使用类名选择器的时候，你必须已经知道如何在html中使用自定义类名

image-20220809134705295.png

1.3 Id 选择器
Id 选择器和类名选择的区别在于，类名如同的人的名称一样可以被多个元素使用，而id就如同在同一个规则下不会也不能重复的身份证号码。通过# + id 来获取元素

image-20220809140016695.png

1.4 通配符选择器
 “ * ”定义，表示选取页面中所有元素,通配符选择器不需要调用，自动给所有的元素使用样式。特殊情况才使用

image-20220809140259769.png

2. 复合选择器
由两个或者多个基础选择器通过不同方式组合而成（更准确，高效的选择目标元素）
2.1 后代选择器

image-20220809141542279.png

由上面的效果可以看出
div 和 p 需要用空格个隔开
div是父级 p是子级最终选择的 p元素
p 是div的儿子也可以是孙子 只要是div的后代即可

后代选择器可以使用任意2个及以上基本选择器组合即可

image-20220809142115755.png

2.2 子选择器

image-20220809144328317.png

子代选择器 需要使用 > 隔离2个选择器
div > p 最终选择的是 div的下p
p需要时div的亲儿子
2.3并集选择器

image-20220809144746044.png

并集选择器 需要使用，分割
2.4 相邻兄弟选择器
相邻兄弟选择器（Adjacent sibling selector）可选择紧接在另一元素后的元素，且二者有相同父元素。

image-20220809150211630.png

如果希望选择的元素之后所有的相关元素都改变而不是紧接着的一个改变

image-20220809150506487.png

2.5 :first-child 选择器
某类元素第一个

image-20220809151541910.png

需要注意的是如果第一个元素不是选择的目标元素就不会产生效果

image-20220809151715289.png

2.6 :last-child 选择器
某类元素最后一个

image-20220809151921457.png

和:first-child 选择器 一样 如果最后一个元素不是目标元素，则不起效果

image-20220809151715289.png

2.7 :nth-child()
如果某一类的数据，现在可以选择首尾，如果想要选择其中某些元素则需要使用 :nth-child()
:nth-child() 选择器，该选择器选取父元素的第 N 个子元素，与类型无关。

image-20220809152511410.png

:nth-child()的详细用法

nth-child(3) 表示选择列表中的第三个元素。

nth-child(2n)表示列表中的偶数标签，即选择第2、第4、第6……标签

nth-child(2n-1) 表示选择列表中的奇数标签，即选择 第1、第3、第5、第7……标签

nth-child(n+3) 表示选择列表中的标签从第3个开始到最后（>=3）

nth-child(-n+3) 表示选择列表中的标签从0到3，即小于3的标签(<=3)

nth-last-child(3) 表示选择列表中的倒数第3个标签

2.8 :nth-of-type()
:nth-of-type(n) 选择器匹配属于父元素的特定类型的第 N 个子元素的每个元素.

image-20220809153332182.png

2.9 :not 选择器(css3)
:not(selector) 选择器匹配非指定元素/选择器的每个元素。

image-20220809153816325.png

2.10 伪类选择器
向选择器添加特殊的效果
用`：`表示

link_A.gif

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        a {
            display: block;
            line-height: 30px;
        }
        a:link {
            color: seagreen
        }
        a:visited {
            color: yellowgreen
        }
        a:hover {
            color: red;
        }
        a:active {
            color: blueviolet;
        }
    </style>
</head>
<body>
<div>
<a class="aOne" href="https://www.baidu.com/">选择所有未被访问的链接</a>
<a class="aTwo" href="https://www.baidu.com/">选择所有已被访问的链接</a>
<a class="aThree" href="https://www.baidu.com/">选择鼠标指针位于其上的链接</a>
<a class="aFour" href="https://www.baidu.com/">选择活动链接（鼠标按下未弹起的链接）</a> </div>
</body>
</html>
2.11 伪元素选择器
::before/:before  在被选元素前插入内容
::after/:after  在选被元素后插入内容
::first-letter/:first-letter  匹配元素中文本的首字母
::first-line/:first-line  匹配元素中第一行的文本

伪类和伪元素的区别

  • 伪元素和伪类都是为了给一些特殊需求加样式，定义上基本一致。
  • 伪类像类选择器一样给已存在某个元素添加额外的样式；伪元素则是给自己虚拟的元素添加样式。

权重

总结排序：!important > 行内样式（style）>ID选择器 > 类选择器=伪类 > 元素=伪元素 > 通配符 > 继承 > 浏览器默认属性

avatar
文章
阅读
粉丝