css 选择器和函数

最新推荐文章于 2022-11-17 22:02:01 发布

想要飞翔的小猪

最新推荐文章于 2022-11-17 22:02:01 发布

阅读量482

点赞数

分类专栏： css 文章标签： css 函数

本文链接：https://blog.csdn.net/dwb123456123456/article/details/90265748

版权

css 专栏收录该内容

19 篇文章 0 订阅

订阅专栏

今天看了有关css的文章，虽然现在用css经常用，但有些东西还是值的自己记录下的，这里简单列举下;这里讲一个比较新的函数 conic-gradient()是属于css-images-4的一位新成员。就是可以实现不同角度渐变色的一个函数。

<!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>
        html,
        body,
        div {
            margin: 0;
            padding: 0;
        }

        .caihong {
            width: 300px;
            height: 300px;
            background: conic-gradient( #9ED110,
            #50B517,
            #179067,
            #476EAF,
            #9f49ac,
            #CC42A2,
            #FF3BA7,
            #FF5800,
            #FF8100,
            #FEAC00,
            #FFCC00,
            #EDE604);
            border-radius: 50%;
            cursor: pointer;
            transition: all 0.5s ease;
            filter: hue-rotate(0deg);
        }

        .caihong:hover {
            filter: hue-rotate(180deg);
        }
    </style>
</head>

<body>
    <!-- 1.基本选择器
类型选择器：简单来说就是直接选择HTML标签（不带<>的那种），例如：html {width: 100%;};

类选择器：就是HTML标签中class属性的值（但就是给每个值加上了.），例如：.div {width: 100%;};

ID选择器：就是HTML标签中id属性的值（但就是给每个值加上了#，但是要注意，一个文档中的ID应是唯一的，但能不能写多个？其实也是可以，只是不建议这么做，至于为什么，后面的文章会进行讲解）;

通用选择器：写个 *，啥HTML标签都选中了。例如：* {width: 100%;}

属性选择器：就是根据HTML标签里的属性选择，语法大概如下：
[attr] [attr=value] [attr~=value] [attr|=value] [attr^=value] [attr$=value] [attr*=value] -->

    <!-- 2.组合选择器
空格：后代选择器，例如：.a .b。在例子中选中的就是.a里面的所有带有.b的节点；
>：子代选择器，例如：.a > .b。在例子中选中的就是.a里面的所有带有.b的子节点；
~：后继选择器，例如：.a ~ .b。在例子中选中的就是在.a后面的.b；
+：直接后继选择器，例如：.a + .b。在例子中选中的就是在.a后面下一个.b；
|: 命名空间选择器，例如：.a | .b。在例子中选中的就是属于.a的.b，跟.a .b一样，属于Selectors Leve 3的内容。
||：列选择器，例如：.a || .b。在例子中选中的就是由.a表示的列的网格/表中的单元格的.b，属于Selectors Level 4的内容。 -->

    <!-- 3.CSS的函数
根据w3cplus中可以划分为以下几类：

属性函数：attr()；
背景图片函数：linear-gradient()、radial-gradient()、conic-gradient()、repeating-linear-gradient()、repeating-radial-gradient()、repeating-conic-gradient()、image-set()、image()、url()、element()；
颜色函数：rgb()、rgba()、hsl()、hsla()、hwb()、color-mod()；
图形函数：circle()、ellipse()、inset()、polygon()、path()
滤镜函数：blur()、brightness()、contrast()、drop-shadow()、grayscale()、hue-rotate()、invert()、opacity()、saturate()、sepia()；
转换函数：matrix()、matrix3d()、perspective()、rotate()、rotate3d()、rotateX()、rotateY()、rotateZ()、scale()、scale3d()、scaleX()、scaleY()、scaleZ()、skew()、skewX()、skewY()、translate()、translateX()、translateY()、translateZ()、translate3d()；
数学函数：calc()、min()、max()、mixmax()、repeat()；
缓动函数：cubic-bezier()、steps()；
其他函数：counter()、counters()、toggle()、var()、 symbols()。 -->

    <!-- 这里讲一个比较新的函数  conic-gradient()是属于css-images-4的一位新成员。就是可以实现不同角度渐变色的一个函数。 -->
    <!-- 例子 -->
    <div class="caihong"></div>
</body>

</html>