CSS选择器_css 内容选择

作者：寸_铁 | 2024-07-07 15:32:10

踩

css 内容选择

四种基本选择器

后代选择器

交集选择器

css3的一些选择器

四种基本选择器

标签选择器


/*
    标签选择器选择的是某类标签，、
    如：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>

声明：本文内容由网友自发贡献，不代表【wpsshop博客】立场，版权归原作者所有，本站不承担相应法律责任。如您发现有侵权的内容，请联系我们。转载请注明出处：https://www.wpsshop.cn/w/寸_铁/article/detail/796114