css选择器的分类

2022-11-16 本文已影响0人败于化纤

1.全局选择器

通配符：* 用于选择所有元素
实列：匹配body下所有的元素

 body *{
            margin: 0;
            padding: 0;
            list-style: none;
        }

2.基础选择器

-- 元素选择器：选择器所有标签
-- id选择器：选择一个标签
-- class选择器/类选择器：选择一组标签

3.属性选择器

通过标签的属性匹配元素
所有属性选择器都以方括号开头
[属性]选择器最基础的用法：

示例：将属性为title的所有元素都设置上前景色。

[title]{
            color: rgb(81, 150, 182);
        }

示例：将属性title的属性值为二级标题的所有元素都设置上背景色。

[title=二级标题]{
            color: cadetblue;
        }

示例：将属性target的属性值为_blank的所有元素都设置上删除线。
超链接的原有属性的value值要添加引号。

[target="_blank"]{
            text-decoration: line-through;
        }

示例：将属性href的属性值为http://www.baidu.com的所有元素都设置上前景色。
^：指定了属性名，并且有属性值，属性值是以http://www.baidu.com开头的；

a[href^="http://www.baidu.com"]{
            color: black;
        }

示例：将属性target的属性值为"_blank"的所有元素都设置上前景色。
$：指定了属性名，并且有属性值，属性值是以_blank结尾的；

 a[target$="_blank"]{
            color: rgb(188, 95, 95);
        }

示例：将属性href的属性值结尾为net的所有元素都添加文字。
$：指定了属性名，并且有属性值，属性值是以net结尾的；

 [href$=net]::after{
            content: "我爱你";
        }

4，伪类选择器

伪类选择器的标志就是单冒号：
只能匹配元素不能创建元素

:link：匹配未点击的超链接
:hover：匹配悬停/悬浮状态的元素
:active：匹配激活状态（鼠标按下）的元素
:visited：匹配访问过（抬起鼠标）的超链接
:focus ：匹配焦点元素（不是所有元素都拥有焦点，像表单标签，超链接都拥有焦点）
:ntn-child ：匹配第n个子元素
:flrst-child：匹配第一个子元素
:last-child：匹配最后一个子元素
:root :匹配根元素
:not() :匹配不是某个元素的元素
:checked:匹配选中的元素

超链接伪类

<style>
        /* 1.匹配未点击的超链接 */
        a:link{
            color: cadetblue;
        }
        /* 2.匹配悬停/悬浮状态的元素 */
        a:hover{
            color: #000;
        }
        /* 3. 匹配激活状态（鼠标按下）的元素*/
        a:active{
            color: cornflowerblue;
        }
        /* 4.匹配访问过（抬起鼠标）的超链接 */
        a:visited{
            color: rgb(255, 0, 0);
        }
    </style>
</head>
<body>
    <a href="#">网易云</a>
</body>

:focus 实列

点击之后触发焦点元素，修改背景色

  input:focus{
            background-color: blueviolet;
        }

:not() :匹配不是某个元素的元素

示例：排除掉.box1

 .box:not(.box1){
            background-color: rgb(255, 0, 0);
        }

5.伪元素选择器

伪元素选择器的标志是双冒号
可以创建元素

::after：在元素zhi'qua
::before
::first-line：选中的第一段。
::first-letter ：选中第一个。

::first-letter的示例：选中段落p的第一个文字。

 p::first-letter{
            font-size: 2rem;
            color: rgb(110, 63, 1);
        }

::first-letter的示例：选中段落p的第一段文字设置上划线。

 p::first-line{
            text-decoration: overline;
        }

6.组合选择器

组合选择器就算把上面五类选择器放在一起使用

分组选择器：使用逗号组合（匹配到使用逗号分割的每一项）
后代选择器：使用空格组合（匹配当前元素的所有后代元素）
子元素选择器：使用>组合（匹配当前元素的所有子元素）
相邻兄弟选择器：使用+组合（匹配当前元素后面的兄弟元素）