收藏
<!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>
Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号
