高级选择器_e[attribute]选择器可以省略e吗-CSDN博客

本文链接：https://blog.csdn.net/zkq5168/article/details/132196888

本文详细介绍了HTML/CSS中的各种选择器，如兄弟选择器、属性选择器（包括精确匹配、模糊匹配）、伪类选择器（如:hover、:active等）和伪元素选择器（如::first-letter和::placeholder），并通过实际代码示例展示了它们的用法和效果。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

一、选择器的种类

序号	选择器种类
1	兄弟选择器
2	属性选择器
3	伪类选择器
4	伪元素选择器

二、兄弟选择器

具备相同父元素的平级元素称之为兄弟元素，兄弟选择器用于基于当前元素，选择相邻或附近的有兄弟关系的其他元素

兄弟选择器包含两种

相邻兄弟选择器

相邻兄弟选择器语法格式如下：

用于获取紧邻当前元素之后的一个兄弟元素，格式：选择器1+选择器2{}

li:hover+li{
	background-color: blue;
}

举个例子：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        ul{
            margin: 0;
            padding: 0;
            list-style: none;
        }

        ul li{
            width: 50px;
            height: 50px;
            text-align: center;
            float: left;
            margin-left: 5px;
            background-color: cornflowerblue;
            line-height: 50px;
        }

        li:hover+li{
            background-color: blue;
        }
    </style>
</head>
<body>
    <ul>
        <li>1</li>
        <li>2</li>
        <li>3</li>
        <li>4</li>
        <li>5</li>
        <li>6</li>
    </ul>
</body>
</html>

运行效果
在这里插入图片描述

鼠标当前经过的元素的后一个兄弟元素触发了css样式

通用兄弟选择器：专门用于获取某元素后所有满足条件的平级兄弟元素

语法格式：选择器1~选择器2{}

li:hover~li{
	background-color: blue;
}

代码示例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        ul{
            margin: 0;
            padding: 0;
            list-style: none;
        }

        ul li{
            width: 50px;
            height: 50px;
            text-align: center;
            float: left;
            margin-left: 5px;
            background-color: cornflowerblue;
            line-height: 50px;
        }

        li:hover~li{
            background-color: blue;
        }
    </style>
</head>
<body>
    <ul>
        <li>1</li>
        <li>2</li>
        <li>3</li>
        <li>4</li>
        <li>5</li>
        <li>6</li>
    </ul>
</body>
</html>

效果如下
在这里插入图片描述

鼠标经过的元素后的所有兄弟元素全部触发样式

三、属性选择器

属性选择器专门用于通过元素的属性及其值匹配页面中的元素，当类，id和元素选择器无法区分元素时，就可用属性选择器按属性的差异来区分元素，属性选择器可用任何属性作为条件，且支持模糊匹配，所以应用及其广泛，格式如下

选择器	功能描述
E[attribute]	选择拥有属性attribute的E元素，不考虑属性的值
E[attribute = val]	选择拥有属性attribute的值等于val的E元素
E[attribute ~= val]	选择属性attribute的值是用空格分隔的多个单词，其中一个单词的值等于val的E元素
E[attribute \|= val]	选择属性attribute的值是用连字符“-”分隔的单词，并以val开头的E元素，主要用于lang属性，比如”en”、“en-us”、“en-gb”等
E[attribute *= val]	选择属性attribute的值包含val子字符串的E元素
E[attribute ^= val]	选择属性attribute的值以val开头的E元素，val为完整的单位或单词的一部分
E[attribute $= val]	选择属性attribute的值以val结尾的E元素，val为完整的单位或单词的一部分

现在通过一些例子来加深一下印象

E[attribute]选择器：拥有attribute属性的E元素，不管属性值是什么，如果省略E，则表示选择任何包含attribute属性的元素，例如

<a href="#">我是超链接</a>
<a href="#">我也是超链接</a>
<a>我没有href属性</a>

css部分

a[href]{
	color: green;
}

效果
在这里插入图片描述
如果选择多个属性，格式：E[属性1][属性2]

<a href="#">我是超链接</a>
<a href="#">我也是超链接</a>
<a href="#" class="home">我也也是超链接</a>
<a>我没有href属性</a>

css样式

a[href][class]{
	color: red;
}

效果
在这里插入图片描述
E[attribute = val]选择器

<input type="text"><br>
<input type="button"><br>
<input type="email"><br>
<input type="checkbox"><br>

css

input[type=text]{
	border: 1px solid red;
}

效果
在这里插入图片描述
E[attribute ~= val]选择器：选择属性attribute的值是用空格分隔的多个单词，其中一个单词的值等于val的E元素

html代码

<p class="normal info">normal info</p>
<p class="normal">normal info</p>
<p class="info">normal info</p>

css

p[class ~= info]{
	font-size: 24px;
}

