css选择器

fine1998_

已于 2022-05-07 14:04:18 修改

阅读量98

点赞数 2

文章标签： css 前端 css3

于 2022-05-05 09:29:58 首次发布

本文链接：https://blog.csdn.net/fine1998_/article/details/124574455

版权

一、基础选择器

二、复合选择器

css选择器作用：选出有需求的标签

css选择器种类：主要分为基础选择器和复合选择器

下面对不同css选择器进行描述以及分析。

一、基础选择器

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        /* 通配符选择器 */
        * {
            color: black;
        }
        /* 元素选择器 */
        h1 {
            color: blue;
        }
        /* id选择器 */
        #world {
            color: pink;
        }
        /* 类选择器 */
        .box {
            color: red;
        }
    </style>
</head>

<body>
    <h1>你好</h1>
    <p id="world">世界</p>
    <div class="box"></div>
</body>

</html>

如上代码段，共有四种。

1、元素选择器

语法：元素 { };

作用：以元素即标签本身为选择器。

2、id选择器

语法：#id名 { };

作用：在结构中给元素增加一个id，css进行选择时需要在id前加一个“#”；

注意：一个标签只能有一个id，css中id选择器只能选择拥有该id的标签。

3、类选择器

语法：.类名 { };

作用：在结构中给元素增加一个class，css进行选择时需要在类名前加一个“.”；

注意：一个标签能有多个类名，能通过不同类选择一个标签。

4、通配符选择器

语法：* { }；

作用：选择页面中所有标签。

二、复合选择器

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        li {
            width: 100px;
            height: 100px;
        }
        /* 交集选择器 */
        li.box {
            background-color: pink;
        }
        /* 并集选择器 */
        li,
        div {
            background-color: rgb(185, 41, 41);
        }
        /* 子元素选择器 */
        ul>li {
            background-color: rgb(10, 175, 112);
        }
        /* 后代选择器 */
        ul a {
            color: blue;
        }
        /* 相邻兄弟选择器 */
        div+p {
            color: yellowgreen;
        }
        /* 所有兄弟选择器 */
        ul~p {
            color: violet;
        }
    </style>
</head>

<body>
    <ul>
        <li class="box"><a href="#"></a></li>
        <li><a href="#"></a></li>
        <li><a href="#"></a></li>
        <li><a href="#"></a></li>
    </ul>
    <div></div>
    <p></p>
</body>

</html>

如上代码，先介绍六种

1、交集选择器

语法：选择器1选择器2选择器...... { };

作用：选中同时符合多个条件的元素；

注意：如果选择器中有元素选择器，元素选择器要写在前面。

2、并集选择器

语法：选择器1,选择器2,选择器3·····{ };

作用：同时选择多个选择器对应的元素。

3、子元素选择器

语法：父>子 { }；

作用：通过父元素找到对应的子元素。

4、后代选择器

语法：祖先后代 { }；

作用：通过祖先元素找到指定的后代元素。

5、相邻兄弟选择器

语法：兄+弟 { }；

作用：通过兄元素找到相邻的弟元素，只找相邻的一个弟元素。

6、所有兄弟选择器

语法：兄~弟 { }；

作用：通过兄元素找到所有的弟元素；

注意：前面的兄元素不选,找到多个弟元素。

7、属性选择器

[属性名]{} 选择含有指定属性的元素

[属性名=属性值]{} 选择含有指定属性和属性值的元素

[属性名^=属性值]{} 选择以指定属性值开头的元素

[属性名$=属性值]{} 选择以指定属性值结束的元素

[属性名*=属性值]{} 选择属性值含有某值的元素

8、伪类选择器

作用：不存在的类，用来表示一个元素特殊的状态

语法1：:first-child 第一个子元素

:last-child 最后一个子元素

:nth-child() 选中第几个子元素

注意：以上所有的伪类都是根据所有的子元素进行排序

语法2：:first-of-type 同类型第一个子元素

:last-of-type 同类型最后一个子元素

:nth-of-type(2) 同类型选中第几个子元素

注意：以上这些伪类是根据同类型的子元素中去选择

重点：

1、:nth-child()与 :nth-of-type()的共同点：

相当于交集选择器，其所指父元素为：前的直属父元素

2、:nth-child()与 :nth-of-type()的区别：

前者指在父元素所有子元素中寻找指定的标签，后者指在父元素中寻找指定的标签

语法3：:not(选择器)

作用：否定伪类，将符合条件的元素从选择器中去除

9、 a元素伪类选择器

语法：:link 如果要同时设置这四个伪类，那么伪类是有顺序要求的用来表示未访问过的链接

:visited 用来表示访问过的链接（由于隐私问题，大部分的浏览器对访问的链接，只能设置颜色）

:hover 鼠标移入的效果

:active 鼠标点击效果

注意：1、link visited 只对a标签产生效果； hover active 对所有标签都可以产生效果

2、如果要同时设置这四个伪类，那么伪类是有顺序要求的

10、伪元素选择器

语法：::first-letter 表示第一个字母

::first-line 表示第一行

::selection 选中的内容

::before 元素的最前面

::after 元素的最后面

注意：before和after需要配合content使用

fine1998_

关注

2
点赞
踩
1

收藏

觉得还不错? 一键收藏
1
评论
css选择器

css选择器作用：选出有需求的标签css选择器种类：主要分为基础选择器和复合选择器下面对不同css选择器进行描述以及分析。一、基础选择器<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="view
复制链接

扫一扫