CSS选择器之复合选择器
复合选择器:
目的是为了可以选择更准确更精细的目标元素标签
复合选择器是由两个或多个基础选择器通过不同的方式组合的
1.后代选择器 又称为包含选择器
作用:用来选择元素或元素的子孙后代
其写法就是把外层标签写在前面,内层标签写在后面,中间体用空格分隔,先写父亲爷爷,再写儿子孙子:
父级 子级{属性:属性值;属性:属性值;}
语法:
.class h3{color:red;font-size:16px;}
当标签发生嵌套时,内层标签就成为外层标签的后代
子孙后代都可以这么选择,或者说,它能选择任何包含在内的标签
2.子元素选择器
作用:子元素选择器只能选择作为某元素子元素(亲儿子)的元素
其写法就是把父级标签写在前面,子级标签写在后面,中间跟一个>进行连接
语法:
.class>h3{color:red;font-size:14px;}
3.交集选择器
条件:交集选择器由两个选择器构成,找到的标签必须满足:既有标签一的特点,也有标签二的特点
语法:
h3.class{color:red;font-size:25px;}
其中第一个选择器是标签选择器,第二个为class选择器,两个选择器之间不能有空格
4.并集选择器
应用:如果某些选择器定义的样式完全相同,或部分相同,就可以利用并集选择器为它们定义相同的CSS样式
并集选择器(CSS选择器分组)是各个选择器通过,连接而成的
语法:
.class,h3{color:red;font-size:14px;}
任何形式的选择器(包括标签选择器、class选择器、id选择器等),都可以作为并集选择器的一部分
记忆技巧:
并集选择器通常用于集体声明,逗号隔开的,所有选择器都会执行后面样式,逗号可以理解为和的意思
5.链接伪类选择器
伪类选择器:与类选择器相区别,用 冒号: 区别
作用:用于向某些选择器添加特殊的效果,比如给链接添加特殊效果,比如可以选择第1个、第n个元素
a:link /*未访问的链接*/
a:visited /*已访问的链接*/
a:hover /*鼠标移动到链接上*/
a:active /*选定的链接*/
注意:
写的时候他们的顺序尽量不要颠倒,按照lvha的顺序
因为叫链接伪类,所以都是利用交集选择器
因为a链接浏览器具有默认样式,所以我们实际工作中都需要给链接单独指定样式
CSS选择器之复合选择器相关推荐
- 〖大前端 - 基础入门三大核心之CSS篇③〗- CSS选择器之复合选择器与伪类
说明:该文属于 大前端全栈架构白宝书专栏,目前阶段免费开放,购买任意白宝书体系化专栏可加入TFS-CLUB 私域社区. 福利:除了通过订阅"白宝书系列专栏"加入社区获取所有付费专栏 ...
- CSS基础(四)-- CSS选择器之标签选择器
随笔记录方便自己和同路人查阅,学习CSS时最好先学会HTML. #------------------------------------------------我是可耻的分割线----------- ...
- 〖大前端 - 基础入门三大核心之CSS篇②〗- CSS选择器之标签选择器、id选择器、class选择器与原子类
说明:该文属于 大前端全栈架构白宝书专栏,目前阶段免费开放,购买任意白宝书体系化专栏可加入TFS-CLUB 私域社区. 福利:除了通过订阅"白宝书系列专栏"加入社区获取所有付费专栏 ...
- 基础选择器之通配符选择器(CSS、HTML)
基础选择器之通配符选择器(CSS.HTML) <!DOCTYPE html> <html lang="en"> <head><meta c ...
- 基础选择器之id选择器(CSS、HTML)
基础选择器之id选择器(CSS.HTML) <!DOCTYPE html> <html lang="en"> <head><meta ch ...
- CSS基础选择器之标签选择器(CSS、HTML)
CSS基础选择器之标签选择器(CSS.HTML) <!DOCTYPE html> <html lang="en"> <head><meta ...
- 基础html交代选择器,html 选择器之基础选择器
我把CSS选择器分开成三部分,第一部分是我们常用的部分,我把他叫做基本选择器:第二部分我把他称作是属性选择器,第三部分我把他称作伪类选择器 一.基础选择器 1. 通配符(*):选中所有的元素 2.元素 ...
- 基础选择器之id选择器
id选择器可以为标有特定id的HTML元素指定特定样式. HTML元素以id属性来设置id选择器,CSS中id选择器以"#"来定义. #id名{属性1:属性值1:.... } 例如 ...
- 好程序员web前端CSS选择符(选择器):表示要定义样式的对象
好程序员web前端CSS选择符(选择器):表示要定义样式的对象 1) 元素选择符/类型选择符(element选择器 ) 如:div{width:100px; height:100px; backgro ...
最新文章
- oracle ORA-00119和ORA-00132解决方法
- numpy insert
- c语言gets多组测试,C语言如何实现输入多组数据测试
- PowerDesigner教程系列(四)概念数据模型
- Ruby Profiler详解之stackprof
- STB 上Linux软件系统解决方案
- 李宏毅机器学习 1.Machine Learning_introduction
- Android Socket通信
- 挥发性有机物TVOC、VOC、VOCS气体检测+解决方案
- cocos 场景制作流程
- 10.2 校内集训 解题报告
- html制作简单框架网页 实现自己的音乐驿站 操作步骤及源文件下载 (播放功能限mp3文件)...
- Velodyne CEO离职背后:风光不再,频频内斗,激光雷达巨头面临内忧外患
- 10大常见反人类设计:产品经理你的良心不会痛吗
- LINUX IP 路由实现
- 数字音乐收费,一场困兽犹斗
- 关于Symbian 模拟器一闪就没的解决办法(Eclipse+MTJ+symbian模拟器)
- HQChart商业使用说明及用户使用协议
- java 定时任务每日晚上凌晨执行数据统计
- java怎么修改支付宝步数,修改支付宝运动步数,不要root