• CSS---选择器种类 | 层叠性权重


    一、css选择器种类

    1.1,ID选择器

    1.2,类选择器

    1.3,标签选择器

    1.4,后代选择器

    1.5,子代选择器

    1.6,交集选择器

    1.7,并集选择器

    1.8,通配符选择器

    1.9,属性选择器

    1.10,伪类选择器1--LVHA爱恨原则

    1.11,伪类选择器2--ntl-child

    1.12,伪元素选择器-- before, after

    二、css的继承性和重叠性和!important

    三、css使用总结

    -----------------------------------------------------------

    一、css选择器种类

    1.1,ID选择器

    选一个,id是唯一的。例如获取标签的id=‘name’的:$("#name")

    1.2,类选择器

    选一群。例如获取所有标签的class='c1'的:$(".c1")

    1.3,标签选择器

    选一群。例如获取所有的p标签:$("p")

    1.4,后代选择器

    选一群,获取某标签下指定类型的所有子孙标签。 例如:$("div p")、$(".content  div p")

    1.5,子代选择器

    选一群,只获取某标签的指定类型的子标签。例如:$(".content>p")

    1.6,交集选择器

    选一群,获取同时能被两种选择器都选上的标签,两种选择器紧挨在一起。

    例如:$("h3.active") --- h3表示所有h3标签,.active表示所有active类标签,h3.active可以选中所有包含active类的h3标签

    1.7,并集选择器

    选一群,获取某几种选择器能获取的标签的集合,用逗号分隔。

    例如:$("a,h3,h4")  表示所有的a标签+h3标签+h4标签

    1.8,通配符选择器

    选一群,选择所有标签。一般不用,性能不好    *{  font:....}

    用下面的链接中的css清除默认样式:

     https://meyerweb.com/eric/tools/css/reset/

    1.9,属性选择器

    选一群,属性选择器在表单控件中比较常用

    [for]                    { /*找到属性为for的所有*/ }
    label[for]             { /*找到label里面所有属性为for的*/ }

    label[for="pwd"] {/*找到label里属性for="pwd"的*/}
    [title^="hello"]     {/*找到所有title属性且值以hello开头的*/}
    [title$="hello"]     {/*找到所有title属性且值以hello结尾的*/}
    [title*="hello"]      {/*找到所有title属性,且值中包含hello字符串的*/}

    1.10,伪类选择器1--LVHA爱恨原则

    这个顺序必须是 l v h a 否则会出问题

    /*点击前的a标签的样式*/
    a:link{
      color: #666;
    }
    /*鼠标点击a松手后的样式*/
    a:visited{
      color: yellow;
    }
    /*鼠标悬停在a上的样式*/
    a:hover{
      color: red;
    }
    /*鼠标点击不松手时a的样式*/
    a:active{
      color: green;
    }

    1.11,伪类选择器2--ntl-child

      /*指定所有li中的第1个*/
    li:first-child{
      color: red;
    }
      /*指定所有li中的最后1个*/
    li:last-child{
      color: red;
    }
      /*指定所有li中的第1个*/
    li:nth-child(1){
      color: red;
    }
      /*指定所有的li,n从0开始,0表示没有选中*/
    div ul li:nth-child(n){
      font-size: 20px;
    }
      /*指定所有的li中的偶数行*/
    div ul li:nth-child(2n){
      text-decoration: underline;
    }
      /*指定所有的li中的奇数行*/
    div ul li:nth-child(2n-1){
      text-decoration: underline;
    }
      /*指定所有li中隔3换1=4n+1,隔4换1=5n+1...*/
    div ul li:nth-child(4n+1){
      text-decoration: underline;
    }

    1.12,伪元素选择器-- before, after

      /*当前文本的第一个首字母*/
    p:first-letter{
      color: red;
    }
    /*在当前文本前添加内容。通常和content属性结合使用*/
    p:before{
      content: 'alex';
    }
      /*相当于在文本后加了个span标签并且可以设置样式,后面可以清除浮动用*/
    p:after{
      content: '@';
      color: blue;
      font-size: 40px;
    }

    例如:<p>我是一个段落</p>    

    二、css的继承性和重叠性和!important

    继承性:子标签会继承祖宗标签的4种文本类属性:color  font-*  text-*  line-*

    重叠性:权重大的会覆盖权重小的属性

      1,看选中还是继承:选中 > 继承

      2,都选中,看权重:选择器中id数量 >  选择器中class的数量 > 选择器中标签的数量

      3,都继承,看谁描述的近,例如:继承自父亲的  大于  继承自爷爷的

    !important:  可以把该属性的权重弄的无限大,例如:  color: red!important;

    三、css使用总结

    1,尽量少使用id选择器,因为id一般用到js的时候才用

    2,使用类选择器尽量找共同样式,可以少些代码,用<div  class="sheet1 sheet2  sheet3">形式

  • 相关阅读:
    hello world!
    react(一):组件的生命周期
    position和BFC
    继承
    绕不开的this
    js世界这么大,闭包想看看
    js中数组常用方法总结
    Appium混合应用测试
    手机APP兼容性测试
    运行monitor提示需要安装旧JAVA SE 6运行环境
  • 原文地址:https://www.cnblogs.com/staff/p/10065817.html
Copyright © 2020-2023  润新知