<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>常用选择器</title>
</head>
<style>
/*标签选择器:根据标签名称来选择页面元素*/
ul {
padding: 0;
margin: 0;
width: 550px;
border: 1px dashed #666;
padding: 10px 5px;
overflow: hidden;
}
ul:after{
contain: '';
display: block;
clear: both;
}
ul li {
list-style: none;
float: left;
width: 40px;
height: 40px;
line-height: 40px;
text-align: center;
border-radius: 50%;
background:pink;
margin: 5px;
box-shadow: 2px 2px 2px #888;
}
/*
css基本语法:
样式规则:有选择器 + 样式声明组成: h2{color:red}
一个元素有哪些部分组成:
<标签 属性=值 属性=值 属性=值></标签>
<h2 id="id" type="" name="" title="" style="">
---------------------------------------------------------------
和元素特征相关:
标签选择器,id选择器,类选择器,属性选择器,最基本最简单的
和元素所在位置相关,上下文相关
*/
/*id选择器*/
#item1{background:coral}
/*class选择器*/
.item2{background: gold}
/*属相选择器:属性名*/
ul li[class]{background:blueviolet}
/*属相选择器:属性值*/
ul li[class='item2']{background:grey}
/*属相选择器:以指定属性值开头的元素*/
ul li[class^='cat']{background:brown}
/*属相选择器:以指定属性值结尾的元素*/
ul li[class$='pig']{background:red}
/*属相选择器:属性值中包含指定的子串*/
ul li[class*='te']{background:green}
/*后代选择器/层级选择器*/
body ul li{
border:1px solid
}
/*子选择器*/
ul>li[class$="pig"]{color:white}
/*相邻选择器*/
ul li[class$="pig"]~*{background:white;color: black;}
/*相邻兄弟选择器*/
ul li[class$="pig"]+li{background:black;color: white;}
/*群组选择器*/
h2,p{font-size: 2rem;font-weight: lighter;margin:0}
/*伪类选择器:链接*/
a{font-size: 2rem;}
/*访问前*/
a:link{color:red}
/**/
a:visited{color:orange}
/*获取焦点的时候*/
a:foucs{color:purple}
/*鼠标悬停的时候*/
a:hover{color:green}
/*鼠标点击激活的时候*/
a:active{color:blue}
/*为类选择器:位置*/
ul li:first-child{background:red!important;}
ul li:last-child{background:red;}
ul li:nth-of-type(5){background:red}
/*偶数:even*/
ul li:nth-of-type(even){background:purple!important;}
/*ul li:nth-of-type(2n){background:purple!important;}*/
/*奇数:odd*/
ul li:nth-of-type(odd){background:black!important;}
/*ul li:nth-of-type(2n-1){background:red!important;}*/
==-----------------------------------------==================
/*伪类选择器:根据子元素的数量*/
ol li:only-child{background-color:red!important;}
ul li:nth-last-child(3){background:wheat!important;}
ol li:nth-of-type(2){background:wheat}
:empty{width: 100px;height:100px;background:red}
:empty:after{content:'看到我了吗!';}
:empty:before{
/*通过伪类添加的元素,默认都是行内元素,不支持宽高设置,可以通过设置背景图片的方式来间接处理*/
content:url("images/apple.jpg");
}
</style>
<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>
<h2>css选择器大法</h2>
<p>css选择器是非常重要,特别是对于js的操作</p>
<a href="http://php.cn">php中文网</a>
<ol>
<li>列表项1</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>问题:ol里面的选择子元素只有一个的css不起效果,强制执行也不行
