CSS学习总结（2）—

选择器

元素选择器

元素选择器就是对已选中的HTML元素符号设置CSS样式（如：div、p、a、ul、li等元素符号）

p{width:80px;height:90px;
}

class选择器

class选择器（类型选择器）通过绑定HTML元素上已设置的class标签进行设置对应的CSS样式。以.（class选择符前缀）加上对应的class名称组合成选择器的元素符号。

.web{width:40px;height:20px;color:red;
}

id选择器

id选择器通过绑定HTML元素上已设置的唯一id标签进行设置对应的CSS样式。以#（id选择符前缀）加上对应的id名称组合成选择器的元素符号。

#web{width:80px;height:90px;
}

后代选择器

选中某个父级下对应的所有子级，并针对该子级设置CSS样式。

后代选择器设置的CSS样式不会影响到父级。
父级和子级之间需要用空格隔开。
后代选择器可以存在多层级父级，并不局限在单一父子级之间，层级越深所设置的CSS样式优先级越高。

.grade2. class1{color:blue;
}

子元素选择器

子元素选择器与后代选择器较为类似。相对于后代选择器，子元素选择器所涉及的范围会更小。

后代选择器可以跨层级影响，而子元素选择器要求父元素和子元素一定为上下级关系，中间如果隔着其他元素则会失效。
父元素和子元素之间需要用 >(子结合符) 隔开。

div > p{width:80px;height:90px;
}

相邻选择器

相邻选择器：选中对应元素的下一个兄弟元素。

所涉及的相邻兄弟元素必须是该元素的同级元素。
所涉及的相邻兄弟元素必须是相邻兄弟元素，中间若有其他元素隔开也将导致失效。
元素A和对应的相邻兄弟元素之间需要用 + 隔开。

 <head><style type="text/css">#web+p{color:red;}#false+p{color:blue;}</style></head><body><div id="web">数学</div><p>语文</p><p>英语</p><!--    以下是错误示例    --><div id="false">化学</div><!--    由于p并非error的同级元素，所以设置的CSS样式无效    --><div><p>物理</p></div></body>
</html>

属性选择器

属性选择器：检索HTML页面中符合所设置的属性条件的元素。

属性选择器通过[ ]设置被选元素的属性条件。如下图所示，将选择HTML页面中所有包含了alt属性的img元素并为其设置CSS样式。

/***设置页面上所有含有id属性的div元素***/
div[id]{color:red;
}/***设置页面上所有同时含有class和id属性的div元素***/
a[class][id]{color:red;
}
/***设置页面上所有含有href属性并且属性值为https://www.csdn.net的a元素***/
a[href="https://www.csdn.net"]{color:red;
}
/***设置页面上所有含有class属性并且属性值的词列表的某个词等于web的div元素。(适用于针对设置了多个class名称的元素使用)***/
div[class~="web"]{color:red;
}
/*** 设置页面上所有含有class属性并且属性值中以web开头的div元素***/
div[class^="web"]{color:red;
}
/*** 设置页面上所有含有class属性并且属性值中以web结尾的div元素***/
div[class$="web"]{color:red;
}
/***设置页面上所有含有class属性并且属性值中包含web的div元素***/
div[class*="web"]{color:red;
}
/***设置页面上所有含有class属性并且属性值等于web或者以web开头的div元素***/
div[class|="web"]{color:red;
}

选择分组器

当需要多个元素同时使用同一套CSS样式时，可以使用选择器分组，这样可以避免为每个元素单独设置样式而照成不必要的冗余。

选择器分组通过 , （逗号）将需要复用同一套样式的多个元素进行分隔。

a,p,div{color:red;
}

CSS学习总结（2）——选择器相关推荐

CSS学习笔记之选择器（一）
目录 CSS选择器标签选择器 id选择器 class选择器后代选择器群组选择器 * CSS 规则由两个主要的部分构成:选择器,以及一条或多条声明: 选择器通常是您需要改变样式的 HTML 元素. ...
【温故知新】CSS学习笔记（选择器）
选择器(选择符) 目的是选择目标元素(选择标签用). 这里我们介绍四种基础选择器. 1.标签选择器之前的例子都属于标签选择器,可以把某一类的标签全部选择出来: 2.类选择器上面点声明,下面clas ...
CSS学习笔记 2.选择器.常用.复合.关系选择器
一.常用选择器 1.元素选择器(标签选择器) 使用HTML标签作为选择器的名称 p{color:green;font-size:20px;/* 1元素选择器根据标签名来选中元素 */}/* 此为cs ...
CSS 学习路线(二)选择器
选择器规则结构: 分两个基本部分选择器(selector)和声明块(declaration block) 组成声明块:由一个或多个声明组成,每一个声明都是属性-值对选择器分为:元素选择器,类选 ...
HTML/CSS学习笔记03【CSS概述、CSS选择器、CSS属性、CSS案例-注册页面】
w3cschool菜鸟教程.CHM(腾讯微云):https://share.weiyun.com/c1FaX6ZD HTML/CSS学习笔记01[概念介绍.基本标签.表单标签][day01] HTML ...
CSS学习笔记｜MDN-CSS选择器
记录在MDN学习CSS中的一些个人笔记. 选择器种类通配选择器或叫全局选择器.选中所有元素. * {} 标签.类.ID选择器标签选择器.选择所有的 h1 元素 h1 { } 类选择器.选择类名有 ...
【前端学习之HTMLCSS】-- CSS第三篇 -- 选择器（上）
[前端学习之HTML&CSS]-- CSS第三篇 – 选择器(上) 文章目录 [前端学习之HTML&CSS]-- CSS第三篇 -- 选择器(上) 前言选择器简单选择器 1. ID ...
CSS学习小记1（Dreamweaver CC 创建选择器）
创建CSS 选择器第一种方式: 首先以"标准"窗口为准. 1.光标在HTML中选取需要定义的目标标签,该内容上方出现标签名称和+. 2.点击+,出现输入框,输入选择器名称,英文字 ...
CSS学习笔记--CSS语法与选择器
导语 Css用于控制网页的样式和布局,指层叠样式表(Cascading Style Sheets),定义如何显示HTML的元素,这个样式通常存储在样式表中.在工作中通常使用的外部样式表,外部样式表 ...
阿ken的HTML、CSS的学习笔记_CSS3选择器（笔记四）
你好,我是阿Ken 恭迎您能前来拜访虽还未踏入社会尚处象牙塔内却总总陷入迷茫不知所措有时很渴望有一个信仰能够成为我的精神支柱促使我一路坚持走下去但苦于一直未果后来短暂接触了一下这社会环境也 ...

CSS学习总结（2）——选择器

选择器