CSS的高级选择器

最新推荐文章于 2024-03-06 17:08:15 发布

JJ_Smilewang

最新推荐文章于 2024-03-06 17:08:15 发布

阅读量2.6k

点赞数 4

分类专栏： html5和CSS3基础文章标签： html5 css3

本文链接：https://blog.csdn.net/JJ_Smilewang/article/details/123709433

版权

html5和CSS3基础专栏收录该内容

16 篇文章 2 订阅

订阅专栏

1.什么是高级选择器

在 CSS 中，可以根据选择器的类型，把选择器分为基础选择器和高级选择器（又称为复合选择器），高级选择器是建立在基础选择器之上，对基本选择器进行组合形成的。

①高级选择器可以更准确、更高效的选择目标元素（标签）

②高级选择器是由两个或多个基础选择器，通过不同的方式组合而成的

③常用的高级选择器包括：层次选择器、属性选择器、伪类选择器等等，本文主要介绍层次选择器和属性选择器。

2.层次选择器

层次选择器里包含：后代选择器、子选择器、相邻兄弟选择器、通用兄弟选择器和并集选择器。

2.1后代选择器

当标签发生嵌套时，内层标签就成为外层标签的后代。

所谓后代选择器，通俗的讲就是选择父元素里面包含的子元素，其写法就是把外层标签写在前面，内层标签写在后面，中间用空格分隔。

2.1.1 语法

元素1  元素2 { 样式声明 }

比如：

ul li { color="red"; }     /* 表示“选择 ul 里面所有的 li标签 将其字体变成红色” */

2.1.2 注意事项

①元素1 和元素2 中间用空格隔开
②元素1 是父级，元素2 是子级，最终选择的是元素2
③元素2 可以是儿子，也可以是孙子等，只要是元素1 的后代即可
④元素1 和元素2 可以是任意基础选择器，也就是说可以是标签选择器，也可以是类选择器、id选择器。

2.2 子选择器

子选择器只能选择作为某元素的最近一级子元素。通俗的讲就是把亲儿子元素选择出来，其他的孙子辈不要。

2.2.1 语法

 元素1 > 元素2 { 样式声明 }

比如：

div > p { color:"red"; }    /* 选择 div 里面所有最近一级 p 标签元素，将其字体颜色显示红色 */

2.2.2 注意事项

①元素1 和元素2 中间用大于号隔开
②元素1 是父级，元素2 是子级，最终选择的是元素2
③元素2 必须是亲儿子，其孙子、重孙之类都不归他管. 你也可以叫他亲儿子选择器

2.3 相邻兄弟选择器

所谓相邻兄弟选择器，就是把当前元素的下一个元素找出来。

2.3.1 语法：

元素1 + 元素2 { 样式声明 } 

例如 

.active + li { background: red; }  /* 表示类为active的元素的相邻下一个li元素，将其背景色变红 */

2.3.2 注意事项

①元素1 和元素2 中间用 + 隔开
②元素1 是和元素2 是相邻的兄弟关系，最终选择的是元素2
③元素2 必须是相邻的下一个兄弟，其上或者不相邻兄弟都不归他管.

2.4 通用兄弟选择器

所谓通用兄弟选择器，就是把当前元素的后面所有兄弟元素都找出来。

2.4.1 语法

元素1 ~ 元素2 { 样式声明 } 

例如：

.active~li { background-color: pink; }  /* 表示选择出类为active元素后面所有兄弟li，将其背景色变粉红 */

2.4.2 注意事项

①元素1 和元素2 中间用 ~ 隔开
②元素1 是和元素2 是相邻的兄弟关系，最终选择的是元素1后面所有兄弟元素2
③只会对元素1下面的兄弟元素2（所谓兄弟就是处于并列状态，之间不存在包含关系）进行添加样式。

例如，以下代码只能将“我是飞行员的3，4，5”选择出来，并不能选择出“我不是飞行员”，原因就是因为这个li不是.active的兄弟。

<style>
    .active~li {
         background-color: pink;
        }
