WEB_CSS高级选择器

最新推荐文章于 2022-05-07 19:32:21 发布

原创最新推荐文章于 2022-05-07 19:32:21 发布 · 246 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#层次选择器 #结构伪类选择器 #属性选择器

WEB 专栏收录该内容

7 篇文章

订阅专栏

本文主要介绍了CSS的三种选择器。层次选择器包括后代、子、相邻兄弟和通用兄弟选择器，通过示例展示其用法和效果；结构伪类选择器针对某类元素的特定元素设置样式；属性选择器则根据元素属性设置样式，还说明了不同属性匹配规则下的样式效果。

高级选择器

层次选择器

E:表示父类标签 F表示子类标签

选择器	类型	功能描述
E F	后代选择器	选择匹配的F元素，且匹配的F元素被包含在匹配的E元素内
E>F	子选择器	选择匹配的F元素，且匹配的F元素是匹配的E元素的子元素
E+F	相邻兄弟选择器	选择匹配的F元素，且匹配的F元素紧位于匹配的E元素后面
E~F	通用兄弟选择器	选择匹配的F元素，且位于匹配的E元素后的所有匹配的F元素

后代选择器

格式:

E F{
	控制语句;
}

示例:将body标签中的所有段落标签的背景颜色都设置为红色

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        body p{
            background: red;
        }
    </style>
</head>
<body>
<p>一</p>
<p>二</p>
<p>三</p>
<ul>
    <li>
        <p>四</p>
    </li>
    <li>
        <p>五</p>
    </li>
    <li>
        <p>六</p>
    </li>
</ul>
<p>七</p>
<p>八</p>
</body>
</html>

注意:后代选择器两个选择符之间必须要以空格隔开
所有p标签背景色为红色

子选择器

格式:

E>F{
	控制语句;
}

示例,将body下的段落子标签背景变为粉色

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        /*body p{
            background: red;
        }*/
        body>p{
            background: pink;
        }
    </style>
</head>
<body>
<p>一</p>
<p>二</p>
<p>三</p>
<ul>
    <li>
        <p>四</p>
    </li>
    <li>
        <p>五</p>
    </li>
    <li>
        <p>六</p>
    </li>
</ul>
<p>七</p>
<p>八</p>
</body>
</html>

在这里插入图片描述
结论: 这里可以看到body字标签下的p标签背景色都变为了粉色,而无需列表中的没有改变,原因是因为列表中的段落标签是列表的子标签,不是body的子标签…
可以再style标签中加上一句

li>p{
     background: yellow;
}

将列表中的标签背景色变为了黄色
在这里插入图片描述

相邻兄弟选择器

这个选择器可能会相对于前两个难理解,仔细来看:
格式:

E+F{
	控制语句
}

且匹配的F元素紧位于匹配的E元素后面

因为是相邻兄弟选择器,所以需要先确定是谁的兄弟,才能找到相邻…因此我们需要先确定一个对象
示例:需求:将第三行的背景颜色变为蓝色

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        /*body p{
            background: red;
        }
        body>p{
            background: pink;
        }
        li>p{
            background: yellow;
        }*/
        .two+P{
            background: blue;
        }
    </style>
</head>
<body>
<p>一</p>
<p class="two">二</p>
<p>三</p>
<ul>
    <li>
        <p>四</p>
    </li>
    <li>
        <p>五</p>
    </li>
    <li>
        <p>六</p>
    </li>
</ul>
<p>七</p>
<p>八</p>
</body>
</html>

在这里插入图片描述
上面的做法是先定位到第二行,这里使用了class属性,也可以使用id属性,看到上面的代码立马会想到,既然class属性可以再多个标签中设置,那我多写几个会是什么结果呢?
下面我们来看:
我们给二,三,七行都设置了class属性,并且在style标签中设置了class属性two的相邻兄弟段落标签背景色为蓝色

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        /*body p{
            background: red;
        }
        body>p{
            background: pink;
        }
        li>p{
            background: yellow;
        }*/
        .two+P{
            background: blue;
        }
    </style>
</head>
<body>
<p>一</p>
<p class="two">二</p>
<p class="two">三</p>
<ul>
    <li>
        <p>四</p>
    </li>
    <li>
        <p>五</p>
    </li>
    <li>
        <p>六</p>
    </li>
</ul>
<p class="two">七</p>
<p>八</p>
</body>
</html>

结果:
在这里插入图片描述
结果: 可以看到三和八行背景色发生了变化,能够理解,三行是因为三是二的相邻兄弟段落标签.八是因为八是七的相邻段落标签,那上面还有三的相邻兄弟标签呢,为什么没有显示呢?
这是因为虽说给三也设置了相应的设置,但是三的相邻兄弟标签是列表标签,并不是段落,因此设置就失效了,没有被执行…

通用兄弟选择器

格式:

E~F{
	控制语句
}

