Collection
Collection
手抄: CSS中常用的三种单位案例
编程: CSS中常用的选择器
![[Web front-end] Node.js quick start](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>常用选择器</title>
<style type="text/css">
/*标签选择器 根据标签选择*/
ul {
padding: 0;
margin: 0;
width: 500px;
border: 1px 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%;
box-shadow: 2px 2px 2px #800;
background-color: skyblue;
margin: 5px;
}
/*id选择器*/
#item1 {
background-color: coral;
}
/*类选择器*/
.item2
{
background-color: gold;
}
/*属性选择器 ： 属性名*/
ul li [class]
{
background-color: blueviolet;
}
/*属性选择器 ： 属性值*/
ul li[class="item2"]
{
background-color: grey;
}
/*属性选择器 ： 属性值*/
ul li[class="item2"]
{
background-color: grey;
}
/*属性选择器 ：一指定值开头的 属性值*/
ul li[class^="cat"]
{
background-color: yellow;
}
/*属性选择器 ：一指定值结尾的 属性值*/
ul li[class$="pig"]
{
background-color: yellow;
}
/*属性选择器 ：包含 属性值*/
ul li[class*="te"]
{
background-color: green;
}
/*后代选择器、层级选择器*/
body ul li {
border: 1px solid black;
}
/*子选择器*/
ul > li[class$="pig"]
{
background-color: greenyellow;
}
/*相邻选择器,当前选择器不在内*/
ul li[class$="pig"] ~ * {
background-color: black;
color: white;
}
/*相邻兄弟选择器，只选择了第四个小球*/
ul li[class$="pig"] + li {
background-color: pink;
color: black;
}
/*群组选择器*/
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
}
/*伪类选择器：根据位置,first last */
ul li:first-child {
background-color: #efefef!important;
}
ul li:last-child {
background-color: #red;
}
/*伪类选择器：根据位置,随机数 */
ul li:nth-child(5) {
background-color: #red;
}
/*伪类选择器：根据位置,偶数2n even,奇数 odd 2n+1 */
ul li:nth-child(2n) {
background-color: #red;
}
/*w伪类选择器根据子元素数量,这里一个*/
ol :only-child {
background:-color :lawngreen;
}
ol li:only-child {
background:-color :lawngreen;
}
/*倒数第三个*/
ol li:nth-last-child(3) {
background-color: wheat;
}
选择有第二个列表的
ol li:nth-of-type(2) {
background-color: wheat;
}
/*找到为空的元素 hiv*/
:empty {
width: 220px;
height: 270px;
background: coral;
}
/*填写为空内容*/
:empty:after {
content: '看到我了吗';
}
:empty:before {
/*通过伪类添加元素都是行内元素，不支持宽高设置，可以通过设置背景*/
content: url(../xxx.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>css选择器非常重要，特别是学习JS 以及iqita前段</p>
<a href="http://www.php.cn">php中文网</a>
<ol>
<li>列表1</li>
</ol>
<ol>
<li>列表1</li>
<li>列表2</li>
</ol>
<ol>
<li>列表1</li>
<li>列表3</li>
<li>列表4</li>
</ol>
<div></div>
</body>
</html>点击 "运行实例" 按钮查看在线实例