结构伪类选择器
伪类:相当于条件
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<!-- 不使用class,id选择器-->
<style>
/*ul的第一个子元素*/
ul li:first-child{
background-color: red;
}
/*ul的最后一个子元素*/
ul li:last-child{
background-color: blue;
}
/*选中p1:定位到父元素,选择当前的第一个元素
选择当前p元素的父级元素,选中父级元素的第一个,并且时当前元素才生效,按顺序选择
*/
p:nth-child(1){
background-color: green;
}
/*选中父元素,下面的p元素的第二个,按类型选择*/
P:nth-of-type(2){
background-color: yellow;
}
</style>
</head>
<body>
<p>p1</p>
<p>p2</p>
<p>p3</p>
<p>p4</p>
<ul>
<li>
p4
</li>
<li>
p5
</li>
<li>
p6
</li>
</ul>
</body>
</html>
属性选择器(常用)
id+class选择器给结合了,了解一些正则表达式的通配符会更加方便
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.demo a{
float: left;/*浮动*/
display: block;
height: 50px;
width: 50px;
border-radius:10px;
background-color: red;
text-align: center;
color: #2b2b10;
text-decoration: none;/*去掉下划线*/
margin-right: 5px;/*偏移*/
font: bold 20px/50px Arial;
}
/*【】里面可以是:属性名,属性名=属性值
= 是绝对等于
*= 是包含这个元素
^= 正则表达式,以什么开头的元素
$= 正则表达式,以什么结尾的元素
*/
/*存在id的属性的元素把它选中*/
/*属性选择器的格式 a[]{}*/
a[id]{
background: blue;
}
a[id="first"]{
background: blueviolet;
}
/*
class中有links的元素
*/
a[class*="links"]{
background: greenyellow;
}
/* 选中href中http开头的元素*/
a[href^=http]{
background: #2b2b10;
}
a[href$=pdf]{
background: aqua;
}
</style>
</head>
<body>
<p class="demo">
<a href="http://www.baidu.com" class="links item first" id="first">1</a>
<a href="" class="links item active" target="_blank" title="test">2</a>
<a href="images/12.html" class="links item">3</a>
<a href="images/12.png" class="links item">4</a>
<a href="a.pdf">5</a>
<a href="a.doc" class="links item last">6</a>
</p>
</body>
</html>