您现在的位置是：网站首页> 编程资料编程资料

CSS复合选择器的具体使用方法CSS复合选择器使用介绍

2021-09-02 962人已围观

简介 这篇文章主要介绍了CSS复合选择器的具体使用方法，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧

 元素选择器 . 类选择器｜ #ID 选择器 { 属性 1: 属性值 1； 属性 2: 属性值 2； } 

 元素选择器效果 
 交集选择器效果 
 类选择器效果 

 选择器 1, 选择器 2, 选择器 3, { 属性 1: 属性值 1； 属性 2: 属性值 2； } 

 这是 DIV1
 这是 DIV2
 这是段落一 
 这是段落二 
 这是一个 SPAN

后代选择器

后代选择器又称包含选择器，用于选择指定元素的后代元素。使用后代选择器可以帮助我们更快更确切地找到目标元素。

语法：

 选择器 1 选择器 2 选择器 3 { 属性 1: 属性值 1； 　属性 2: 属性值 2； } 

例：

 段落一 
 段落二 
 段落三 
 段落四 
 段落五 
 段落六 

子元素选择器

后代选择器可以选择某个元素指定类型的所有后代元素，如果只想选择某个元素的所有子元素，则需要使用子元素选择器。

语法：

 选择器 1> 选择器 2 { 属性 1: 属性值 1; 属性 2: 属性值 2; } 

语法说明：“>”称为左结合符，在其左右两边可以出现空格，“选择器 1> 选择器 2”的含意为“选择作为选择器 1 指定元素的所有选择器 2 指定的子元素”.

例：

 这是非常非常  重要  且  关键  的一步。
 这是真的非常  重要  且  关键  的一步。

相邻兄弟选择器

如果需要选择紧接在某个元素后的元素，而且二者有相同的父元素，可以使用相邻兄弟选择器。

语法:

 选择器 1+ 选择器 2 { 属性 1: 属性值 1; 属性 2: 属性值 2; } 

例:

 这是一个一级标题 
 这是段落 1。
 这是段落 2。
 这是段落 3。

属性选择器

在 CSS 中，我们还可以根据元素的属性及属性值来选择元素，此时用到的选择器称为属性选择器。属性选择器的使用主要有 2 种形式，

语法:

 属性选择器 1 属性选择器 2...{ 属性 1: 属性值 1; 属性 2: 属性值 2; } 元素选择器属性选择器 1 属性选择器 2... { 属性 1: 属性值 1; 属性 2: 属性值 2; } 

语法说明：属性选择器的写法是 [ 属性表达式 ]，其中属性表达式可以是一个属性名，也可以是“属性＝属性值”等这样的表达式.

属性选择器的应用:

 [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; } 
 应用属性选择器样式：
Helloworld
 返首页 

 段落一 
 没有应用属性选择器样式 
Helloworld
 返首页 

 段落二 

到此这篇关于CSS复合选择器的具体使用方法的文章就介绍到这了,更多相关CSS复合选择器内容请搜索以前的文章或继续浏览下面的相关文章，希望大家以后多多支持！

提示： 本文由神整理自网络，如有侵权请联系本站删除！
本站声明：
1、本站所有资源均来源于互联网，不保证100%完整、不提供任何技术支持；
2、本站所发布的文章以及附件仅限用于学习和研究目的;不得将用于商业或者非法用途；否则由此产生的法律后果，本站概不负责！