• css设计指南-笔记2


    一.特殊的上下文选择符


    上下文选择符以空格作为分隔符,分组选择符以逗号作为分隔符
    上下文选择符选择的是所有符合条件的后代元素(包括直接后代和间接后代元素)

    1.子选择符 >

    标签1 > 标签2
    //标签2必须是标签1的子元素
    //反过来,标签1必须是标签2的父元素而不是其他祖先元素
    

    2.紧邻同胞选择符 +

    标签1 + 标签2
    //标签2必须紧跟其同胞标签1的后面
    //标签2只代表同胞的第一个元素
    

    3.一般同胞选择符 ~

    标签1 ~ 标签2
    //标签2必须跟(不一定紧跟)在其同胞标签1后面
    //标签2只代表同胞的所有满足条件的元素,不包括其他子元素
    
    如
    	<h2>An H2 Heading</h2>
    	<p>This is paragraph 1</p>
    	<p>Paragraph 2 has <a href="#">a link</a> in it.</p>
        <a href="#">Link</a>
    //h2 ~ a {color: red;} 只影响Link链接,而不影响a link链接。
    

    4.通用选择符 *

    1、* {color: red;}		//匹配任何元素
    2、p * {color: red;}	//p包含的所有元素
    3、section * a {color: red;}	//任何是section孙子元素,而非子元素的a标签(非子选择符)
    如
    <section>
    	<h2>An H2 Heading</h2>
    	<p>This is paragraph 1</p>
    	<p>Paragraph 2 has <a href="#">a link</a> in it.</p>
        <a href="#">Link</a>
    </section>
    //2选中的是a link,而非p里面的其他直接文本节点。
    //3选中的是a link元素,而非Link元素。
    

    二.伪类


    一个冒号表示伪类,两个冒号表示css3新增的伪元素

    1、UI(用户界面)伪类

    在HTML元素处于某个状态时,为该元素应用css样式

    链接伪类

    a:link {}		//链接初始状态
    a:visited {}	//点击过的链接(用稍浅一些的颜色)
    a:hover {}		//悬停时的链接
    a:active {}		//链接正在被点击(鼠标在元素上按下,还没有释放)
    //必须按照以上顺序使用
    //巧记:“LoVe?HA!”
    

    :focus伪类

    e:focus		//e代表任何元素
    
    input:focus {border: 1px solid blue;}
    //表单中的文本字段在用户单击时获得焦点,此时添加一个蓝色边框
    

    :target伪类

    e:target	//用户点击指向页面中其他元素的链接,那个元素就是目标,用:target选中它
    
    <a href="#more">more information<a>
    <h2 id="more">this is the information you are looking for</h2>
    #more:target {background: #eee;}
    //单击链接,转向h2元素,为h2元素添加样式。
    

    2、结构化伪类

    根据标记的结构应用样式

    e:first-child		//一组同胞元素中的第一个元素
    e:last-child		//一组同胞元素中的最后一个元素
    e:nth-child(n)		//一组同胞元素中的第几个元素
    e:nth-child(odd/even)   //一组同胞元素中的奇数或偶数元素
    

    三.伪元素


    e::first-letter		//元素的第一个字符(用于首字符放大效果)
    e::first-line		//元素的第一行(长度随浏览器窗口大小的变化而改变)
    e::before			//在元素前面添加内容
    e::after			//在元素后面添加内容
    
    <p>25<p>
    p::before {content: "age: ";}
    p::after {content: " years.";}
    //age: 25 year.(注意添加空格)
  • 相关阅读:
    java jar 后台运行
    【Objective-C】内存管理
    GitHub Gist 指南
    模板发送java邮件
    JDK环境配置
    新装mysql数据库登陆不上去(账号密码正确)
    一个简单的爬取b站up下所有视频的所有评论信息的爬虫
    hexo Nunjucks Errors 解决方法
    新版正方教务系统导出课程表-油猴脚本
    ACM-图论-同余最短路
  • 原文地址:https://www.cnblogs.com/u14e/p/5199115.html
Copyright © 2020-2023  润新知