选择匹配的F元素，且位于匹配的E元素后的所有匹配的F元素
示例:需求:二的所有兄弟段落标签背景色都设置为紫色

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        /*body p{
            background: red;
        }
        body>p{
            background: pink;
        }
        li>p{
            background: yellow;
        }*/
        .two~P{
            background: purple;
        }
    </style>
</head>
<body>
<p>一</p>
<p class="two">二</p>
<p >三</p>
<ul>
    <li>
        <p>四</p>
    </li>
    <li>
        <p>五</p>
    </li>
    <li>
        <p>六</p>
    </li>
</ul>
<p >七</p>
<p>八</p>
</body>
</html>

结果:
在这里插入图片描述
结论:同样是需要先定位到二,这里用到了class属性,ID属性也是可以的,然后设置二的通用兄弟元素标签,四五六并不是二的兄弟标签,他们属于列表中的子标签,因此没有变化…

结构伪类选择器

针对于某一类元素的特定元素而设置

选择器	功能描述
E:first-child	作为父元素的第一个子元素的元素E
E:last-child	作为父元素的最后一个子元素的元素E
E F:nth-child(n)	选择父级元素E的第n个子元素F，（n可以是1、2、3），关键字为even、odd
E:first-of-type	选择父元素内具有指定类型的第一个E元素
E:last-of-type	选择父元素内具有指定类型的最后一个E元素
E F:nth-of-type(n)	选择父元素内具有指定类型的第n个F元素

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
		ul li:first-child{ background: red;}
        ul li:last-child{ background: green;}
        /*p:nth-child(1){ background: yellow;}
        p:nth-of-type(2){ background: blue;}*/
    </style>
</head>
<body>
<p>一</p>
<p class="two">二</p>
<p >三</p>
<ul>
    <li>
        <p>四</p>
        <p>四.1</p>
        <p>四.1</p>
    </li>
    <li>
        <p>五</p>
        <p>五.1</p>
        <p>五.2</p>
    </li>
    <li>
        <p>六</p>
    </li>
</ul>
<p >七</p>
<p>八</p>
</body>
</html>

结果:
在这里插入图片描述
结论:对于无序列表而言,第一个背景为红,最后一个为背景为绿色
将上面style标签中的代码替换为如下:

 <style>
		/*ul li:first-child{ background: red;}
        ul li:last-child{ background: green;}/*
        p:nth-child(1){ background: yellow;}
        p:nth-of-type(2){ background: blue;}
</style>

结果: 在这里插入图片描述
结论:对于所有的标签而言,第一个p标签背景色为黄色,第二个为蓝色,其他不变…

属性选择器

属性选择器	功能描述
E[attr]	选择匹配具有属性attr的E元素
E[attr=val]	选择匹配具有属性attr的E元素,并且属性值为val（其中val区分大小写）
E[attr^=val]	选择匹配元素E，且E元素定义了属性attr，其属性值是以val开头的任意字符串
E[attr$=val]	选择匹配元素E，且E元素定义了属性attr，其属性值是以val结尾的任意字符串
E[attr*=val]	选择匹配元素E，且E元素定义了属性attr，其属性值包含了“val”，换句话说，字符串val与属性值中的任意位置相匹配

示例:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
    	/*对于9个超链接做了修饰,为了方便之后的变化观察*/
        .demo a{
            float: left; /*浮动*/
            display: block;
            height: 50px;
            width: 50px;
            border-radius: 10px;/*半径,将方形的四个角添加了弧度*/
            background: blue;/*背景蓝色*/
            color: white;/*字体白色*/
            text-align: center;/*居中*/
            line-height: 50px;
            text-decoration: none;/*去掉超链接的下划线*/
            margin: 5px;/*间距*/
        }
        /*属性选择器*/
        /*对于所有class属性为links的a标签,背景设置为紫色*/
        a[class=links]{
            background: purple;
        }
    </style>
</head>
<body>
<p class="demo">
    <a href="" class="links" id="first">1</a>
    <a href=""  class="links">2</a>
    <a href="">3</a>
    <a href=""  class="links">4</a>
    <a href="" id="apple">5</a>
    <a href="http//www,baidu.com"  class="links">6</a>
    <a href="http//www.google.com">7</a>
    <a href="1.jpg"  class="links">8</a>
    <a href="2.jpg" id="">9</a>
</p>
</body>
</html>

结果: 在这里插入图片描述
可以看到,1,2,4,6,8背景都被设置为了紫色
style标签中继续添加代码:

a[id=first] { 
	background: red; 
}

结果: 在这里插入图片描述
结论:id为first的a标签背景变为了红色,因此可以发现,后运行的红色覆盖了之前的紫色
继续添加代码:

a[href^=http] { 
	background: black; 
}
a[href$=jpg] { 
	background:pink; 
}
a[href*=google] { 
	background: #ff4634; 
}

结果:
在这里插入图片描述
结论:以http为开头的a标签背景设置为了黑色,以jpg为结尾的a标签背景被设置为粉色,href中包含了google的a标签背景被设置为西柚红…