高级选择器

2023-10-16 20:53:57 浏览数 (2)

一、选择器的种类

序号

选择器种类

1

兄弟选择器

2

属性选择器

3

伪类选择器

4

伪元素选择器

二、兄弟选择器

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

兄弟选择器包含两种

相邻兄弟选择器

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

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

代码语言：javascript复制
li:hover li{
	background-color: blue;
}

举个例子：

代码语言：javascript复制
<!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{}

代码语言：javascript复制
li:hover~li{
	background-color: blue;
}

代码示例

代码语言：javascript复制
<!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属性的元素，例如

代码语言：javascript复制
<a href="#">我是超链接</a>
<a href="#">我也是超链接</a>
<a>我没有href属性</a>

css部分

代码语言：javascript复制
a[href]{
	color: green;
}

效果

如果选择多个属性，格式：E[属性1][属性2]

代码语言：javascript复制
<a href="#">我是超链接</a>
<a href="#">我也是超链接</a>
<a href="#" class="home">我也也是超链接</a>
<a>我没有href属性</a>

css样式

代码语言：javascript复制
a[href][class]{
	color: red;
}

效果

E[attribute = val]选择器

代码语言：javascript复制
<input type="text"><br>
<input type="button"><br>
<input type="email"><br>
<input type="checkbox"><br>

css

代码语言：javascript复制
input[type=text]{
	border: 1px solid red;
}

效果

E[attribute ~= val]选择器：选择属性attribute的值是用空格分隔的多个单词，其中一个单词的值等于val的E元素

html代码

代码语言：javascript复制
<p class="normal info">normal info</p>
<p class="normal">normal info</p>
<p class="info">normal info</p>

css

代码语言：javascript复制
p[class ~= info]{
	font-size: 24px;
}

效果

第一个和第三个元素的class属性中都包含info单词，所以css样式生效了

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

html代码

代码语言：javascript复制
<h1 lang="en">Hello!</h1>
<p lang="en-us">Greeting!</p>
<h2 lang="fr">Bonjour!</h2>
<div lang="cy-en">Jrooana!</div>

css

代码语言：javascript复制
*[lang |= en]{
	color: green;
}

效果

总结：发现只有en开头的会生效，在后面的不生效，比如cy-en就没有生效

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

html代码

代码语言：javascript复制
<div class="mainnav">
	<a href="#">首页</a>
</div>
<div class="pagenav">
	<a href="#">介绍</a>
</div>
<div class="list">
	<a href="#">列表</a>
</div>

css

代码语言：javascript复制
div[class *= nav] a{
	text-decoration: none;
	color: gray;
}

效果

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

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

html代码

代码语言：javascript复制
<a href="https://www.baidu.com">百度</a>
<a href="https://cn.bing.com">必应</a>
<a href="https://www.iconfont.cn">iconfont</a>

css

代码语言：javascript复制
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代码

代码语言：javascript复制
<a href="http://download.doc">doc文件</a>
<a href="http://download.xls">xls文件</a>
<a href="http://download.ppt">ppt文件</a>

css

代码语言：javascript复制
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代码

代码语言：javascript复制
<!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代码

代码语言：javascript复制
<!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代码

代码语言：javascript复制
<!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代码

代码语言：javascript复制
<!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代码

代码语言：javascript复制
<!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>

效果

::placeholder

html代码

代码语言：javascript复制
<input placeholder="用户名" />

css

代码语言：javascript复制
input::placeholder{
	color: #f00;
}

效果

html href width 语法 字符串

0 人点赞