CSS 知识整理(二) 选择器

最新推荐文章于 2024-05-18 03:07:39 发布

shawn697

最新推荐文章于 2024-05-18 03:07:39 发布

阅读量116

点赞数

文章标签： css html web

本文链接：https://blog.csdn.net/qq_41459262/article/details/113527738

版权

CSS 知识整理(二) 选择器

一、选择器的作用:

要使用CSS对HTML页面中的元素实现一对一，一对多或者多对一的控制，这就需要用到CSS选择器。

二、基本选择器

标签选择器

标签选择器就是对html中的标签进行选择,选择格式为：标签{ }。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        /*标签选择器，会选择到这个页面上所有这个标签的元素*/
        h1{
            color: blue;
            background: red;
            border-radius: 24px;
        }
        p{
            font-size: 80px ;
        }
    </style>
</head>
<body>
<h1>这是一级标题</h1>
<h1>这还是一级标题</h1>
<p>这是段落</p>

</body>
</html>

效果如下：

类选择器

类选择器选择的对象是标签中的class属性值，选择格式为：.class{ }。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>


    <style>
        /*类选择器的格式: .class的名称{}
        好处: 可以多个标签标记为同一个类
        */
        .c1 {
            color: orange;
            border: aqua;
        }

        .c2 {
            color: yellowgreen;
        }
    </style>
</head>
<body>

<h1 class="c1">标题1</h1>
<h1 class="c2">标题2</h1>
<h1 class="c1">标题3</h1>
<h1>标题4</h1>

<p class="c2">段落</p>


</body>
</html>

效果如下：

ID选择器

ID选择器选择的对象是标签中id属性，唯一使用（多次使用浏览器会执行，但是执行js代码时会发生错误）,选择格式为 #id{ }。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        /*id选择器的格式: #id名称{}*/
        #c1 {
            color: red;
        }
    </style>
</head>
<body>

<h1 id="c1">标题1</h1>
<h1>标题4</h1>

<p class="c2">段落</p>
</body>
</html>

效果如下：

三种基本选择器的优先级为：id选择器>class选择器>标签选择器

三、层次选择器

目前有这样的层次结构

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<p class="p1">p1</p>
<p>p2</p>
<p>p3</p>

<ul>
    <li class="c">
        <p>p4</p>
    </li>
    <li>
        <p>p5</p>
    </li>
    <li>
        <p>p6</p>
    </li>
</ul>
</body>
</html>

后代选择器

/*后代选择器，选择所有代*/
.c p {
    color: red;
}

子选择器(一代子)

/*子选择器,只选择一代*/
body > p {
    color: yellowgreen;
}

相邻兄弟选择器(一个)

/*相邻兄弟选择器:只有一个（向下选择）*/
.p1 + p {
    color: orange;
}

通用兄弟选择器(选中所有兄弟标签)

.p1 ~ p {
    color: aquamarine;
}

这个选择器也可以多重使用

四、属性选择器(常用)

属性选择器是css中最灵活也最常用的选择器，是基本选择器的扩充，可以根据元素的属性和属性值进行选择，首先假设假设我们的html中的body部分如下(这里的每个超链接对应的数字用于后面选择器作用的标识)：

<body>
<p class="demo">
    <a href="https://www.baidu.com" class="links item first" id="first">1</a>
    <a href="https://www.sina.com" class="links item active" target="_blank" title="test">2</a>
    <a href="" class="links item">3</a>
    <a href="" class="item">4</a>
    <a href="" class="links item">5</a>
    <a href="" class="links item">6</a>
</p>
</body>

属性选择器的语法为：

标签[属性] 用于选取带有指定属性的元素
标签[属性=属性值] 用于选取带有指定属性和值的元素
标签[属性~=属性值] 用于选取属性值中包含指定词汇的元素。
标签[属性|=属性值] 用于选取带有以指定值开头的属性值的元素，该值必须是整个单词。
标签[属性^=属性值] 匹配属性值以指定值开头的每个元素。
标签[属性$=属性值] 匹配属性值以指定值结尾的每个元素。
标签[属性*=属性值] 匹配属性值中包含指定值的每个元素。

几个例子如下：

a[id] {
    background: black;
}

选取结果为：123456

a[id=first] {
    background: orange;
}

选取结果为：1

a[class*=links] {
    background: greenyellow;
}

选取结果为：12356

a[href^=http] {
    background: blueviolet;
}

选取结果为：12

a[class$=em]{
    background:orange;
}

选取结果为：3456

还有一个就是伪类选择器，日后补充

文章内容根据遇见狂神说CSS部分自学整理，在此感谢该博主，b站链接点这。

shawn697

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
CSS 知识整理(二) 选择器

CSS 知识整理(二) 选择器一、选择器的作用:要使用CSS对HTML页面中的元素实现一对一，一对多或者多对一的控制，这就需要用到CSS选择器。二、基本选择器标签选择器标签选择器就是对html中的标签进行选择,选择格式为：标签{ }。<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title&gt.
复制链接

扫一扫