效果
在这里插入图片描述
第一个和第三个元素的class属性中都包含info单词，所以css样式生效了

E[attribute |= val]选择器：选择属性attribute的值是用连字符“-”分隔的单词，并以val开头的E元素，主要用于lang属性，比如”en”、“en-us”、“en-gb”等

html代码

<h1 lang="en">Hello!</h1>
<p lang="en-us">Greeting!</p>
<h2 lang="fr">Bonjour!</h2>
<div lang="cy-en">Jrooana!</div>

css

*[lang |= en]{
	color: green;
}

效果
在这里插入图片描述
总结：发现只有en开头的会生效，在后面的不生效，比如cy-en就没有生效

E[attribute *= val]选择器：选择属性attribute的值包含val子字符串的E元素

html代码

<div class="mainnav">
	<a href="#">首页</a>
</div>
<div class="pagenav">
	<a href="#">介绍</a>
</div>
<div class="list">
	<a href="#">列表</a>
</div>

css

div[class *= nav] a{
	text-decoration: none;
	color: gray;
}

效果
在这里插入图片描述
总结：*号选择器可以匹配任意位置的文字，上面得例子就是class属性包含nav的所有a元素生效

E[attribute ^= val]选择器：选择属性attribute的值以val开头的E元素，val为完整的单位或单词的一部分

html代码

<a href="https://www.baidu.com">百度</a>
<a href="https://cn.bing.com">必应</a>
<a href="https://www.iconfont.cn">iconfont</a>

css

a[href ^= "https://"]{
	padding-right: 20px;
	background: url(../images/link.png) no-repeat right top;
	background-size: 15px;
}

效果图
在这里插入图片描述
E[attribute $= val]选择器：选择属性attribute的值以val结尾的E元素，val为完整的单位或单词的一部分

html代码

<a href="http://download.doc">doc文件</a>
<a href="http://download.xls">xls文件</a>
<a href="http://download.ppt">ppt文件</a>

css

a{
	padding: 0 25px;
}
a[href$="doc"]{
	background: url(images/word.png) no-repeat left/20px;
}
a[href$="xls"]{
	background: url(images/excel.png) no-repeat left/20px;
}
a[href$="ppt"]{
	background: url(images/ppt.png) no-repeat left/20px;
}

效果
在这里插入图片描述
四、伪类选择器

伪类选择器就是基于元素当前所处的状态来选取元素

常见的包括如下

链接伪类：（:link、:visited）

动态伪类：（:hover、:active、:focus）

目标伪类：

结构伪类：（:first-child、:last-child、nth-child、:empty）

否定伪类：（:not(selector)），一般用来选择不满足某些条件的元素，比如给表单中所有输入框添加边框，但是搜索框不需要加边框，这种情况就可以使用否定伪类选择器

我们通过一个例子来加深一下理解，下面的例子演示的是当我们把鼠标点击文本输入框后，文本输入框的边框显示为红色

html代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        input{
            outline: none;
        }
        input:focus{
            border: 1px solid red;
        }
    </style>
</head>
<body>
    <input type="text">
</body>
</html>

效果
在这里插入图片描述
否定伪类选择器样例

html代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        input{
            border: none;
        }
        input:not([type=search]){
            border: 1px solid #000;
        }
    </style>
</head>
<body>
    <input type="text">
    <input type="button" value="按钮">
    <input type="search">
</body>
</html>

效果
在这里插入图片描述
五、伪元素选择器

伪元素选择器专门匹配元素中的内容，而不是匹配元素，常见的如下

:first-letter或::first-letter

匹配元素中的第一个字符

html代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        p::first-letter{
            font-size: 24px;
        }
    </style>
</head>
<body>
    <p>我是一个P段落</p>
</body>
</html>

效果
在这里插入图片描述
:first-line或::first-line

html代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        p::first-line{
            font-size: 24px;
        }
    </style>
</head>
<body>
    <p>我是一个P段落我是一个P段落我是一个P段落我是一个P段落我是一个P段落我是一个P段落我是一个P段落我是一个P段落我是一个P段落我是一个P段落我是一个P段落我是一个P段落我是一个P段落我是一个P段落我是一个P段落我是一个P段落我是一个P段落我是一个P段落</p>
</body>
</html>

效果
在这里插入图片描述
::selection - 这个选择器是处理鼠标选中元素中内容时触发

html代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        ::selection{
            color: green;
        }
    </style>
</head>
<body>
    <p>我是一个P段落我是一个P段落我是一个P段落我是一个P段落我是一个P段落我是一个P段落我是一个P段落我是一个P段落我是一个P段落我是一个P段落我是一个P段落我是一个P段落我是一个P段落我是一个P段落我是一个P段落我是一个P段落我是一个P段落我是一个P段落</p>
</body>
</html>