Version: Next

选择器

选择页面上的某一个或者某一类元素

基本选择器

优先级：

info

id > 类 > 标签

标签选择器

<head>
<style>
div {
color:red
}
p {
color:green
}
</style>
</head>
<body>
<div>
学Java
</div>
<p>
认证听课
</p>
</body>

类选择器

<head>
<style>
.class1 {
color: blue;
}
</style>
</head>
<body>
<div class="class1"> div class1</div>
<p class="class1"> p class1 </p>
</body>

ID选择器

<head>
<style>
#div1 {
color: red;
}
</style>
</head>
<body>
<div id="div1"> id div1</div>
</body>

扩展选择器

层次选择器

  • 后代选择器 选择器1 选择器2——在选择器1后面的所有选择器2，不论隔了多少层都会被选中
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
body p {
color: red
}
</style>
</head>
<body>
<p>p1</p>
<p>p2</p>
<p>p3</p>
<ul>
<li>
<p>4</p>
</li>
<li>
<p>5</p>
</li>
<li>
<p>6</p>
</li>
</ul>
</body>
</html>
  • 子选择器选择器1>选择器2——只选择选择器1下一代的选择器2
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
body p {
color: red
}
body > p {
color: blue
}
</style>
</head>
<body>
<p>p1</p>
<p>p2</p>
<p>p3</p>
<ul>
<li>
<p>4</p>
</li>
<li>
<p>5</p>
</li>
<li>
<p>6</p>
</li>
</ul>
</body>
  • 相邻兄弟选择器选择器1+选择器2——选择器1相邻的下一个选择器2（不包含上一个）
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
body p {
color: red
}
body > p {
color: blue
}
.active + p{
background-color: #2aabd2;
}
</style>
</head>
<body>
<p>p0</p>
<p class="active">p1</p>
<p>p2</p>
<p>p3</p>
<ul>
<li>
<p>4</p>
</li>
<li>
<p>5</p>
</li>
<li>
<p>6</p>
</li>
</ul>
</body>
</html>
  • 通用选择器选择器1~选择器2——与选择器1同级的，后方的（不包括先前的）选择器2
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
body p {
color: red
}
body > p {
color: blue
}
.active ~ p{
background-color: #2aabd2;
}
</style>
</head>
<body>
<p>p0</p>
<p class="active">p1</p>
<p>p2</p>
<p>p3</p>
<ul>
<li>
<p>4</p>
</li>
<li>
<p>5</p>
</li>
<li>
<p>6</p>
</li>
</ul>
<p>p7</p>
<p>p8</p>
</body>

伪类选择器

  • 选择某标签的第一个子元素
<style>
ul li:first-child {
color:red
}
</style>
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
ul li:first-child {
color:red
}
</style>
</head>
<body>
<p>p1</p>
<p>p2</p>
<p>p3</p>
<ul>
<li>li1</li>
<li>li2</li>
<li>li3</li>
</ul>
</body>
  • 选择某标签的最后一个子元素
<style>
ul li:last-child {
color: green
}
</style>
  • 选择当前p元素的父标签的第1个p标签
<style>
p:nth-child(1) {
color: red;
}
</style>
  • 选择当前p元素父标签的第二个类型为p的元素
<style>
p:nth-of-type(2){
color: red;
}
</style>
  • 超链接初始化、鼠标悬浮、正在访问、点击过显示效果
a:link {
color: pink;
}
a:hover {
color: #0c5460;
}
a:active {}
a:visited {
color: red;
}

属性选择器*

标签[属性名=属性值]{}

属性值支持正则表达式

<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.demo a{
float: left; /*左浮动*/
display: block; /*块元素*/
height: 50px; /*高度*/
width: 50px; /*宽度*/
border-radius: 10px; /*圆角边框*/
background-color: #2aabd2;
text-align: center; /*居中*/
text-decoration: none; /*去下划线*/
color: gray;
margin-right: 5px; /*右外边距*/
line-height: 300%;
}
</style>
</head>
<body>
<p class="demo">
<a href="http://www.baidu.com" class="links item first" id="first">1</a>
<a href="css/123/html" class="links item active" target="_blank" title="test">2</a>
<a href="css/111.png" class="links item active">3</a>
<a href="css/123.jpg" class="links item">4</a>
<a href="abc" class="links item">5</a>
<a href="/a.pdf" class="links item">6</a>
<a href="/adb.pdf" class="links item">7</a>
<a href="abc.doc" class="links item">8</a>
<a href="abcd.doc" class="links item">9</a>
<a href="" class="links item last">10</a>
</p>
</body>

image-20200506172133251

  • 选中所有具有id属性的元素
a[id]{
background-color: pink;
}

image-20200506172408534

  • 选中id为first的a标签
a[id=first]{
background-color: pink;
}
  • 选中class属性中带有links的元素
    • *=通配符
a[class*="links"]{
background-color: pink;
}

image-20200506173915445

  • 选中herf属性以css开头的元素
    • ^=正则：以xxx开头
a[href^=css] {
background-color: pink;
}

image-20200506174121526

  • 选中herf属性以.pdf结尾的元素
    • $=以xxx结尾
a[href$=".pdf"] {
background-color: pink;
}

image-20200506174402258