常用选择器，上下文选择器，伪类选择器

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>常用选择器</title>
<style type="text/css">
/*标签选择器*/
ul{
padding:0;
margin:0;
width:600px;
border:1px dashed #666;
padding:10px 5px;
}

/* ul {
padding: 0;
margin: 0;
width: 500px;
border: 1px dashed #666;
padding: 10px 5px;
}*/

/*子块撑开父级区块*/
/* ul:after{
content:'';
display:block;
clear:both;
}*/

ul:after { /*子块撑开父块*/
content:''; /*在子元素尾部添加空内容元素*/
display: block; /*并设置为块级显示*/
clear:both; /*清除二边的浮动*/
}

ul li{
/*取消列表默认样式*/

/* list-style:none;
float:left;*/
list-style: none; /*去掉默认列表项样式*/
float: left; /*左浮动左浮动没效果是ul的width=50px,而不是500px;*/
/*display:inline-block;*/
width:40px;
height:40px;
line-height:40px;
text-align:center;
border-radius:50%; /*方块变成正圆*/
box-shadow:2px 2px 2px #888;
background: skyblue;
margin:5px;
}
/*ID选择器*/
#item1{
background-color: coral;
}
/*类选择器，CLASS选择器*/
.item2{
background-color: gold;
}

/*属性选择器*/
ul li[class] {
background-color: blueviolet;
}

/*属性选择器*/
ul li[class="item2"] {
background-color: grey;
}

ul li[class^="cat"] {
background-color: brown;
}

ul li[class$="pig"] {
background-color: red;
}

/*属性之中包含指定子串*/
ul li[class*="t"] {
background-color: green;
}

/*标签，ID，类，属性是最基本的选择器，跟元素的特征相关*/

/*跟元素的位置相关的选择器*/
/*后代选择器层级选择器，中间可以跨几个层级没问题*/
body ul li {
border:1px solid black;
}

/*子选择器 ,就是父子关系，选择ul中的第3个li*/
ul>li[class$="pig"]{
background-color:greenyellow;
}

/*相邻选择器*/
ul li[class$="pig"]~*{ /* 从pig属性开始后所有相邻元素选中*/
background-color:black;
color:white;
}

/*相邻兄弟选择器*/
ul li[class$="pig"]+li{ /* 从pig属性开始后所有相邻元素选中*/
background-color:pink;
color:white;
}

/*群组选择器,同时选择多个选择器*/
h1,p{
font-size:2rem;
font-weight:lighter;
margin:0;
}

/*伪类*/
a{
font-size:2rem;

}

a:link {
color:red;
}

a:visited {
color:orange;
}

a:focus {
color:purple;
}

a:hover {
color:green;

}
a:active {
color:blue;
}

/*伪类选择器：位置*/
/*第一个*/
ul li:first-child {
background-color: #efefef !important;
}
/*最后一个*/
ul li:last-child {
background-color: red ;
}

/*第五个*/
ul li:nth-child(5) {
background-color: red ;
}

/*指定第N个数*/
ul li:nth-child(2n) {
/*偶数：even*/
/*奇数：odd*/
background-color: purple !important;
}

/*伪类选择器根据子元素的数量来选择*/
ol :only-child{ /*ol后面要加空格只有一个子元素*/
background-color:#39FF1B;
}

ol li:only-child{ /*ol后面要加空格只有一个子元素*/
background-color:#666;
}

ul li:nth-last-child(3){ /*倒数第3个小球改变颜色*/
background-color:wheat!important;
}

ol li:nth-of-type(2){ /*选择无序列表中第二个元素*/
background-color: wheat;
}

:empty{
width:220px;
height:270px;
background-color: coral;
}

:empty:after{
content:'看到我了吗';
}

:empty:before{
/*通过伪类插入的元素都是行内元素，可以通过设置背景图片来处理*/
content:url("../images/dog.jpg");
}

</style>

</head>
<body>

<ul>
<li id="item1">1</li>
<li class="item2">2</li>
<li class="cat dog pig">3</li>
<li>4</li>
<li>5</li>
<li>6</li>
<li>7</li>
<li>8</li>
<li>9</li>
<li>10</li>
</ul>
<h1>css选择器大法</h1>
<p> 士大夫</p>
<a href="http://php.cn">PHP中文网</a>

<ol>
<li> 列表项</li>
</ol>
<ol>
<li>列表项1</li>
<li>列表项2</li>
<li>列表项3</li>
</ol>
<ol>
<li>列表项1</li>
<li>列表项2</li>
<li>列表项3</li>
<li>列表项4</li>
</ol>
<div></div>

</body>
</html>

相关文章