美文网首页
CSS3学习笔记（三）

CSS3学习笔记（三）

作者: dev_winner | 来源:发表于2019-08-25 23:45 被阅读0次

CSS3选择器

  • 属性选择器：通过id属性可将不同div元素进行区分。
  • 在CSS2中引入了一些属性选择器，而CSS3在CSS2的基础上对属性选择器进行了扩展，新增了3个属性选择器，使得属性选择器有了通配符的概念，这三个属性选择器与CSS2的属性选择器共同构成了CSS功能强大的属性选择器。如下表所示：
属性选择器 功能描述
E[att^="val"] 选择匹配元素E，且E元素定义了属性att，其属性值以val开头的任何字符串。
E[att$="val"] 选择匹配元素E，且E元素定义了属性att，其属性值以val结尾的任何字符串，刚好与E[att^="val"]相反。
E[att*="val"] 选择匹配元素E，且E元素定义了属性att，其属性值任意位置包含了"val"。换句话说，字符串与属性值中的任意位置相匹配。 
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>属性选择器</title>
    <style>
    /*通配符选择器*/
    a[class^="column"] {
        background: red;
    }
    a[href$="doc"] {
        background: green;
    }
    a[title*="box"] {
        background: yellow;
    }
    </style>
</head>
<body>
    <a href="##" class="columnNews">我的背景想变成红色</a>
    <a href="##" class="columnVideo">我的背景想变成红色</a>
    <a href="##" class="columnAboutUs">我的背景想变成红色</a><br />
    <a href="1.doc">我的背景想变成绿色</a>
    <a href="2.doc">我的背景想变成绿色</a><br />
    <a href="##" title="this is a box">我的背景想变成黄色</a>
    <a href="##" title="box1">我的背景想变成黄色</a>
    <a href="##" title="there is two boxs">我的背景想变成黄色</a>
</body>
</html>
通配符选择器自定义样式

结构性伪类选择器

  • :root选择器：根选择器，其含义为匹配元素E所在文档的根元素。在HTML文档中，根元素始终是<html>。
  • 通过:root选择器设置背景颜色：
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>结构性伪类选择器—root</title>
    <style type="text/css">
/*    :root {
        background-color: pink;
    }*/
    /*:root等同于html标签样式*/
    html {
        background: pink;
    }
    </style>
</head>
<body>
    <div>Root选择器修改HTML元素的背景颜色</div>
</body>
</html>
设置全局背景颜色
  • :not选择器：否定选择器，和jQuery中的:not选择器一模一样，可以选择除某个元素之外的所有元素。
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>结构性伪类选择器—not</title>
    <style type="text/css">
    div {
        padding: 10px 20px;
        /* min-height属性设置元素的最小高度，
        保证没有内容时能撑高对象盒子*/
        min-height: 40px;
    }
    /*自定义否定选择器样式*/
    .test div:not([id="footer"]) {
        background: orange;
    }
    form {
        width: 200px;
        margin: 20px auto;
    }
    form div {
        margin-bottom: 20px;
    }
    /*给表单中除submit按钮之外的input元素添加红色边框*/
    form input:not([type="submit"]) {
        border: 1px solid red;
    }
    </style>
</head>
<body>
    <form action="#">
        <div>
            <label for="name">Account Input:</label>
            <input type="text" name="name" id="name" placeholder="请输入用户名" />
        </div>
        <div>
            <label for="pwd">Password Input:</label>
            <input type="password" name="pwd" id="pwd" placeholder="请输入密码" />
        </div>
        <div>
            <input type="submit" value="Submit" />
        </div>
    </form> ​
    <div class="test">
        <div id="header">页头</div>
        <div id="page">页体</div>
        <div id="footer">页脚</div>
    </div>
</body>
</html>
设置否定选择器
  • :empty选择器：表示空，用来选择没有任何内容的元素，这里没有内容指的是一点内容都没有，哪怕是一个空格。
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>结构性伪类选择器—empty</title>
    <style type="text/css">
    div {
        min-height: 30px;
    }
    div:empty {
        border: 1px solid green;
    }
    p {
        background: orange;
        min-height: 30px;
    }
    p:empty {
        /*空标签不显示样式*/
        display: none;
    }
    </style>
</head>
<body>
    <div>我这里有内容</div>
    <div> </div><!-- 这里有一个空格 -->
    <div></div><!-- 这里任何内容都没有 -->
    <p>我是一个段落</p>
    <p> </p> <!-- 这里有一个空格 -->
    <p></p>​<!-- 这里任何内容都没有 -->