</style>
<body>
    <ul>
        <li>我是飞行员1</li>
        <li class="active">我是飞行员2</li>
        <li>我是飞行员3</li>
        <li>我是飞行员4</li>
        <li>我是飞行员5</li>
        <div>
            <ul>
                <li>我不是飞行员</li>
            </ul>
    </ul>
</body>

2.5 并集选择器

所谓并集选择器就是可以选择多组标签, 同时为他们定义相同的样式。通常用于集体声明.

2.5.1 语法

元素1,元素2 { 样式声明 } 

例如：

div,p { color:green; }  /* 表示把div和p标签都找出来，字体显示绿色 */

2.5.2 注意事项

①元素1 和元素2 中间用逗号隔开 ，逗号可以理解为和的意思 ；
②任何形式的选择器都可以作为并集选择器的一部分；
③并集选择器通常用于集体声明。

3.属性选择器

属性选择器可以根据元素特定属性的来选择元素。这样就可以不用借助于类或者id选择器。

[ ]表示属性的意思里面写具体属性的名称比如[li].

3.1 E[attr]属性选择器

E[attr]属性选择器，选择匹配具有属性attr的E元素。

元素[属性] { 样式声明 }

例如：
 
li[id] { background-color: red; }   /* 表示把具有id属性的li找出来，添加对应样式 */

3.2 E[attr=val]属性选择器

E[attr=val]属性选择器，选择匹配具有属性attr，且值为val的E元素，属性和属性值必须是完全匹配。

元素[属性=值] { 样式声明 }

例如：
 
li[class=two] { background-color: red; }   /* 表示把具有class属性,且属性值为two的li找出来，添

加对应样式 */

3.3 E[attr*=val]属性选择器

E[attr*=val]属性选择器选择匹配具有属性attr，且该属性值里面只要包含有val的E元素，表示一种模糊匹配。

元素[属性*=值] { 样式声明 }

例如：
 
p[class*=b] { background-color: red; }   /* 表示把具有class属性,且只要属性值中含有字符b的所有p

元素都找出来，添加对应样式 */

3.4 E[attr^=val]属性选择器

E[attr^=val]属性选择器选择匹配具有属性attr，且属性值为以val开头的E元素。

元素[属性^=值] { 样式声明 }

例如：
 
a[href^=http] { background-color: red; }   /* 表示把具有href属性,且属性值以http开头的所有a

元素都找出来，添加对应样式 */

3.5 E[attr$=val]属性选择器

E[attr$=val]属性选择器选择匹配具有属性attr，且属性值以val结尾的E元素。

元素[属性$=值] { 样式声明 }

例如：
 
a[href$=cn] { background-color: red; }   /* 表示把具有href属性,且属性值以cn结尾的所有a

元素都找出来，添加对应样式 */

3.6 注意事项

在使用属性选择器时，如果遇到匹配的字符中有特殊符号时，比如下面例子里的：或//，这时必须给属性值加上引号才可，平时添加与否都可以。

 a[href^="http://"]  { background-color: red; }

总之，CSS这些高级选择器，可以方便我们更加便捷，更加自由的选择目标元素。

但是这些选择器比较相似，很容易混淆，因此需要在理解的基础上加强记忆，然后在平时练习时不要单一选择一种选择器，可以多尝试使用下各种选择器，从而达到灵活使用。

JJ_Smilewang

关注

4
点赞
踩
13

收藏

觉得还不错? 一键收藏
2
评论
CSS的高级选择器

1.什么是高级选择器在 CSS 中，可以根据选择器的类型，把选择器分为基础选择器和高级选择器（又称为复合选择器），高级选择器是建立在基础选择器之上，对基本选择器进行组合形成的。①高级选择器可以更准确、更高效的选择目标元素（标签）②高级选择器是由两个或多个基础选择器，通过不同的方式组合而成的③常用的高级选择器包括：层次选择器、属性选择器、伪类选择器等等，本文主要介绍层次选择器和属性选择器。2.层次选择器层次选择器里包含：后代选择器、子选择器、相邻兄弟选择器、通用兄弟选择器和并集选择..
复制链接

扫一扫