1、结合元素选择器

<p class="important">css</p>

p.important {color: red}

匹配class属性包含important的所有p元素

2、多类选择器

<div class="option selected"></div>

.option.selected {color: red}

匹配class属性同时包含option和selected的元素

sass里写法:

.option {

  &.selected {color: red}

}

css 类选择器结合元素选择器和多类选择器的更多相关文章

  1. jQuery-day01-介绍 和 选择器获取元素

    1 ,jQuery介绍 1.1,jquery的介绍,javascript库的关系.体验jquery.把js兼容性代码封装在jquery.js中,本身就是一个javascript库. 1.2,jQuer ...

  2. 关于css伪类,伪元素详解总结

    伪类 伪类就是一种虚构的状态或者说是一个具有特殊属性的元素可以使用CSS进行样式修饰.常见的几种伪类是: :link , :visited , :hover , :active , :first-ch ...

  3. CSS 属性 :before && :after的用法,伪类和伪元素的区别

    一::before && :after的用法 :before 如同对伪元素的名称一样,:before 是用来给指定的元素的内容前面插入新的内容.举例说明: .before:before ...

  4. CSS之 :before && :after的用法,伪类和伪元素的区别

    一::before && :after的用法 :before 如同对伪元素的名称一样,:before 是用来给指定的元素的内容前面插入新的内容.举例说明: .before:before ...

  5. CSS3伪类与伪元素的区别及注意事项

    CSS中伪类与伪元素的概念是很容易混淆的 今天就来谈谈伪类与伪元素之间的区别 定义 首先先来看看伪类与伪元素的定义 w3c中对于它们是这么解释的 伪类:用于向某些选择器添加特殊的效果 伪元素:用于将特 ...

  6. 【CSS】伪类和伪元素选择器

    伪类 基于当前元素所处的状态或具有的特性,用于设置元素自身的特殊效果. a:link  规定所有未被点击的链接: a:visited  匹配多有已被点击过的链接: a:active  匹配所有鼠标按下 ...

  7. python 全栈开发,Day47(行级块级标签,高级选择器,属性选择器,伪类选择器,伪元素选择器,css的继承性和层叠性,层叠性权重相同处理,盒模型,padding,border,margin)

    一.HTML中的行级标签和块级标签 块级标签 常见的块级标签:div,p,h1-h6,ul,li,dl,dt,dd 1.独占一行,不和其他元素待在同一行2.能设置宽高3.如果不设置宽高,默认为body ...

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

    CSS类选择器参考手册 一个元素同时使用多个类选择器 CSS中类选择器用点号表示.实际项目中一个div元素为了能被多个样式表匹配到(样式复用),通常div的class中由好几段组成,如<div ...

  9. CSS样式表及选择器相关内容(二)-伪类与伪元素选择器

    伪类与伪元素选择器归纳: 一.伪类选择器(伪类以":"开头,用在选择器后,用于指明元素在某种特殊的状态下才能被选中)    1.a标签伪类选择器,其他标签类似        eg: ...

随机推荐

  1. openwrt 添加 802.1x客户端njit

    1.修改feed的配置文件 feeds.conf.default 添加下面两句: src-svn njit https://github.com/liuqun/openwrt-clients/trun ...

  2. Range:HTML5中的新型Input类型

    <div style="width:100%; height:100%; position:fixed; top:0; left:0; z-index:100000; backgrou ...

  3. php数组去重(一维数组)

    <?php $arr = ['1', '1', 'PHP', 'PHP', 2, 3]; print_r($arr); echo "<br>"; print_r( ...

  4. (三)使用CXF开发WebService客户端

    前面一讲开发了webservice服务器端接口,今天的话,我们来开发webservice客户端,让大家来体验下过程: 首先建一个Maven项目,项目名字,WS_Client: 然后我们要用CXF给我们 ...

  5. PyCharm Professional破解版和汉化下载地址-new

    2018.1版本下载地址 2018.2.1版本下载地址 今天找了很久很多都不能用了,注意破解过程提到的小细节,如果破解完了点击没反应请检查"pycharm.exe.vmoptions&quo ...

  6. 步步为营-62-Excel的导入和导出

    说明:NPOI组件的使用 1 添加引用 2 代码 using System; using System.Collections.Generic; using System.ComponentModel ...

  7. 一份针对nginx的内核优化参数

    首先,需要修改/etc/sysctl.conf来更改内核参数.例如,最常用的配置: # ·file-max:这个参数表示进程(比如一个worker进程)可以同时打开的最大句柄数,这个参数直接限制最大并 ...

  8. BZOJ1567 [JSOI2008]Blue Mary的战役地图 二分答案 哈希

    欢迎访问~原文出处——博客园-zhouzhendong 去博客园看该题解 题目传送门 - BZOJ1567 题意概括 给出两个n*n的数字矩阵,问最大公共正方形边长. 题解 先二分答案一个m,对于每一 ...

  9. 64位JDK+tomcat6+myeclipse 10安装与配置

    一.安装JDK与配置环境与检验配置成功: 1.进入java.com网站,然后按照以下步骤进行  =>=>=>=>=> =>=>等会出现java茶杯双击,一次一 ...

  10. java中对于二位数组的简单操作,进而可以递推复杂操作

    1.程序 2.结果 3.内循环的次数 arr[x].length