</body>
</html>
设置
  • :target选择器：目标选择器，用来匹配文档(页面)的url的某个标志符的目标元素。＃ 锚的名称是在一个文件中链接到某个元素的URL，元素被链接到目标元素。这个有点像markdown中[toc]生成目录后有链接到当前文章中某个小标题一样！
    1、具体来说，触发元素的URL中的标志符通常会包含一个#号，后面带有一个标志符名称，例如下面代码中是：#brand1等；
    2、:target就是用来匹配id为brand1的元素（id="brand`"的元素），即下面代码中的那个div元素！
    3、多个url（多个target）处理：只要#号后的名称与id=""中的名称对应即可实现目标跳转。
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>结构性伪类选择器—target</title>
    <style type="text/css">
    /*这里的:target就是指id="brand"的div对象，
    当有多个target时，随着鼠标的点击会自动跳转并显示对应的元素*/
    #brand:target p {
        background: orange;
        color: #fff;
    }
    #jake:target {
        background: blue;
        color: #fff;
    }
    #aron:target {
        background: red;
        color: #fff;
    }
    a {
        /*去掉链接下划线*/
        text-decoration: none;
    }
    </style>
</head>
<body>
    <div class="menuSection" id="brand">
        <h2><a href="#brand">Brand1</a></h2>
        <p>content for Brand</p>
    </div>
    <h2><a href="#jake">Brand2</a></h2>
    <div class="menuSection" id="jake">
        content for jake
    </div>
    <h2><a href="#aron">Brand3</a></h2>
    <div class="menuSection" id="aron">
        content for aron
    </div>
</body>
</html>
设置目标选择器
  • :first-child选择器：表示选择父元素的第一个子元素的元素E。注意：是子元素，而不是后代元素。
  • >：表示子代选择器。空格：表示后代选择器。
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>结构性伪类选择器—first-child</title>
    <style type="text/css">
    /*通过:first-child选择器定位列表中的第一个列表项，并将序列号颜色变为红色。*/
    .test1>li:first-child {
        color: red;
    }
    /*
    '>'：表示子代选择器
    将ul标签中所有li标签的项目号颜色改为黄色*/
    .test2>li {
        color: yellow;
    }
    </style>
</head>
<body>
    <!-- 无序列表 -->
    <ul class="test1">
        <li><a href="##">Link1</a></li>
        <li><a href="##">Link2</a></li>
        <li><a href="##">Link3</a></li>
        <li><a href="##">Link4</a></li>
        <li><a href="##">Link5</a></li>
    </ul >
        <ul class="test2">
        <li><a href="##">Linka</a></li>
        <li><a href="##">Linkb</a></li>
        <li><a href="##">Linkc</a></li>
        <li><a href="##">Linkd</a></li>
        <li><a href="##">Linke</a></li>
    </ul>
</body>
</html>
设置父元素ul的第一个子元素的元素样式
  • :last-child选择器：表示的是选择父元素的最后一个子元素的元素E。
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>结构伪类选择器——last-child</title>
    <style type="text/css">
    ul {
        border: 1px solid #ffc107;
        /*去除项目列表样式*/
        list-style: none outside none;
        width: 220px;
        margin: 20px auto;
        padding: 0;
    }
    ul>li {
        list-style: none outside none;
        margin: 0;
        padding: 10px;
        border-bottom: 3px solid #f44336;
    }
    /*删除列表中最后一个列表项的底部边框*/
    ul>li:last-child {
        border-bottom: none;
    }
    </style>
</head>
<body>
    <ul>
        <li>Item1</li>
        <li>Item2</li>
        <li>Item3</li>
        <li>Item5</li>
        <li>Item6</li>
    </ul>
</body>
</html>
删除列表中最后一个列表项的底部边框
  • :nth-child(n)选择器：用来定位某个父元素的一个或多个特定的子元素。其中n是其参数，而且可以是整数值(1,2,3,4)、表达式(2n+1、-n+5)或关键词(odd、even)，但参数n的起始值始终是1，而不是0。当参数n=0时，选择器将选择不到任何匹配的元素！当n为一个表达式时，其中n是从0开始计算，当表达式的值为0或小于0的时候，不选择任何匹配的元素。
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>结构性伪类选择器—nth-child(n)</title>
    <style type="text/css">
    ol>li:nth-child(2n+1) {
        background: orange;
    }
    </style>
