使用CSS的类名交集复合选择器

首先先看一下基本定义: 复合选择器就是两个或多个基本选择器,通过不同方式连接而成的选择器,主要包括“交集”选择器.“并集”选择器.“后代”选择器. 交集选择器 “交集”复合选择器是由两个选择器直接连接构成,其结果是选中二者各自元素范围的交集.其中第一个必须是标记选择器,第二个必须是类别选择器或者ID选择器.这两个选择器之间不能有空格,必须连续书写. 注意其中第一个必须是标记选择器,如p.class1,但有时候会看到.class1.class2,即2个都是类选择器,在其他浏览器中是允许出现这种情况…

使用css的类名交集复合选择器《转》

复合选择器就是两个或多个基本选择器,通过不同方式连接而成的选择器,主要包括“交集”选择器.“并集”选择器.“后代”选择器. 交集选择器 “交集”复合选择器是由两个选择器直接连接构成,其结果是选中二者各自元素范围的交集.其中第一个必须是标记选择器,第二个必须是类别选择器或者ID选择器.这两个选择器之间不能有空格,必须连续书写. 注意其中第一个必须是标记选择器,如p.class1,但有时候会看到.class1.class2,即2个都是类选择器,在其他浏览器中是允许出现这种情况的,但IE6不兼容.如下…

(2)css的复合选择器与特性

css的复合选择器与特性在本篇学习资料中,将深入了解css的相关概念,上一篇介绍的3种基本选择器的基础上,学习3种由基本选择器复合构成的选择器,然后再介绍css的两个重要的特性. 1.复合选择器复合选择器就是两个或多个基本选择器,通过不同的方式连接成的选择器. 复合选择器的三种类型:交集选择器.并集选择器.后代选择器. (1)交集选择器 “交集”复合选择器由两个选择器直接连接构成:其中第一个必须是标记选择器,第二个必须是类别选择器或者ID选择器:这两个选择器之间不能有空格. 例如:下图声明了…

CSS复合选择器和div盒子模型

一.复合选择器(3种) 1.交集复合选择器特点:由2个选择器组成,其中第一个必须是标签选择器,第二个是类或id选择器.两个选择器之间没有空格(有空格属于层级选择器) <h3 class="c3">h3标题</h3> 相当于找的是h3标签class属性为c3的元素 2.并集复合选择器特点:简称集体声明,由多个选择器通过逗号隔开,链接在一起,它主要用于多个不同的标签具有相同的css属性 <!DOCTYPE html> <html> <…

CSS导入方式和六种选择器

1.css的导入方式 1.1 行内嵌式 1.2 内部方式 1.2.1含义: css代码写在<head>的<style>标签中 1.2.2 优点方便在同页面中修改样式 1.2.3 缺点不利于在多页面间共享复用代码及维护,对内容与样式的分离也不彻底 1.3 外部方式 1.4 @import方式备注:link和@import区别: 1.link所有浏览器都支持,@import某些版本低的IE不支持 2.@import是等待html加载完成才加…

0013 CSS复合选择器：后代、子代、交集、并集、超链接伪类

重点: 复合选择器后代选择器并集选择器标签显示模式 CSS背景背景位置 CSS三大特性优先级 1. CSS复合选择器目标理解理解css复合选择器分别的应用场景应用使用后代选择器给元素添加样式使用并集选择器给元素添加样式使用伪类选择器为什么要学习css复合选择器 CSS选择器分为基础选择器和复合选择器 ,但是基础选择器不能满足我们实际开发中,快速高效的选择标签. 目的是为了可以选择更准确更精细的目标元素标签. 复合选择器是由两个或多个基础选择器,通过不同的方式组合而…

CSS复合选择器

