zoukankan      html  css  js  c++  java
  • CSS-学习笔记四

    1、*用于匹配任何的标记

    2、>用于指定父子节点关系

    3、E+F毗邻元素选择器,匹配所以紧随E元素之后的同级元素F

    4、E~F匹配所以E元素之后的同级元素F

    5、名称[表达式]

         [att=val]

         [att^=val]

         [att$=val]

         [att*=val]

    6、伪类

         6.1  :hover, :link , :active , :visited , :focus

         6.2  :disabled , :enabled , :checked , :read-only , :read-write

         6.3  :nth-child(n) , :nth-last-child(n) , :nth-of-type(n) , :first-child , :last-child , :nth-last-of-type(n) , :first-of-type , last-of-type

         6.4  not()

    7. 伪元素

        ::before    ::after

        ::first-letter    ::first-line

        ::selection

    /*>表示只获得一级子元素,可以比较和d#1 p的区别*/
    #d1>p {
        color :red;
    }
    
    #d1{
        width :150px;
        height :150px;
        border :solid 1px black;
    }
    
    /* + 获取和.c1平级的并且是挨着的元素*/
    .c1+div{
        color :blue;
    }
    
    #d2{
        width :150px;
        height :100px;
        border :solid 1px black;
    }
    
    /* ~ 获取~之后的所有同级元素*/
    .c2~div{
        color :pink ;
    }
    #d3{
        width :150px;
        height :150px;
        border :solid 1px black;
    }
    
    /* a下面定义了href 或 title 属性的元素*/
    a[href]
    {
        color :blue;
    }
    
    /*定义title=b的元素*/
    a[title =b]
    {
        color:red;
    }
    
    /*^=表示以什么开头*/
    a[href^=www]{
        font-size :32px;
    }
    
    /*$=以什么结尾*/
    a[href$=html]{
        color :green ;
    }
    
    /* *=内容里面包含什么的*/
    a[href*=tao]{
        color :orange ;
    }
    
    /*伪类,这里替代了class*/
    i:first-child {
        color :mediumpurple;
    }
    
    /*这里必须遵循love hate原则  Link visited hover active 只有满足这个顺序,才能使这四个伪类都起作用
        这四个伪类对其他标签一样存在效果
    */
    /*a:link超链接没点击之前的样式*/
    a:link{
        font-style:italic;
    }
    
    a:visited {
        color:aqua;
    }
    
    /*a:hover鼠标放在超链接时的样式*/
    a:hover {
        color :yellow ;
    }
    
    /*a:activer鼠标点击超链接那一刻时的样式*/
    a:active {
        color :black ;
    }
    
    /*当获取焦点的时候*/
    input:focus {
        color :red;
    }
    
    /*获取到被禁用的元素
        :disabled{
        } 这个代表所有被禁用的元素
    */
    input:disabled {
        color :blue;
    }
    
    /*获取checked元素,没测试成功*/
    :checked {
        font-size :30px;
    }
    
    /*获取checked元素*/
    /*:read-only {
        color :mediumpurple;
    }*/
    
    /*默认情况下就是又可以读又可以写*/
    :read-write {
        color :greenyellow ;
    }
    
    /*这个元素:1,是它的父标签的第n个 2, 是P标签*/
    p:nth-child(2){
        color:green ;
    }
    
    /*这个元素:1.是它的父元素的倒数第n个元素 2. 是P元素*/
    p:nth-last-child(2){
        color :pink;
    } 
    
    /*这个元素:父元素的第n个P元素*/
    p:nth-of-type(2){
        color :yellow ;
    }
    
    /*这个元素:父元素的倒数第n个P元素*/
    p:nth-last-of-type(2){
        color :aqua;
    } 
    
    /*这个元素:1,是它的父标签的第1个 2, 是P标签*/
    p:first-child {
    
    }
    
    /*这个元素:1.是它的父元素的倒数第1个元素 2. 是P元素*/
    p:last-child {
    
    }
    
    /*这个元素:父元素的第1个P元素*/
    p:first-of-type{
    
    }
    
    /*这个元素:父元素的倒数第1个P元素*/
    p:last-of-type{
    
    }
    
    /*class不等于c1的pre标签*/
    pre:not(.c1){
        color :red;
    }
    
    /*获取所有disabled的input标签
    input:not(:enabled){
    
    }
    获取所有read-only的input标签
    input:not(:read-only){
    
     }
    */
    
    /*在P标签前面添加内容*/
    p::before {
        content :"加在前面:";
    }
    
    /*在P标签后面追加内容*/
    p::after{
        content :"加在后面...";
    }
    
    /*p标签的第一个字母
    p::first-letter {
    
    }
    p标签的第一行
    p::first-line {
    
    }*/
    
    /*选择内容的时候,字体和底板呈现什么颜色*/
    ::selection {
        color :red;
        background-color :#00F;
    }
  • 相关阅读:
    RAID、LVM和btrfs文件系统
    RAID、LVM和btrfs文件系统
    python实现二分叉查找
    python实现二分叉查找
    python实现二分叉查找
    python实现二分叉查找
    java集合的简单用法
    java集合的简单用法
    java集合的简单用法
    用 AJAX 读取xml 节点属性值
  • 原文地址:https://www.cnblogs.com/xiao9426926/p/6276892.html
Copyright © 2011-2022 走看看