</head>
<body>
    <!-- 有序列表 -->
    <ol>
        <li>item1</li>
        <li>item2</li>
        <li>item3</li>
        <li>item4</li>
        <li>item5</li>
        <li>item6</li>
        <li>item7</li>
        <li>item8</li>
        <li>item9</li>
        <li>item10</li>
    </ol>
</body>
</html>
设置父元素的多个子元素样式
  • :nth-last-child(n)选择器：从某父元素的最后一个子元素开始计算，来选择特定的元素。
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>结构性伪类选择器—nth-last-child(n)</title>
    <style type="text/css">
    /*选择列表中倒数第五个列表项，将其背景设置为橙色。*/
    ol>li:nth-last-child(5) {
        background: orange;
    }
    </style>
</head>
<body>
    <ol>
        <li>item1</li>
        <li>item2</li>
        <li>item3</li>
        <li>item4</li>
        <li>item5</li>
        <li>item6</li>
        <li>item7</li>
        <li>item8</li>
        <li>item9</li>
        <li>item10</li>
    </ol>
</body>
</html>
设置父元素倒数第5个子元素的样式
  • :first-of-type选择器：用来定位一个父元素下的某个相同类型的第一个子元素。其与:first-child的不同之处在于后者匹配的是某个父元素的第一个子元素，是结构上的第一个子元素！
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>练习:first-of-type</title>
    <style type="text/css">
    .wrapper {
        width: 500px;
        margin: 20px auto;
        padding: 10px;
        border: 1px solid #ccc;
        color: #fff;
    }
    .wrapper>div {
        background: green;
    }
    .wrapper>p {
        background: blue;
    }
    /*改变第一个段落p标签的背景颜色为橙色*/
    .wrapper>p:first-of-type {
        background: orange;
    }
    </style>
</head>
<body>
    <div class="wrapper">
        <div>我是一个块元素，我是.wrapper的第一个子元素</div>
        <p>我是一个段落元素，我是不是.wrapper的第一个子元素，但是他的第一个段落元素</p>
        <p>我是一个段落元素</p>
        <div>我是一个块元素</div>
    </div>
</body>
</html>
设置父元素div下的p标签元素的第一个子元素的样式
  • :nth-of-type(n)选择器：只计算父元素中指定的某种类型的子元素。在:nth-of-type(n)选择器中的n与:nth-child(n)选择器中的n参数一样，可以是整数、表达式、关键词。
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>练习:nth-of-type()</title>
    <style type="text/css">
    /*通过:nth-of-type(2n)选择器，将容器"div.wrapper"中偶数段数p标签的背景颜色设置为橙色。*/
    .wrapper>p:nth-of-type(2n) {
        background: orange;
    }
    </style>
</head>
<body>
    <div class="wrapper">
        <div>我是一个Div元素</div>
        <p>我是一个段落元素</p>
        <div>我是一个Div元素</div>
        <p>我是一个段落</p>
        <div>我是一个Div元素</div>
        <p>我是一个段落</p>
        <div>我是一个Div元素</div>
        <p>我是一个段落</p>
        <div>我是一个Div元素</div>
        <p>我是一个段落</p>
        <div>我是一个Div元素</div>
        <p>我是一个段落</p>
        <div>我是一个Div元素</div>
        <p>我是一个段落</p>
        <div>我是一个Div元素</div>
        <p>我是一个段落</p>
    </div>
</body>
</html>
设置父元素.wrapper下偶次序p标签的样式
  • :last-of-type选择器：选择父元素下的某个相同类型的最后一个子元素。
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>属性选择器</title>
    <style type="text/css">
    .wrapper>p:last-of-type {
        background: orange;
    }
    </style>
</head>
<body>
    <div class="wrapper">
        <p>我是第一个段落</p>
        <p>我是第二个段落</p>
        <p>我是第三个段落</p>
        <div>我是第一个Div元素</div>
        <div>我是第二个Div元素</div>
        <div>我是第三个Div元素</div>
    </div>
</body>
</html>
设置父元素.wrapper下p标签的最后一个子元素的样式
  • :nth-last-of-type(n)选择器：从最后一个子元素开始选择父元素中指定某个相同类型的子元素。
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>nth-last-of-type(n)</title>
    <style type="text/css">
    .wrapper>p:nth-last-of-type(3) {
        background: orange;
    }
    </style>
