css3学习笔记1

jackyrong

浏览: 7949209 次
性别:
来自: 广州

最近访客更多访客>>

尘与飞

深情痞子

Crow00

zihai367

博主相关

博客

微博

相册

留言

关于我

文章分类

社区版块

存档分类

博客分类：

ajax/web相关

css3学习笔记1

一   <style type="text/css">
[id=section1]{
    background-color: yellow;
}
</style>
</head>
<div id="section1" class="divYellow">示例文本1</div>

二   <style type="text/css">
[id*=section1]{
    background-color: yellow;
}
</style>
   所有包含section1开头的

   [id^=section]{
    background-color: yellow;
}
</style>
   所有section开头的

   [id$=\-1]{
    background-color: yellow;
}     $表示所有-1结尾的

三   伪元素选择器
   <style type="text/css">
p:first-line{color:#0000FF}
</style>
   <p>段落中的第一行。<br>段落中的第二行</p>

     选择第1行

   before选择器
      <title>before伪元素选择器使用示例</title>
<style type="text/css">
li:before{content: ●}
</style>
</head>
<body>
<ul>
<li>列表项目1</li>
    after选择器
       <style type="text/css">
li:after{
    content: "(仅用于测试，请勿用于商业用途。)";
    font-size:12px;
    color:red;
}
</style>
</head>
<body>
<h1>电影清单</h1>
<ul>
<li><a href="movie1.mp4">狄仁杰之通天帝国</a></li>


四 root选择器
   <style type="text/css">
:root{
    background-color: yellow;
}
让html中整个 html页面变黄色
五 not选择器
    <style type="text/css">
body *:not(h1){
    background-color: yellow;
}
</style>
</head>
<body>
<h1>选择器概述</h1>
   可以让除了h1外的其他元素颜色为黄色

六 empty选择器
    当指定元素空白时候使用
      <style type="text/css">
:empty{
    background-color: yellow;
}
</style>

七 target选择器
   当使用target进行跳转，点了链接，跳转到target元素时使用
     <style type="text/css">
:target{
    background-color: yellow;
}
</style>
   <a href="#text1">示例文字1</a> |
   <div id="text1">
<h2>示例文字1</h2>
<p>...此处略去</p>
</div>

八 first-child和last-child
   <style type="text/css">
li:first-child{
    background-color: yellow;
}
li:last-child{
    background-color: skyblue;
}
</style>
</head>
<body>
<h2>列表A</h2>
<ul>
<li>列表项目1</li>
<li>列表项目2</li>
<li>列表项目3</li>
<li>列表项目4</li>
<li>列表项目5</li>
如果是多个列表，则同时适用

九 nth-child(n)对指定的第几个元素使用样式 nth-last-child(n)，对指定的倒数第多少个元素使用样式
    <style type="text/css">
li:nth-child(2){
    background-color: yellow;
}
li:nth-last-child(2){
    background-color: skyblue;
}
</style>
</head>
<body>
<h2>列表A</h2>
<ul>
<li>列表项目1</li>
<li>列表项目2</li>
<li>列表项目3</li>
<li>列表项目4</li>
<li>列表项目5</li>
</ul>

十 nth-child(odd),nth-child(even)对所有奇数个和偶数个元素使用样式
   <style type="text/css">
li:nth-child(odd){
    background-color: yellow;
}
li:nth-child(even){
    background-color: skyblue;
}
</style>
</head>
<body>
<h2>列表A</h2>
<ul>
<li>列表项目1</li>
<li>列表项目2</li>
<li>列表项目3</li>
<li>列表项目4</li>
<li>列表项目5</li>
</ul>

十一 nth-type选择器
    比如：
      <h2>文章标题A</h2>
<p>文章正文。</p>
<h2>文章标题B</h2>
<p>文章正文。</p>
<h2>文章标题C</h2>
<p>文章正文。</p>
<h2>文章标题D</h2>
<p>文章正文。</p>
   如果要奇数篇文章的标题显示一个颜色，偶数篇文章标题为1个颜色，则不行，因为是不同类型的<p>,<h2>
   所以必须要用nth-type选择器
      <style type="text/css">
h2:nth-of-type(odd){
    background-color: yellow;
}
h2:nth-of-type(even){
    background-color: skyblue;
}


十二循环使用样式
    比如可以使用4n+1这样的循环方式，每4组一个颜色
<style type="text/css">
li:nth-child(4n+1) {
background-color: yellow;
}
li:nth-child(4n+2) {
    background-color: limegreen;
}
li:nth-child(4n+3) {
    background-color: red;
}
li:nth-child(4n+4) {
    background-color: white;
}
</style>
十三 only-child选择器

可以只对样式中只有1个孩子的使用样式
    <style type="text/css">
li:only-child{
    background-color: yellow;
}
</style>
</head>
<body>
<h2>ul列表A</h2>
<ul>
<li>列表项目A01</li>
</ul>
<h2>ul列表B</h2>
<ul>
<li>列表项目B01</li>
<li>列表项目B02</li>
<li>列表项目B03</li>

分享到：

css3学习笔记2 | (收藏）MySQL优化器：index merge介绍

2015-05-30 09:22
浏览 790
评论(0)
分类:Web前端
查看更多

发表评论

您还没有登录,请您登录后再发表评论

最近访客更多访客>>

博主相关

文章分类

社区版块

存档分类

最新评论