码迷,mamicode.com
首页 > Web开发 > 详细

css选择器

时间:2017-07-24 01:33:54      阅读:331      评论:0      收藏:0      [点我收藏+]

标签:pad   烟台   同名   页面   change   font   har   head   lis   

选择器

1.标签选择器

<head>
<meta charset="UTF-8">
<style>
/*<!--选择器:你要操作的页面元素
标签选择器:作用于当前页面的所有li标签-->*/
li{
color: red;
}
</style>
<title>标签选择器</title>
</head>
<body>

<ul>
<li>理学院</li>
<li>计算机学院</li>
<li>外国语学院</li>
<li>汽车学院</li>
<li>机械学院</li>
<li>管理学院</li>
<li>通信学院</li>
</ul>

</body>

 

2.ID选择器

<head>
<meta charset="UTF-8">
<style>
/*ID选择器:给当前页面指定的id元素添加样式*/
#change{
color: red;
}
</style>
<title>ID选择器</title>
</head>
<body>

<ul>
<li id="change">理学院</li>
<li>计算机学院</li>
<li>外国语学院</li>
<li>汽车学院</li>
<li>机械学院</li>
<li>管理学院</li>
<li>通信学院</li>
</ul>

</body>

 

3.类选择器

 

<head>
<meta charset="UTF-8">
<style>
/*类选择器:给当前页面某一类标签添加样式
同一个页面,可以存在多个同名的类*/
.change{
color: red;
}
</style>
<title>类选择器</title>
</head>
<body>

<ul>
<li class="change">理学院</li>
<li>计算机学院</li>
<li class="change">外国语学院</li>
<li>汽车学院</li>
<li class="change">机械学院</li>
<li>管理学院</li>
<li class="change">通信学院</li>
</ul>

</body>

 

4.后代选择器

 

<head>
<meta charset="UTF-8">
<style>
/*标签选择器 1*/
li{
color: yellow;
}
/*后代选择器*/
#second li{
color: red;
}
</style>
<title>后代选择器</title>
</head>
<body>
<!--后代选择器-->
<ul>
<li>烟台大学</li>
<li>鲁东大学</li>
<li>上东工商学院</li>
</ul>
<ul id="second">
<li>青岛理工大学</li>
<li>上东科技大学</li>
<li>中国石油大学</li>
</ul>

</body>

 

5.子代选择器

 

<head>
<meta charset="UTF-8">
<style>
h1 > strong{
color: red;
}
</style>
<title>子代选择器</title>
</head>
<body>

<h1>
This is <strong>very</strong> <strong>very</strong> important. <br>
This is <em>really <strong>very</strong></em> important.
</h1>

</body>

 

6.相邻选择器

 

<head>
<meta charset="UTF-8">
<style>
h1 + p{
color: red;
}
</style>
<title>相邻选择器</title>
</head>
<body>

<h1>青岛各类高校</h1>
<p>青岛大学</p>
<p>青岛理工大学</p>
<p>中国石油大学</p>
<p>山东科技大学</p>
<p>中国海洋大学</p>

</body>

 

7.伪类选择器

 

<head>
<meta charset="UTF-8">
<style>
/*伪类选择器*/
/*li:nth-child(2n){
color: red;
}*/
/*li:first-child{
color: red;
}
li:last-child{
color: yellow;
}*/
/* li:hover {
color: red;
}*/
li:nth-child(2n):hover{
color: red;
}
li:nth-child(2n-1):hover{
color: yellow;
}
</style>
<title>伪类选择器</title>
</head>
<body>

<ul>
<li>烟台大学</li>
<li>鲁东大学</li>
<li>山东工商学院</li>
<li>青岛理工大学</li>
<li>山东科技大学</li>
</ul>

</body>

 

8.通配符选择器

 

<head>
<meta charset="UTF-8">
<style>
/*通配符选择器*/
*{
padding: 0px;
margin: 0px;
}
#div1{
height: 200px;
background-color: red;
margin-left: 20px;
}
li{
list-style: none;
}

</style>
<title>通配符选择器</title>
</head>
<body>

<div id="div1">
<ul>
<li>理学院</li>
<li>商学院</li>
<li>通信学院</li>
<li>机械学院</li>
<li>土木学院</li>
<li>外国语学院</li>
</ul>
</div>

</body>

 

css选择器

标签:pad   烟台   同名   页面   change   font   har   head   lis   

原文地址:http://www.cnblogs.com/zw0214/p/7226712.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!