复合选择器是由两个或多个基础选择器,通过不同的方式组合而成的,目的是为了可以选择更准确更精细的目标元素标签. 交集选择器交集选择器由两个选择器构成,其中第一个为标签选择器,第二个为class选择器,两个选择器之间不能有空格,如h3.special. 比如: p.one 选择的是: 类名为 .one 的段落标签. 使用率相对较少记忆技巧: 交集选择器是并且的意思. 即...又...的意思并集选择器并集选择器(CSS选择器分组)是各个选择器通过逗号连接而成的,任何形式的选择器(包括标签…

css复合选择器的权重

选择器的权重标签选择器的权重为0001 class选择器的权重为0010 id选择器的权重为0100 属性选择器的权重为0010 伪类选择器的权重为0010 伪元素选择器的权重为0010 包含选择器的权重:所包含选择器的权重之和子选择器的权重:所包含选择器的权重之和交集选择器权重为选择器之和继承样式的权重为0000 行内样式的权重为1000 测试 <html> <head> <title>DOM Tests</title> <style>…

css学习_css复合选择器

css复合选择器 a.交集选择器 (即...又...:选择器之间不能有空格) p.one{color:red;] b.并集选择器(中间由逗号隔开) p,div{color:red;} c.后代选择器(可以选择到所以的子孙后代 :中间用空格隔开) .class h3{color:red} d.子元素选择器(中间用大括号 >; 选的是儿子,孙子啥的不算) div>span{color:red;} e.属性选择器(用中括号表示) a[title]{color:red;} input[type=…

CSS的引入方式和复合选择器

CSS的引入方式样式表优点缺点范围行内样式表书写方便结构样式混写控制一个标签内部样式表部分结构和样式相分离没有彻底控制一个页面外部样式表完全实现结构和样式分离需要引入控制多个页面 <link rel="stylesheet" href="a.css">  emmet 语法快速生成HTML标签生成多个标签:div*****10 有父子级关系的标签:ul…

CSS复合选择器，元素的显示模式，CSS背景设置

欢迎大家去博客冰山一树Sankey,浏览效果更好.直接右上角搜索该标题即可博客园主页:博客园主页-冰山一树Sankey CSDN主页:CSDN主页-冰山一树Sankey 前端学习:学习地址:黑马程序员pink老师前端入门教程,零基础必看的h5(html5)+css3+移动,下面这些都是一些学习笔记.临渊羡鱼,不如退而结网!!愿我自己学有所成,也愿每个前端爱好者学有所成一. Emmet语法 Emmet语法前身是Zen coding,它使用缩写来提高html/css的编写速度,Vscode内部已…

CSS复合选择器是什么？复合选择器是如何工作

复合选择器介绍复合选择器其实很好理解,说白了就跟我们生活中的有血缘关系家庭成员一样,通过标签或者class属性或id属性,去找对应的有血缘关系的某个选择器,具体的大家往下看哦. 如果是初学者对基本的选择器不是很了解的可以看笔者之前写过的基本选择器文章,CSS基本选择器是什么?基本选择器是如何工作,在这就不过多的介绍基本选择器的使用了. 复合选择器说明表选择器描述举例选择器1 选择器2{属性:值;} 多元素选择器.同时匹配选择器1和选择器2,多个选择器之间用逗号隔开即可. h1,h2,h…

【CSS复合选择器、元素显示模式、背景】前端小抄(3) - Pink老师自学笔记

[CSS复合选择器.元素显示模式.背景]前端小抄(3) 本学习笔记是个人对 Pink 老师课程的总结归纳,转载请注明出处! 一.CSS的复合选择器 1.1 什么是复合选择器在 CSS 中,可以根据选择器的类型把选择器分为:基础选择器和复合选择器,复合选择器是建立在基础选择器之上,对基础选择器进行组合形成的. 复合选择器可以更准确.更高效的选择目标元素(标签) 复合选择器是由两个或多个基础选择器,通过不同的方式组合而成的常用的复合选择器包括:后代选择器.子选择器.并集选择器.伪类选择器等…

CSS（二）：选择器

一.基本选择器 1.标签选择器 HTML标签作为标签选择器的名称,例如<h1>~<h6>.<p>等. 语法: p{font-size: 16px;} p:标签选择器. font-size: 16px; 声明. font-size:属性. 16px 属性值. 示例: <!DOCTYPE> <html> <head> <meta charset="utf-8" /> <title>基本选择器&l…

CSS基础-引入方法，选择器，继承

一.CSS引入方法:行内式.嵌入式.导入式.链接式. 1.行内式. 即:在标签的style属性中设定CSS样式. 例子:<div style="行内式</div> 2.嵌入式即:将页面各种元素的设置集中写在<head></head>标签里. 例子: <head> <style type="text/css"> div{ } </style> </head> 3.导入式即:将一个外部C…

css 03-CSS样式表和选择器

03-CSS样式表和选择器 #本文主要内容 CSS概述 CSS和HTML结合的三种方式:行内样式表.内嵌样式表.外部样式表 CSS四种基本选择器:标签选择器.类选择器.ID选择器.通用选择器 CSS几种扩展选择器:后代选择器.交集选择器.并集选择器 CSS样式优先级 #前言 #CSS 概述 CSS:Cascading Style Sheet,层叠样式表.CSS的作用就是给HTML页面标签添加各种样式,定义网页的显示效果.简单一句话:CSS将网页内容和显示样式进行分离,提高了显示功能. css的最…

CSS基础 CSS的三大特性以及选择器优先级计算方法

1.子元素默认会继承父元素的样式,但不是所有的元素都有继承常见的继承父元素特点的元素有: 1.color 2.font-sytle.font-weight.font-size.font-family 3.text-indent.text-align 注意:可以通过chrome浏览器查看是否支持继承,可在style中看到inherited from (div father)...也就是说权限来自于哪里应用场景 (1)去除ul中的无序列表中的小黑点,可以直接设置给ul{list-style:no…

jQuery 复合选择器的几个例子

一. 复合选择器对checkbox的相关操作 1 <input type="checkbox" id="ckb_1" /> 2 <input type="checkbox" id="ckb_2" disabled="true" /> 3 <in…

css——样式表分类，选择器

一,样式表分类 (1)内联样式[优先级最高][常用][代码重复使用性最差] (当特殊的样式需要应用到个别元素时,就可以使用内联样式. 使用内联样式的方法是在相关的标签中使用样式属性.样式属性可以包含任何 CSS 属性.) (2)内嵌样式表[优先级第二][最不常用][代码重复使用性一般] (当单个文件需要特别样式时,就可以使用内嵌样式表.你可以在 head 部分通过 <style> 标签定义内部样式表.) (3)外部样式表[优先级最低][最常用][代码重复使用性最好] (当样式需要被应用到很多页…

CSS 常见的8种选择器和文本溢出问题

<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title>css常见的8种选择器</title> </head> <style> /*1.通用选择器匹配页面上任何一个元素语法 *{} * */ *{ color:darkred; font-size: 23px; color: blue; } /*2.元素选择器也叫标签选择器…

前端基础之CSS的引入+HTML标签选择器+CSS操作属性

clear:left/ringt属性 CSS:语法形式上由选择器+以及一条或多条声明组成:选择器查找到指定的html标签后,使用css属性设置html标签的样式: 一.css 语法形式: 二.使用步骤 1.引入css规则 2.使用css选择器查找html标签: 3.利用css属性设置html标签的样式:…

【3-24】css样式表分类、选择器、样式属性

一.css样式表分类: (一)内联样式表:代码写在标签内的样式表控制精确代码重用性差优先级最高格式:<p style="样式属性">内容</p> <div style="text-decoration:line-through;">第四格第三元</div> (二)内嵌样式表:将代码写在标签<style type="text/css"></style>之间,此标签一…

CSS基础知识：常见选择器示例

CSS(Cascading Style Sheet),中文译为层叠样式表,可以让设计者方便灵活地控制Web页面的外观表现.CSS是1996年由W3C审核通过并且推荐使用的.CSS的引入,就是为了使HTML语言更好地适应网页的美工设计.CSS详细规范说明要查阅CSS手册,或登录W3C官网(http://www.w3c.org). 使用CSS,要了解常用的各种选择器. 1.标记选择器: 一个HTML页面由很多不同的标记组成,而CSS选择器就是声明哪些标记采用哪种CSS样式.每一种HTML标记的名称都…

CSS样式表——格式与选择器

1.分类 1)内联(写在标签内部) style="样式" 控制精确,代码重用性差 2)内嵌(在<head></head>中) <style type="text/css"> 样式 </style> 控制没有内联的精确,代码重用性好 3)外部(单独的样式文件) <head> <link href="css文件路径" rel="stylesheet" type=&q…

CSS篇-样式表、选择器、权重、伪类

CSS定义 CSS:Cascading Style Sheet(层叠样式表) // 写法选择器 { 属性名: 属性值; } CSS样式表 (1)三种样式表使用 // 内联样式 <div style="width: 100px; height: 100px;"></div> // 内部样式表 <style type="text/css"> div { width: 100px; height: 100px; } </styl…

CSS中模拟父元素选择器

很多情况下,我们需要找到父元素,但可惜的是css中并没有这样的一个选择器. 至于原因可以看张鑫旭的如何在CSS中实现父选择器效果这篇文章. 简单来说这个实现并不是真正的父元素选择器,只是利用其它思路来实现相同效果罢了. HTML: <div id="box"> <p>pppppppp</p> <span></span> </div> CSS: div,p{ margin:0; padding:0; } #box{…

weex中css不能使用子元素选择器

weex中css不能使用子元素选择器刚入手可能会有错误,有误导地方请谅解,不过都是亲身踩坑…

CSS的Class以及ID选择器

9.CSS的Class以及ID选择器 id和class的不同指出在于一个页面同一个ID只能只有一次,而class可以无限制使用. 同样,你可以在html选择器后面使用一个选择器来指定特殊HTML元素,比如p.jam{值}将作用到带有'jam'class属性的段落.10.这个都差点忘了.页面布局 clear float disply等这几个,关于网站用div+css主要把这个用好.总结:基本上都差不多,css的概念都有了一个了解,必定我们是做web开发,但是css,html前端的我们不能不知道,要…

CSS选择器之伪类选择器（伪元素）

selection [CSS4]应用于文档中被用户高亮的部分(比如使用鼠标或其他选择设备选中的部分).(IE8及以下不支持)(火狐-moz-selection) first-line 选择每个 <p> 元素的首行,并为其设置样式. first-letter 选择每个 <p> 元素的首字母,并为其设置样式. before 在每个 <p> 元素的内容之前插入新内容.(IE7及以下不支持) after 在每个 <p> 元素的内容之后插入新内容.(IE7及以下不支持…

CSS中:before和:after选择器的用法

在线演示这次给大家带来的是对话气泡效果,主要是演示了 :before / :after 和 border 的用法,赶快来围观吧. 阅读原文:CSS中:before和:after选择器的用法…

【使用CSS的类名交集复合选择器】的更多相关文章