CSS一个元素同时使用多个类选择器(class selector)

本文深入探讨了CSS中类选择器的使用技巧,包括多个类选择器的匹配规则及样式覆盖原则,通过实例展示了不同场景下类选择器的正确应用。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

一个元素同时使用多个类选择器

CSS中类选择器用点号表示。实际项目中一个div元素为了能被多个样式表匹配到(样式复用),通常div的class中由好几段组成,如<div class="user login">能被.user和.login两个选择器选中。如果这两个选择器中有相同的属性值,则该属性值先被改为.user中的值,再被改为.login中的值,即重复的属性以最后一个选择器中的属性值为准。测试如下:

复制代码

<style> 
.user
{
    font-size: 30px;
    background-color:red;
}
.login
{
    background-color:blue;
}
</style>
</head>
<body>

<div class='user'>你好。这是一个 DIV 元素,class='user'。</div>
<div class='login'>你好。这是一个 DIV 元素,class='login'。</div>
<div class='user login'>你好。这是一个 DIV 元素,class='user login'。</div>

</body>

复制代码

第三个div元素的背景颜色以.login中的为准,效果如下图:

CSS类选择器的匹配规则

CSS中多个类选择器之间有没有空格是怎样的匹配规则?如.user.login和.user .login(中间有空格)的区别?

直接上例子。电商项目中的导航栏,包括用户的登录/注册/注销,以及购物车等信息。

Html:

复制代码

<div class="nav">
    <div class="w">
        <div class="user-info">
            <span class="user not-login">
                <span class="link js-login">登录</span>
                <span class="link js-register">注册</span>
            </span>
            <span class="user login">
                <span class="link-text">
                    欢迎,
                    <span class="username"></span></span>
                <span class="link">退出</span>
            </span>
        </div>

        <!-- 右侧的导航链接 -->
        <ul class="nav-list">
            <li class="nav-item">
                <a class="link" href="./cart.html">
                    <i class="fa fa-shopping-cart"></i>
                    购物车(<span class="cart-cont">0</span>)
                </a>
            </li>
            <li class="nav-item">
                <a class="link" href="./order-list.html">我的订单</a>
            </li>
            <li class="nav-item">
                <a class="link" href="./user-center.html">我的MMall</a>
            </li>
            <li class="nav-item">
                <a class="link" href="./about.html">关于MMall</a>
            </li>
        </ul>
    </div>
</div>

复制代码

CSS:

复制代码

.nav{
    background: #eee;
    height: 30px;
    line-height: 30px;
}

/* 用户部分 */
.nav .user{
    float: left;
}
.nav .user.login{
    display: none;
}
.nav .user .link{
    margin-right: 5px;
}


/* 导航链接部分 */
.nav .nav-list{
    float: right;
}
.nav .nav-list .nav-item{
    display: inline-block;
    margin-left: 5px;
}

复制代码

观察上面代码的运行结果可知:

  • .nav .user(中间有空格)匹配到class含有nav的元素下面的class含有user的元素,是<span class="user not-login">和<span class="user login">。
  • .user.login(中间没有空格)匹配到class同时含有user和login的元素,是<span class="user login">。
  • .nav .user.login(.nav和.user中间有空格,.user和.login中间没有空格)匹配到class含有nav的元素下面的class同时含有user和login的元素,是<span class="user login">。

一个更小的例子

复制代码

<!DOCTYPE html>
<html>    
<head>
<meta charset="utf-8"> 
<title>类选择器</title> 
<style> 
.user.login /* 匹配同时包含user和login的元素 */
{
    font-size: 35px;
}

.user .login{ /* 匹配含user下的含login的元素 */
    background-color:green;
}

</style>
</head>
<body>

<div class='user'>你好。这是一个 DIV 元素,class='user'。
    <div class='login'>你好。这是一个 DIV 元素,class='user login'。</div>    
</div>
<div class='login'>你好。这是一个 DIV 元素,class='login'。</div>
<div class='user login'>你好。这是一个 DIV 元素,class='user login'。</div>

</body>
</html>

 

 

转自:https://www.cnblogs.com/guxin/p/css-multi-class-selector.html

### 如何使用CSS选择器选取最后一个特定class元素CSS中,`last-of-type`伪类用于匹配父元素中的某个类型(标签名)的最后一个元素。然而,需要注意的是,`last-of-type`仅适用于 **标签类型** 而不直接作用于带有特定 `class` 的元素[^3]。 如果要通过CSS选择器来定位最后一个具有特定 `class` 的元素,则可以结合其他方法实现这一目标: #### 方法一:组合使用`:nth-last-of-type(1)` 和 `.classname` 虽然 `last-of-type` 不支持直接针对 `class` 进行筛选,但可以通过嵌套结构的方式间接完成此操作。例如,在某些情况下,假设该 `class` 始终应用于同一类型的HTML标签(如 `<div>` 或 `<span>`),则可以用以下方式表示: ```css .classname:nth-last-of-type(1) ``` 这会选择属于其父级容器内同种标签下的最后一个带有所需 `class` 属性的实例[^1]。 #### 方法二:利用通用兄弟选择符 (~) 实现逻辑排除法 另一种更灵活但也稍微复杂的方法涉及到了解并运用相邻/通配兄妹关系表达式。具体做法如下所示: ```css .className:not(.className ~ .className) ``` 这里的意思是从所有`.className`里挑选那些后面没有任何相同名称的兄弟节点项作为最终结果集的一部分成员之一[^2]。 注意以上两种方案各有优劣以及适用场景,请依据实际需求情况选用合适的策略来进行开发实践当中去吧! 以下是基于 Selenium 使用 Python 编写的示范代码片段展示如何获取页面上符合条件的目标对象列表: ```python from selenium import webdriver wd =webdriver.Chrome() url='https://example.com' wd.get(url) # Method One Example Code Block Using nth-last-of-type(): elements_via_method_one=wd.find_elements_by_css_selector('.targetClass:nth-last-of-type(1)') for ele in elements_via_method_one: print(ele.text) #Method Two Example Code Block Utilizing General Sibling Combinator(~): alternative_selection_strategy='.targetClass:not(.targetClass~.targetClass)' elements_via_alternative_approach=wd.find_elements_by_css_selector(alternative_selection_strategy) for elem in elements_via_alternative_approach: print(elem.text) wd.quit() ```
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值