太香了！CSS选择器复合玩法+常用属性一网打尽

在 CSS 的学习和应用中选择器是连接样式与 HTML 元素的桥梁而复合选择器更是让样式控制精准度翻倍的关键。今天我将结合一个 HTML 案例讲解后代选择器、子代选择器、相邻兄弟选择器、通用兄弟选择器这四类常用复合选择器的用法。讲解如下上面是原图下面是运用了各种选择器之后的效果下面分别为讲解。1. 后代选择器语法父选择器 子选择器 { 样式 }空格分隔header h1 aligncenter广东云浮中医药职业学院/h1 p aligncenter欢迎来到: ins计算机学院/ins/p hr nav ul typenone lia href#首页/a/li lia href#关于我们/a/li lia href#学生风采/a/li lia href#联系方式/a/li /ul /nav /header/* 后代选择器可跨代 */ nav ul li a{color: red;}上面是我们的目录代码下面是使用后代选择器修改颜色的代码为什么子选择器有a呢虽然a标签不是nav的直接子元素中间隔了ul、li但是只要在nav的后代链里就会被匹配。2. 子代选择器语法父选择器子选择器 { 样式 }大于号分隔main section h2最新文章/h2 article h3文章标题/h3 p这里是文章的内容简介。br可以使用br标签进行换行。/p brbrbr p想了解广东云浮中医药职业学院a hrefhttps://gdyfvccm.edu.cn/点击这里/a/p /article br aside h3侧边栏/h3 p侧边栏内容如快速链接、广告等。/p table border1 tr th专业/th th链接/th /tr tr td计算机应用技术/td tda href专业A详情页.html专业A详情/a/td /tr tr td数字媒体技术/td tda href专业B详情页.html专业B详情/a/td /tr /table /aside /section section h4联系我们/h4 form 姓名: input typetext idname namenamebr 邮箱: input typeemail idemail nameemailbr input typesubmit value提交 /form /section /main/* 子代选择器不可跨代 */ articleh3{color: green;}在我们给出的案例中这里有两个h3标签但是我们希望只让article的h3变成绿色而侧边栏aside里的h3不受影响所以我们的父选择器就要填article这样article下的h3文章标题/h3会变绿但asideh3侧边栏/h3/aside里的h3不会 。3. 相邻兄弟选择器注比较难容易混淆语法元素E元素F { 样式 }加号分隔section h2最新文章/h2 article h3文章标题/h3 p这里是文章的内容简介。br可以使用br标签进行换行。/p brbrbr p想了解广东云浮中医药职业学院a hrefhttps://gdyfvccm.edu.cn/点击这里/a/p /article br aside h3侧边栏/h3 p侧边栏内容如快速链接、广告等。/p table border1 tr th专业/th th链接/th /tr tr td计算机应用技术/td tda href专业A详情页.html专业A详情/a/td /tr tr td数字媒体技术/td tda href专业B详情页.html专业B详情/a/td /tr /table /aside /section/* 相邻兄弟选择器 */ h3p{color: orange;}这个选择器的比较重要的一个特点是匹配紧跟在元素 E之后的第一个同级元素 F且两者必须有共同父元素。这个选择器用起来比较容易混淆所以这个选择器一般很少用。4. 通用兄弟选择器语法元素E~元素F { 样式 }波浪号分隔header h1 aligncenter广东云浮中医药职业学院/h1 p aligncenter欢迎来到: ins计算机学院/ins/p hr nav ul typenone lia href#首页/a/li lia href#关于我们/a/li lia href#学生风采/a/li lia href#联系方式/a/li /ul /nav /header/* 通用兄弟选择器 */ h1~p{font-size: 50px;}案例中我们让h1之后的同级p标签字体变大只要是同级元素不管他们中间有没有隔其他元素只要是同级的p标签的元素就会变大。我们的选择器就讲到这里。5.其他常用属性a.文本属性p 段落标签用来写正文文本自带上下间距h1~h6 标题标签h1最大h6最小自带加粗和间距span 行内文本容器用来给局部文字单独设置样式比如变色、加粗a 超链接标签用来跳转页面body p idfirstfirst测试文本: 靠左对齐下划线大写字母/p p idsecondsecond测试文本居中对齐删除线小写字母/p p idthirdthird测试文本 靠右对齐上划线单词首字母大写/p /bodyb.图像属性img 图片标签用来在页面插入图片src 图片路径 img_src 文件夹就是用来放图片的alt 图片加载失败时显示的替代文本c.背景属性background-color 背景色background-image 背景图background-size 背景图大小background-position 背景图位置d.表格属性border-collapse 边框合并text-align 单元格内容对齐padding 单元格内边距border-spacing 单元格间距e.表单属性border 输入框边框outline 聚焦外框padding 内边距width/height 尺寸background-color 背景色一个关于表单和表格的小练习1.表格width/height定大小、border设边框、border-collapse/collapse合并边框、background-color设背景色。单元格th/td单独设边框、text-align水平对齐、vertical-align垂直对齐2.表单可自定义边框线型实线 / 虚线 / 双线、颜色、宽度。可改文字颜色、设置宽高、添加背景图片。