Community Learn Tools Library Leisure
search
English
Home > List of blog posts > CSS基本选择器及属性选择器
Blogger Information
Blog 64
fans 2
comment 3
visits 75750
Special Recommendation
More>
Related recommendations
Popular Tutorials
More>
Related Tutorials
Popular Recommendations
Latest courses
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template
CSS基本选择器及属性选择器
清雨的博客
Original
796 people have browsed it

基本选择器：

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>基本选择器</title>
<style type="text/css">
ul {
padding: 0;
margin: 0;
width: 800px;
padding: 10px 5px;
}
li {
list-style: none;
float: left;
height: 40px;
line-height: 40px;
text-align: center;
padding:0 10px;
border: 1px solid blue;
}
#item1 {
/*background-color: red;*/
}
.nav {
/* background-size: 20px;
color: blue;*/
}
ul li {
/*background-color: yellow;*/
}
ul * {
/*background-size: 40px;
color: red;*/
}
ul > li {
/*background-color: blue;*/
}
#top + li {
/*background-color: black;*/
}
#top ~ li {
background-color: yellow;
}
</style>
</head>
<body>
<ul>
<li id="item1">首页</li>
<li>php</li>
<li>html</li>
<li>css</li>
<li id="top">javascript</li>
<li>mysql</li>
<li>个人中心</li>
<li>企业介绍</li>
<li>联系我们</li>

</ul>
</body>
</html>

效果图


1.png

111.png

ul li.png

2.png

3.png

4.png

5.png

2、属性选择器：

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>属性选择器</title>
<style type="text/css">
ul {
padding: 0;
margin: 0;
width: 800px;
padding: 10px 5px;
}
li {
list-style: none;
float: left;
height: 40px;
line-height: 40px;
text-align: center;
padding:0 10px;
border: 1px solid blue;
}
*[id] {
/*background-color: red;*/
}
li[class ~="nav"] {
/*background-color: #33DBF0;*/
}
li[class ^="na"] {
/*background-color: #1BC01B;*/
}
li[class $="er"] {
/*background-color: #E7E47F;*/
}
li[class *="v"] {
background-color: #A0CAFA;
}

</style>
</head>
<body>
<ul>
<li id="item1">首页</li>
<li>php</li>
<li>html</li>
<li>css</li>
<li id="top">javascript</li>
<li>mysql</li>
<li class="nav header">个人中心</li>
<li>企业介绍</li>
<li>联系我们</li>

</ul>
</body>
</html>

效果图：

6.png

7.png

8.png

9.png10.png111.png

手写代码


1.jpg

做了一下修改的代码

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>基本选择器</title>
<style type="text/css">
div {
margin: 0 auto;
margin-top: 100px;
width: 800px;
border:1px solid black;
background: url(image/1.jpg);
background-repeat:no-repeat; 
background-size:100%;
}
        ul {
         padding: 0;
         margin: 0 auto;
         padding: 10 5px;
        }
        li {
         list-style: none;
         text-align: center;
         padding-top: 8px;
        }
        #top {
         color: red;
        }
        .grenn {
         color: yellow;
        }
        ul li {
         font-size: 1.2em;
        }
        #footer + li {
         font-size: 0.5em;
         color: #F1AD25;
        }
        #row ~ li {
         font-size: 0.9em;
         color: #11EBC1;
        }

</style>
</head>
<body>
<div>
<ul>
<li id="top">望洞庭湖赠张丞相</li>
<li>唐代：孟浩然</li>
<li>八月湖水平，</li>
<li>涵虚混太清。</li>
<li>气蒸云梦泽，</li>
<li>波撼岳阳城。</li>
<li>欲济无舟楫，</li>
<li id="footer">端居耻圣明。</li>
<li>坐观垂钓者，</li>
<li>徒有羡鱼情。</li>
<li id="row">坐观垂钓者，</li>
<li>徒有羡鱼情。</li>
<li>坐观垂钓者，</li>
<li>徒有羡鱼情。</li>
</ul>
</div>
</body>
</html>

效果图

1.png

Correction status：Uncorrected

Teacher's comments：
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!
All comments Speak rationally on civilized internet, please comply with News Comment Service Agreement
0 comments
Author's latest blog post