<!DOCTYPE html>
<html>
<head>
<title>css中常用的选择器</title>
<meta charset="utf-8">
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<style>
body{
font-size: 20px;
}
ul{
font-weight: :body;
}
</style>
<body>
<ul>
<li class="item1">item1</li>
<li class="item2">item2</li>
<li id="item3">item3</li>
<li class="item4">item4</li>
</ul>
<style>
h2{
color: blue!important;
color: cyan;
}
</style>
<h2 style="color: red">css选择器</h2>
<style>
/*标签选择器*/
ul{
margin: 0;
width: 100px;
border: 1px dashed #999999;
padding: 10px 5px;
}
ul li{
list-style: none;
float: left;
width: 40px;
height: 50px;
}
/*id选择器*/
#item3{
background-color: green;
}
/*类选择器*/
.item1{
background-color: red;
}
/*属性选择器*/
ul li[class="item6"]{
background-color: black;
}
/*属性选择器:属性值中以什么开头*/
ul li[class^="u"]{
background-color: gray;
}
/*属性选择器:属性值中以什么结尾*/
ul li[class$="7"]{
background-color: #999999;
}
/*属性选择器:属性值包含*/
ul li[class*="u"]{
background-color: gray;
}
body ul li{
border: 1px solid black;
}
/*子选择器*/
ul>li[class="7"]{
background-color: greenyellow;
}
/*相邻选择器*/
ul li[class$="2"]~ *{
color: white;
}
/*相邻兄弟选择器*/
ul li[class$="6"]+li{
color: red;
}
/*群组选择器*/
h1,h2,p{
font-size: 3rem;
}
/*伪类选择器：链接*/
/*访问前*/
a:link{
color: red;
}
/*访问后*/
a:visited{
color: yellow;
}
/*获取焦点的时候*/
a:focus{
color: purple;
}
/*鼠标悬停*/
a:hover{
color: blue;
}
/*鼠标点击激活*/
a:active{
color: blue;
}
/*伪类选择器：位置*/
ul li:first-child{
background-color: #e24233;
}
ul li:last-child{
background-color: #333333;
}
ul li:ntn-child(2){
background-color: red;
}
ul li:ntn-child(even){
/*偶数*/
background-color: purple;
}
ul li:ntn-child(odd){
/*奇数*/
background-color: purple;
}
/*伪类选择器：数量*/
ul li:only-chlid{
background-color: lawngreen;
}
:empty{
width: 200px;
height: 200px;
background-color: red;
};
:empty:after{
content: 'adddd';
};
:empty:before{
content: url();
};
</style>
<ul>
<li class="item1">item1</li>
<li class="item2">item2</li>
<li id="item3">item3</li>
<li class="item4">item4</li>
<li class="item5">item5</li>
<li id="item6">item6</li>
<li class="uitem7">item7</li>
</ul>
<h1>css1</h1>
<h2>css2</h2>
<p>css3</p>
<a href="www.baidu.com">baiduyixia</a>
<div></div>
</body>
</html>
Statement of this Website
The copyright of this blog article belongs to the blogger. Please specify the address when reprinting! If there is any infringement or violation of the law, please contact admin@php.cn Report processing!
Collection
![[Web front-end] Node.js quick start](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
