CSS复合选择器有哪一些?如何使用�
Admin 2021-04-16 群英技术资�
交集选择器由两个选择器直接连接构成,其中第一个选择器必须是元素选择器,第二个选择器必须是类选择器或� ID 选择器,两个选择器之间必须连续写,不能有空格�
交集选择器选择的元素必须是由第一个选择器指定的元素类型,该元素必须包含第二个选择器对应的 ID 名或类名。交集选择器选择的元素的样式是三个选择器样式,即第一个选择�;
语法�
元素选择� . 类选择器| #ID 选择� { 属� 1: 属性� 1� 属� 2: 属性� 2� }
语法说明:“类选择器| ID 选择器”表示使用类选择器,或者使� ID 选择器�
例:
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title> 使用交集选择器设置样� </title> <style> /* 元素选择器设置边框和下外边距样式 */ div { border: 5px solid red; margin-bottom:20px; } /* 交集选择器设置背景颜� */ div.txt { background:#33FFCC; } /* 类选择器设置字体格� */ .txt { font-style:italic; } </style> </head> <body> <div> 元素选择器效� </div> <div class="txt"> 交集选择器效� </div> <span class="txt"> 类选择器效� </p> </body> </html>
并集选择器也叫分组选择器或群组选择器,它是由两个或两个以上的任意选择器组成的,不同选择器之间用“,”隔开,实现对多个选择器进行“集体声明”�
并集选择器的特点是所设置的样式对并集选择器中的各个选择器都有效。并集选择器的作用是把不同选择器的相同样式抽取出来,然后放到一个地方作一次性定义,从而简化了 CSS 代码量�
语法�
选择� 1, 选择� 2, 选择� 3, { 属� 1: 属性� 1� 属� 2: 属性� 2� }
语法说明:选择器的类型任意,既可以是基本选择器,也可以是一个复合选择器�
例:
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title> 使用并集选择器设置样� </title> <style> div { margin-bottom:10px; border:3px solid red; } span { font-size:26px; } p { font-style:italic; } /* 使用并集选择器设置元素的公共样式 */ span, .p1, #d1 { background:#CCC; } </style> </head> <body> <div id="d1"> 这是 DIV1</div> <div> 这是 DIV2</div> <p class="p1"> 这是段落一 </p> <p> 这是段落� </p> <span> 这是一� SPAN</div> </body> </html>
后代选择器又称包含选择器,用于选择指定元素的后代元素。使用后代选择器可以帮助我们更快更确切地找到目标元素�
语法�
选择� 1 选择� 2 选择� 3 { 属� 1: 属性� 1� 属� 2: 属性� 2� }
例:
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title> 使用后代选择器设置样� </title> <style> #box1 .p1 { /* 后代选择� */ background:#CCC; } #box2 p { /* 后代选择� */ background:#CFC; } </style> </head> <body> <div id="box1"> <p class="p1"> 段落一 </p> <p class="p2"> 段落� </p> </div> <div id="box2"> <p class="p1"> 段落� </p> <p> 段落� </p> </div> <p class="p1"> 段落� </p> <p> 段落� </p> </body> </html>
后代选择器可以选择某个元素指定类型的所有后代元素,如果只想选择某个元素的所有子元素,则需要使用子元素选择器�
语法�
选择� 1> 选择� 2 { 属� 1: 属性� 1; 属� 2: 属性� 2; }
语法说明:�>”称为左结合符,在其左右两边可以出现空格,“选择� 1> 选择� 2”的含意为“选择作为选择� 1 指定元素的所有选择� 2 指定的子元素�.
例:
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title> 子元素选择器应用示� </title> <style> h1>span { color:red; } </style> </head> <body> <h1> 这是非常非常 <span> 重要 </span> � <span> 关键 </span> 的一步�</h1> <h1> 这是真的非常 <em><span> 重要 </span> � <span> 关键 </span></em> 的一步�</h1> </body> </html>
如果需要选择紧接在某个元素后的元素,而且二者有相同的父元素,可以使用相邻兄弟选择器�
语法:
选择� 1+ 选择� 2 { 属� 1: 属性� 1; 属� 2: 属性� 2; }
�:
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title> 相邻兄弟选择器应用示� </title> <style> h1+p { color:red; font-weight:bold; margin-top:50px; } p+p{ color:blue; text-decoration:underline; } </style> </head> <body> <h1> 这是一个一级标� </h1> <p> 这是段落 1�</p> <p> 这是段落 2�</p> <p> 这是段落 3�</p> </body> </html>
� CSS 中,我们还可以根据元素的属性及属性值来选择元素,此时用到的选择器称为属性选择器。属性选择器的使用主要� 2 种形式,
语法:
属性选择� 1 属性选择� 2...{ 属� 1: 属性� 1; 属� 2: 属性� 2; } 元素选择器属性选择� 1 属性选择� 2... { 属� 1: 属性� 1; 属� 2: 属性� 2; }
语法说明:属性选择器的写法� [ 属性表达式 ],其中属性表达式可以是一个属性名,也可以是“属性=属性值”等这样的表达式.
属性选择器的应用:
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title> 属性选择器的应用 </title <style> [title] {/* 选择具有 title 属性的元素 */ color: #F6F; } a[href][title]{/* 选择同时具有 href � title 属性的 a 元素 */ font-size: 36px; } img[alt] {/* 选择具有 alt 属性的 img 元素 */ border: 3px #f00 solid; } p[align="center"] {/* 选择 align 属性等� center � p 元素 */ color: red; font-weight: bolder; } </style> </head> <body> <h2> 应用属性选择器样式:</h2> <h3 title="Helloworld">Helloworld</h3> <a title=" 首页 "href="#"> 返首� </a><br/><br/> <img src="miaov.jpg" alt="logo" /> <p align="center"> 段落一 </p> <hr /> <h2> 没有应用属性选择器样� <h3>Helloworld</h3> <a href="#"> 返首� </a><br/><br/> <img src="miaov.jpg"> <p align="right"> 段落� </p> </body> </html>
以上就是关于css复合选择器怎么用的介绍,希望对大家学习和理解css复合选择器有帮助,更多css内容大家可以关注其他文章�
免责声明:本站发布的内容(图片、视频和文字)以原创、转载和分享为主,文章观点不代表本网站立场,如果涉及侵权请联系站长邮箱:[email protected]进行举报,并提供相关证据,查实之后,将立刻删除涉嫌侵权内容�
猜你喜欢
在开发中,有些需要需要我们给图片加遮罩层,例如鼠标移至图片有遮罩层效果且有删除,添加,更改等操作,那么这一效果要如何实现呢?下面小编就给大家分享如何利用css给图片加遮罩层的代码�
这篇文章主要介绍了html-webpack-plugin使用,本文给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价�,需要的朋友可以参考下
本文主要介绍了纯html+css实现Element loading效果,文中通过示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一�
方法�1、用“padding:0;margin:0;”样式去除标题元素内外边距样式;2、用“font-weight:normal;”样式去除标题元素的加粗样式�3、用“font-size:16px;”样式设置标题字体大小为正常大小即可�
这篇文章主要介绍了CSS 实现侧滑显示留言面板的网页组件功�,本文通过实例代码给大家介绍的非常详细,具有一定的参考借鉴价值,需要的朋友可以参考下
推荐内容
联系我们
24小时售后 � 24小时售后TEL�0668-2555666 售前咨询TEL�400-678-4567 投诉建议TEL�0668-2555999 投诉建议邮箱:t[email protected] 信息安全TEL�0668-2555118 域名空间客服 � 公司总机�0668-2555555 公司传真�0668-2555000Copyright © QY Network Company Ltd. All Rights Reserved. 2003-2020 群英 版权所� 茂名市群英网络有限公�
增值电信经营许可证 : B1.B2-20140078