实例
实例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>CSS中常用的选择器</title>
<style>{
/*padding: 0;*/
margin: 0;
width: 550px;
border: 1xp dashed #666; /*边框虚线*/
padding: 10px 5px;
}
/*子块撑开父级级区块*/
ul:after{
content:"";
display: block;
clear: both;
}
ul li{
list-style: none; /*关闭默认值样式*/
float: left; /*全部浮动*/
width: 40px; /*宽*/
height: 40px; /*高*/
line-height: 40px; /*行高垂直居中*/
text-align: center; /*文字居中*/
border-radius: 50%; /*变成圆形，50%正圆*/
box-shadow: 2px 2px 2px #888; /*圆形背景以及颜色*/
background-color: skyblue; /*背景颜色*/
margin: 5px; /**/
}
/*id选择器/#id选择器*/
#item1{
background-color: coral;
}
/*类选择器/class选择器*/
.item2{
background-color: gold;
}
/*属性选择器：属性名*/
ul li[class1]{
background-color: blueviolet;
}
/*属性选择器：属性值*/
ul li[class="ta"]{
background-color: grey;
}
/*属性选择器：以指定的属性值开头的元素*/
ul li[class^="cat"]{
background-color: brown;
}
/*!*属性选择器：以指定的属性值结尾的元素*!*/
/*ul li[class$="pig"]{*/
/*background-color: red;*/
/*}*/
/*!*属性选择器：以指定中包含指定的子串*!*/
/*ul li[class*="te"]{*/
/*background-color: green;*/
/*} */
/*后代选择器/层级选择器给所有body下面li加一个外边框颜色*/
body li{
border: 1px solid #010006;
}
/*子选择器*/
ul>li[class$="pig"]{
background-color: greenyellow;
}
/*相邻选择器*/
ul li[class$="pig"] ~ * {
background-color: black;
color: white;
}
/*相邻兄弟选择器*/
ul li[class$="ping"] + li {
background-color: pink;
color: black;
}
/*---分隔符双色球-----*/
/*群组选择器*/
h1,p{
font-size: 2rem;
font-weight: lighter;
margin: 0;
text-align: center;/* 文本居中*/
}
a{
font-size: 2rem;
}
/*访问前*/
a;link{
color: rem;
}
/*访问后*/
a:visited{
color: #ff7e74;
}
/*获取焦点的时候*/
a:focus{
color: purple;
}
/*鼠标悬停的时候*/
a:hover{
color: #19fcff;
}
/*鼠标点击激活的时候*/
a:active{
color: blue;
}
/*-------分隔符文本区域选择器---------------*/
/*伪类选择器：根据子元素的数量*/
ol:only-child{
background-color: lawngreen;
}
ol li:only-child{
background-color: lawngreen;
}
ul li:nth-last-child(3){
background-color: wheat;
}
ol li:nth-of-type(2){
background-color: wheat;
}
/*-------分隔符文本区域选择器---------------*/
li{
font-size: 1.5rem;
}
/*鼠标悬停的时候*/
li:hover{
color: #00edff;
}
/*鼠标点击激活的时候*/
li:active{
color: blue;
}
</style>
</head>
<body>
<ul>
<li id="item1">1</li> <!--/*id选择器/#id选择器*/-->
<li class="item2">2</li><!--/*类选择器/class选择器*/-->
<li class1="">3</li><!--属性选择器：属性名 -->
<li class="ta">4</li><!--属性选择器：属性值 -->
<li class="cat">5</li><!--属性选择器：以指定的属性值开头的元素 -->
<li class="pig">6</li><!-- /*子选择器*/-->
<li class="ping">7</li><!--/*相邻选择器*/ -->
<li>8</li><!--相邻兄弟选择器 -->
<li style="background-color: #ef3d53">9</li><!--直接给颜色 -->
<li id="item6">10</li><!-- -->
</ul>
<h1>css选择器大发</h1>
<p>css选择器非常重要，特殊是对于学习js，jquery以及其它前端框</p>
<a href="http://baidu.com">PHP中文网</a>
<ol>
<li>列表项1</li> <!--/*伪类选择器：位置*/-->
</ol>
<ol>
<li>列表项1</li>
<li>列表项2</li>
<li>列表项3</liclass>
</ol>
<ol>
<li>列表项1</li>
<li>列表项2</li>
<li>列表项3</li>
<li>列表项4</li>
</ol>
</body>
</html>
运行实例 »
点击 "运行实例" 按钮查看在线实例运行实例 »
点击 "运行实例" 按钮查看在线实例
使用各种选择器进行双色器单独添加颜色
给所有li添加鼠标经过点，击效果。