高级选择器
一、选择器的种类
序号 | 选择器种类 |
|---|---|
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>效果
::placeholder
html代码
<input placeholder="用户名" />css
input::placeholder{
color: #f00;
}效果
