CSS选择器

最新推荐文章于 2024-03-06 23:16:54 发布

码农胖哒

最新推荐文章于 2024-03-06 23:16:54 发布

阅读量548

点赞数

分类专栏：前端文章标签：前端 css css3

本文链接：https://blog.csdn.net/weixin_43692188/article/details/124187788

版权

前端专栏收录该内容

1 篇文章 0 订阅

订阅专栏

四种基本选择器

标签选择器

/*
    标签选择器选择的是某类标签，、
    如：div span ul li ...
*/
div {
    backround-colr: red;
}

ID选择器特定标签，有且只有一个

/*
    定义在标签上的ID属性值，在整个html页面中是唯一的，用“#”号表示
    如：
    <span id="my_text">我是文本</span>
*/

#my_text {
    font-size: 14px
}

类选择器将标签归类，统一设置

/*
    类选择器选择的是再标签中定义的“class”属性，可以对需要使用的标签进行统一样式管理
    如：
        <div class="my_text">我是文本</div>
        <span class="my_text>我是文本</span>
    通过类选择器“.my_text”，可以同时设置div、span标签的样式，非常方便
*/
.my_text {
    font-size: 14px;
}

通用选择器匹配所有标签

/*
    通用选择器，通过通配符“*”的方式使用，能匹配所有的标签
*/
* {
    matgin: 0px;
}

后代选择器

当在开发时，需要将某个标签下的某种标签统一设置样式，就可以使用后代标签，并且不需要一定是子代，孙代、曾孙代都可，即只要是该标签的后代，都能适用。直接上例子：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>后代选择器例子</title>
</head>
<style type="text/css">
    div span {
        color: red;
    }
</style>
<body>
<div>
    <span>子代</span>
    <div>
        <span>孙代</span>
    </div>
    <div>
        <div>
            <span>曾孙代</span>
        </div>
    </div>
</div>
</body>
</html>

交集选择器

交集选择器如：div.my_text。意思是必须是div标签，并且该div定义了类："my_text"，才能命中。如果标签中定义的是ID的话，书写形式为：div#id。上例子：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>并集选择器例子</title>
</head>
<style type="text/css">
    div.my_text{
        color: red;
    }
</style>
<body>
<div class="my_text">是并集选择器的内容</div>
<div>不是并集选择器的内容</div>
<div class="my_text">是并集选择器的内容</div>
<div>不是并集选择器的内容</div>
</body>
</html>

css3的一些选择器

子代选择器（IE7开始兼容）

子代选择器，只能选择子代的内容，与后代选择器不一样，后代选择器只要是被包裹切命中的内容，都会被选择。它们的书写形式也不一样，上例子：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>子代选择器例子</title>
</head>
<style type="text/css">
    .base > span{
        color: red;
    }
</style>
<body>
<div class="base">
    <span>子代</span>
    <div>
        <span>孙代</span>
    </div>
    <span>子代</span>
</div>
</body>
</html>

序选择器（IE7开始兼容）

可以通过序号选择对应内容，也可以通过一些方式，如选择第一个、选择最后一个等，选择对应的内容警醒设置，上例子：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>序选择器例子</title>
</head>
<style type="text/css">
    /*选择第一个*/
    .base>div:first-child {
        color: #070fb3;
        font-weight: bold;
    }
    /*选择最后一个*/
    .base>div:last-child {
        color: #b30c22;
    }
    /*选择偶数*/
    .base>div:nth-child(even) {
        background: #f9f12a;
    }
    /*选择奇数*/
    .base>div:nth-child(odd) {
        background: #48f968;
    }
    /*选择想选择的数*/
    .base>div:nth-child(4) {
        background: #f90834;
    }
</style>
<body>
<div class="base">
    <div>我是第一个</div>
    <div>我是第二个</div>
    <div>我是第三个</div>
    <div>我是第四个</div>
    <div>我是第五个</div>
    <div>我是第六个</div>
    <div>我是第七个</div>
    <div>我是第后一个</div>
</div>
</body>
</html>