</head>
<body>
    <div class="wrapper">
        <p>我是第一个段落</p>
        <p>我是第二个段落</p>
        <p>我是第三个段落</p>
        <p>我是第四个段落</p>
        <p>我是第五个段落</p>
        <div>我是一个Div元素</div>
        <p>我是第六个段落</p>
        <p>我是第七个段落</p>
    </div>
</body>
</html>
设置父元素下倒数第三个p标签的样式
  • :only-child选择器：表示选择匹配元素的父元素中仅有一个子元素，且是一个唯一的子元素。
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>属性选择器</title>
    <style type="text/css">
    li {
        background: green;
        padding: 10px;
        margin-bottom: 5px;
    }
    li:only-child {
        background: orange;
    }
    </style>
</head>
<body>
    <ul>
        <li>Item1</li>
        <li>Item2</li>
        <li>Item3</li>
    </ul>
    <ul>
        <li>Item1</li>
    </ul>
    <ol>
        <li>Item1</li>
    </ol>
    <ol>
        <li>Item1</li>
        <li>Item2</li>
        <li>Item3</li>
    </ol>
</body>
</html>
选择仅有一个子元素的父元素下的子元素
  • :only-of-type选择器：选择父元素下唯一一个相同类型的子元素。
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>属性选择器</title>
    <style type="text/css">
    .wrapper {
        border: 1px solid #ccc;
        padding: 10px;
        width: 500px;
        margin: 10px auto;
    }
    .wrapper p:only-of-type {
        background: orange;
    }
    </style>
</head>
<body>
    <div class="wrapper">
        <p>我是一个段落</p>
        <p>我是一个段落</p>
        <p>我是一个段落</p>
    </div>
    <div class="wrapper">
        <p>我是一个段落</p>
    </div>
    <div class="wrapper">
        <div>我是一个Div元素</div>
        <p>我是一个段落</p>
        <div>我是一个Div元素</div>
    </div>
</body>
</html>
设置父元素.wrapper下仅有一个p标签的元素样式

相关文章

  • CSS3学习笔记（三）

    CSS3选择器 属性选择器：通过id属性可将不同div元素进行区分。 在CSS2中引入了一些属性选择器，而CSS3...

  • Scss进阶篇3

    慕课网学习笔记 @importSass 支持所有 CSS3 的 @ 规则， 以及一些 Sass 专属的规则，也被称...

  • css3学习笔记

    css3简介 CSS3是层叠样式表（Cascading Style Sheets）语言的最新版本，旨在扩展CSS2...

  • css3学习笔记

    最近做的项目中，涉及到了许多动画效果的实现，今天主要谈谈css3 Animation的使用。 CSS3属性中有关于...

  • CSS3学习笔记

    1. border-radius 向 div 元素添加圆角边框 例子 2border-radius: 2em 1e...

  • CSS3 学习笔记

    过渡 注意：如果时长未规定，则不会有过渡效果，因为默认值是 0。 边框 border-radius border-...

  • CSS3学习笔记

    效果如图 只需要创建一个一个div CSS代码如下

  • 07day

    CSS3动画 CSS3 @keyframes 规则如需在 CSS3 中创建动画，您需要学习 @keyframes ...

  • 前端学习笔记-CSS3

    项目代码同步上传到https://github.com/panhoucheng/Front-End-Study c...

  • CSS3学习笔记（二）

    background-origin：元素背景图片的原始位置。语法： 参数分别表示背景图片是从边框，内边距（默认值）...

网友评论

      本文标题：CSS3学习笔记（三）

      本文链接：https://www.haomeiwen.com/subject/ramkectx.html

      延伸阅读

      深度阅读

      • 您也可以注册成为美文阅读网的作者，发表您的原创作品、分享您的心情！

      栏目导航

      热点阅读

      关于我们|服务条款|联系我们|CSS3学习笔记（三）|投稿指南|网站地图|RSS订阅|排版工具|手机版

      提供经典美文摘抄,优美散文欣赏,现代诗歌精选,短篇小说,心情随笔,表白情书范文,故事会在线阅读欣赏

      Copyright © 2014-2023 Haomeiwen.com All Rights Reserved. 好美文阅读网 版权所有

      备案信息：桂公网安备 45052102000051号 · 桂ICP备13007215号-3

      本站所收录作品、热点评论等信息部分来源互联网，目的只是为了系统归纳学习和传递资讯

      所有作品版权归原创作者所有，与本站立场无关，如不慎侵犯了你的权益，请联系我们告知，我们将做删除处理！