2020 June 27 HTML与CSS

CSS第二篇：CSS选择器

CSS选择器

  1. 开发中经常需要找到特定的网页元素进行设置样式
  2. 如何找到那个特定的网页元素？
  3. 什么是CSS选择器？
    1. 按照一定的规则选出符合条件的元素，为之添加CSS样式

  4. 选择器的种类繁多，大概可以这么归类

     通用选择器（universal selector）
 类型选择器（type selectors）或者标签选择器
 类选择器（class selectors）
 id选择器（id selectors）
 属性选择器（attribute selectors）
 组合（combinators）
 伪类（pseudo-classes）
 伪元素（pseudo-elements）

常用的选择器

类型（标签）选择器

  1. 根据标签的类型(div/span/a/…)，来给这个类型的所有标签设置样式

  2. 举例：(用标签名直接设置)

     /*给所有div类型的标签设置颜色*/
 div {
     color: red;
 }

通用选择器

  1. 针对所有的元素设置通用样式
    1. 比如：内边距、外边距等

  2. 代码举例：(用*直接设置)

     /* 所有元素内边距、外边距都设置为0*/
 * {
     padding: 0;
     margin: 0;
 }

id选择器

  1. 给元素设置一个id属性，然后通过这个id属性来给特定的元素设置样式
  2. 作用：给当前页面中唯一的一个元素设置样式
  3. 注意点：
    1. 一个HTML文档里面的id值是唯一的，不能重复
    2. id值如果由多个单词组成，单词之间可以用中划线、下划线连接，也可以使用驼峰标识
    3. 最好不要用标签名作为id值

  4. 代码举例：(用#+id值设置)

     <!DOCTYPE html>
 <html lang="zh">
 <head>
     <meta charset="UTF-8">
     <title>选择器</title>
       
     <style>
         #p3 {
             color: red;
         }
          
     </style>
 </head>
 <body>
     <p>我是p1</p>
     <p>我是p2</p>
     <p id="p3">我是p3</p>
     <!-- 不允许2个id值一样 -->
     <!-- <p id="p3">我是p4</p> -->
     <p id="p5">我是p5</p>
     <!-- 用中划线分开 -->
     <p id="main-p"></p>
 </body>
 </html>

类选择器（class）

  1. 作用：给n（n有限）个元素同时设置同样的样式，跟id选择器的唯一相对
    1. 当一个页面中只有某个元素有独特的样式，用id选择器
    2. 一个页面中有n（n有限）个元素有相同的样式，用class元素
  2. 注意：
    1. 一个元素可以有多个class值的，每个class值用空格隔开
    2. class值如果由多个单词组成，单词之间可以用中划线、下划线连接，也可以使用驼峰标识
    3. 最好不要用标签名作为id值

  3. 代码举例：(用.+class值设置)

     <!DOCTYPE html>
 <html lang="zh">
 <head>
     <meta charset="UTF-8">
     <title>选择器</title>
       
     <style>
         /* 设置所有class值为main的样式 */
        .main {
            color: red;
        }
        /* 设置class的其他值，此时只有p4有效 */
        .test {
            font-size: 40px;
        }
     </style>
 </head>
 <body>
    
     <p>我是p1</p>
     <p class="main">我是p2</p>
     <p class="main">我是p3</p>
     <!-- 可以有多个class值 -->
     <p class="main test">我是p4</p>
     <p>我是p5</p>
 </body>
 </html>
  4. 类选择器的案例使用：（good!）

    1. 需求：

       项目中有四种类型的按钮
 1. 危险（danger）
 2. 警告（warning）
 3. 通用（normal）
 4. 取消（cancel）
 这些按钮可能是圆角、直角

    2. 代码实现

       <!DOCTYPE html>
 <html lang="zh">
 <head>
     <meta charset="UTF-8">
     <title>选择器</title>
     <style>
         /* 0. 按钮通用 */
         .btn {
             color: #fff;
             font-size: 18px;
             padding-left: 20px;
             padding-right: 20px;
             padding-top: 10px;
             padding-bottom: 10px;
             /* 鼠标样式，鼠标移动到元素上的样式 */
             cursor: pointer;
         }
        
        /* 1. 按照颜色分类 */
        /* 危险 */
         .danger {
             background-color: #d73d32;
         }
         /* 警告 */
         .warning {
             background-color: #f6c12a;
         }
         /* 通用 */
         .normal {
             background-color: #53a93f;
         }
         /* 取消 */
         .cancel {
             background-color: #57b5e3;
         }
        
        /* 2. 按照角度分类 */
        /* 圆角 */
        .round {
            border-radius: 5px;
        }
     </style>
 </head>
 <!-- 
     核心思想：把一些共性抽取到一个类中，随想要这些共性，谁就加上这些类名
  -->
 <body>
     <br><br><br>
     <span class="btn normal">确定</span>
     <span class="btn danger">删除</span>
     <span class="btn warning">重置</span>
     <span class="btn cancel round">取消</span>
 </body>
 </html>

    3. 总结：

      1. 开发过程中，类选择器可以认为是最常用，最灵活的选择器
      2. 一般会将一些公共样式抽取出来，写到某个类选择器中，谁想要使用这些样式，加上类名即可

属性选择器

  1. 作用：筛选元素的属性名，凡是页面中某个元素有这个属性名的都有效
    1. 注意：上面讲的选择器都是设置属性值，而属性原则器是设置属性名
  2. 使用举例：
    1. [属性名]，表示拥有这个属性的所有元素都设置
    2. [属性名=“值”]，表示属性名=这个值的元素设置
    3. [属性名~="值"]，表示属性值中包含“值”的元素都有效(每个单词必须用空格隔开)
    4. [属性名|="值"],比如：[title|="one"]表示属性tile值恰好等于one或者以单词one开头且后面紧跟中划线连字符的元素有效
    5. [属性名^="值"],比如：[title^="one"]表示属性title值以one开头的元素就有效
    6. [属性名$="值"],比如：[title$="one"]表示属性title值以one结尾的元素就有效
    7. [属性名*="值"],比如：[title*="one"]表示属性title值只要包含one的元素就有效
     <!DOCTYPE html>
 <html lang="zh">
 <head>
     <meta charset="UTF-8">
     <title>选择器</title>
       
     <style>
         /* 用于筛选元素的属性名 */
       [title] {
           color: red;
       }
       /* 所有拥有href属性的元素都有效 */
       [href] {
           background-color: green;
       }
       /* 属性title的值为two的元素有用 */
       [title="two"] {
           color: blue;
       }
       /* tile属性值中包含one单词 */
       [title~="one"] {
           color: purple;
       }
       /* 属性tile值恰好等于one或者以单词one开头且后面紧跟中划线连字符的元素有效 */
       [title|="one"] {
         color: yellow;
       }
       /* 表示属性title值以one开头的元素就有效 */
       [title^="one"] {
         color: gray;
       }
       /* 表示属性title值以one结尾的元素就有效 */
       [title$="one"] {
         color: brown;
       }
       /* 表示属性title值只要包含one的元素就有效 */
       [title*="one"] {
         color: blueviolet;
       }
     </style>
 </head>
 <body>
     <span title="one">我是span</span>
     <span title="two">我是span</span>
     <span title="fff one xxx">我是span</span>
     <span title="one-xxx">我是span</span>
     <span title="onexxx">我是span</span>
     <span title="xxxone">我是span</span>
     <span title="xxxonexxx">我是span</span>
     <a href="https:www.baidu.com">百度</a>
     <a href="https:www.JD.com">京东</a>
     <a href="https:www.163.com">网易</a>
 </body>
 </html>

组合选择器

后代选择器

  1. div元素里面的span元素（包括直接、间接子元素）

     div span {
     color: red;
 }
    
 <body>
    <span>我是span</span>
     <div>
        <!--这两个span都有效  -->
        <span>我是span</span>
        <p>
            <!-- 有效 -->
            <span>我是span</span>
        </p>
     </div>
 </body>

子选择器

  1. div元素里面的直接span子元素(不包括间接子元素)

     div>span{
     color: red
 }
 <div>
    <!--只有这个span都有效  -->
    <span>我是span</span>
    <p>
        <!-- 无效 -->
        <span>我是span</span>
    </p>
 </div>

相邻兄弟选择器

  1. div元素后面紧挨着的p元素（且div、p元素必须是兄弟关系）

     div+p{
     color: red;
 }
    
 <div>
     <!-- 无效 -->
     <p>p元素</p>
 </div>
 <!-- 有效 -->
 <p>p元素</p>
 <!-- 无效 -->
 <p>p元素</p>

全体兄弟选择器

  1. div后面的p元素（且div、p元素必须是兄弟关系）

     div~p{
     color: red;
 }
    
 <div>
     <!-- 无效 -->
     <p>p元素</p>
 </div>
 <!-- 有效 -->
 <p>p元素</p>
 <!-- 有效 -->
 <p>p元素</p>

总结

  1. 上面的各种组合不一定是标签之间组合，也可以是各种选择器之间组合

  2. 比如：(标签、属性、class、id混合组合)

     .name>div>#title>p>[title]

交集选择器

  1. 所有同时符合几个个条件的元素（什么也不隔开，注意标签选择器一般在最前面）

     /*div元素、class值有one*/
 div.one{
     color:red;
 }
 /*div元素、class值有one、title属性为test*/
 div.one[title="test"]{
     color:red;
 }
 <div class="one">div元素</div>
 <div class="one" title="test">div元素</div>

并集选择器

  1. 所有的div元素+所有的class值有one的元素+所有的title属性值等于test的元素(用逗号隔开)

     div, .one, [title="test"] {
 color: red
 }

  2. 这样写等价于分开写

     div {
 color: red
 }
 .one{
 color: red
 }
 [title="test"] {
 color: red
 }

伪类

  1. 常见的伪类有：

     动态伪类：
     :link、:visited、:hover 、:active 、:focus
 目标伪类：
     :target 
 语言伪类：
     :lang()
 元素状态伪类：
     :enabled 、:disabled 、:checked
 结构伪类：
     :nth-child() 、:ntn-last-child()、:nth-of-type()、:nth-last-of-type()
     :first-child、:last-child 、:first-of-type、:last-of-type
     :root、:only-child、:only-of-type、:empty
 否定伪类
     :not()
  2. 伪类选择器的作用：给已经存在的元素增加一些其他功能
  3. 伪类的书写格式：:+标识符
    1. :冒号签名可以不加具体的标签，但是代表针对的所有元素

动态伪类

  1. 使用举例：

     a:link 未访问的链接
 a:visited 已访问的链接
 a:hover 鼠标挪动到链接上
 a:active 激活的链接（鼠标在链接上长按住未松开）
  2. 链接a标签有几种状态：
    1. 没有点击前的状态
    2. 鼠标挪到链接上的状态
    3. 点击按下手没有松开的状态
    4. 鼠标点击访问后的状态
  3. 使用注意：
    1. :hover必须放在:link和:visited后面才能完全生效
    2. :active必须放在:hover后面才能完全生效
    3. 所以建议的编码顺序是：:link、:visited、:hover、:active
      1. 顺序记忆方法：女生看到lv包后，哈（ha）哈大笑
    4. 除了a元素:hover、:active也能用在其他元素上
  4. 伪类:focus
    1. :focus指当前拥有输入焦点的元素（能接收键盘输入）
      1. 比如文本输入框的输入焦点（input元素）
      2. tab键切换选中元素-a标签
    2. a标签也能使用:focus,因为链接a元素也能被键盘的tab键选中聚焦，所以focus也适用与a元素
      1. :focus使用在a元素上效果
        1. 点击链接未松开，效果跟:active一样
        2. 点击tab键选中，可以设置效果
    3. 因此动态伪类的编写顺序建议为：:link、:visited、:focus、:hover、:active
      1. 女生看到lv包后，疯（f）一样哈（ha）哈大笑

  5. 代码示例：

     <head>
     <meta charset="UTF-8">
     <title>选择器</title>
       
     <style>
         /* 注意顺序必须是：:link、:visited、:hover、:active，否则无效 */
         /* 未访问 */
         a:link {
             color: red;
         }
         /* 鼠标访问后 */
         a:visited {
             color: yellow;
         }
         /* 长按下去、或者tab键选中 */
         a:focus {
             color: purple;
             /* tab键选中之后不需要边框 */
             outline: none;
         }
         /* 鼠标移动上去 */
         a:hover {
             color: green;
         }
         /* 鼠标点击下去未松开 */
         a:active {
             color: blue;
         }
         div {
             width: 100px;
             height: 100px;
             background-color: red;
         }
         /*:hover/ :active  用在其他元素上 */
         div:active {
             color: green;
         }
         div:hover {
             color: blue;
         }
         /* focus使用 */
    
         /* 输入文本框聚焦 */
         input:focus {
             color: red;
         }
         /*
          a元素也能使用foucus伪类，效果跟 active一样
          :focus建议放在:hover 前面
         */
         /* a:focus {
             color: purple;
         } */
     </style>
 </head>
    
 <body>
     <a href="https://www.360.cn">百度</a>
     <div>我是div</div>
    
     <input type="text">
     <a href="#">hhhhh</a>
 </body>
 </html>
  6. 注意：

    1. 直接给a元素设置样式，相当于给a元素所有的动态伪类都设置了

       a {
     color: red;
 }

    2. 相当于：:link、:visited、:focus、:hover、:active的color值都是red

tabindex属性
  1. 使用tabindex属性可以控制tab键选中元素的顺序，从1开始
  2. tabindex设置为-1，表示禁止使用tab键选中
  3. 举例：
    1. 指定先选择a标签的顺序
    2. 哪个a标签不需要通过tab选择

    3. 举例：

       <!-- 选择顺序为aaaa3、aaaa1、aaaa4 -->
 <body>
    <a href="#" tabindex="2">aaaa1</a>
    <!-- 不允许被tab选中，只要设置为-1即可 -->
    <a href="#" tabindex="-1">aaaa2</a>
    <a href="#" tabindex="1">aaaa3</a>
    <a href="#" tabindex="3">aaaa4</a>
 </body>

结构伪类

<body>
<div>
    <p>p元素</p>
    <span>span1</span>
    <span>span2</span>
    <span>span3</span>
    <span>span4</span>
</div>
</body>
:nth-child()
  1. :nth-child(1):父元素的第一个子元素

    1. 举例：

       <style>
     /* 设置span元素，而且他是父元素中的第二个子元素 */
     span:nth-child(2) {
         color: red;
     }
 </style>

    2. span1才是父类的第二个子元素，因此他会被设置red

  2. :nth-child(2n):n代表任意正整数和0
    1. 将2、4、6、8…偶数子元素被设置设置（没有0）
    2. span1、span3被设置red
    3. 也可以这么表达:nth-child(even)，even代表偶数
  3. :nth-child()括号中的值可以设置任意表达式：3n、2n+1…等等
  4. 总结：:nth-child()括号中的完整表达式是 :nth-child(an+b)
    1. 是父元素中的第an+b个子元素
    2. n代表正整数和0
    3. a、b需要给出具体值，可以是正整数、负整数、0
    4. 举例：只选择前2个子元素
      1. :nth-child(-n+2)
:nth-last-child()
  1. :nth-last-child()语法跟:nth-child()类似，不同点是:nth-last-child()从最后一个元素往前计算
  2. span:nth-last-child(2):倒数第二个元素，span2被设置为red
:nth-of-type()、:nth-last-of-type()
  1. nth-of-type()语法跟:nth-child()类似，不同点是nth-of-type()计数时只计算同种类型的元素
  2. nth-of-type(2):span2会被设置为red，因为span2才是父类所有span元素中第二个子元素，注意与:nth-child(2)比较
  3. :nth-last-of-type()语法跟nth-of-type()类似，不同点是:nth-last-of-type()从最后一个元素往前计算
元素状态伪类
  1. :enabled: 启用状态
  2. :disabled: 禁用状态
  3. :checked: 被选中状态
<style>
    /* input 不是disabled的时候 */
    input:enabled {
        background-color: #0f0;

    }
    /* input可用时候 */
    input:disabled {
        background-color: #ddd;
    }
    /* checkbox被勾选的时候 */
    input:checked {
        outline: 2px solid #f00;
    }
</style>
<body>
<input type="text" disabled>
<input type="checkbox">
<!-- 表单的颜色效果 -->
<input type="color">
<input type="datetime">
</body>
其他结构伪类
  1. :first-child ,等价于：:nth-child(1)
  2. :last-child ,等价于：:nth-last-child(1)
  3. :first-of-type ,等价于：nth-of-type(1)
  4. :last-of-type ,等价于：:nth-last-of-type(1)
  5. :only-child:父元素中唯一的子元素,父元素只有一个子元素，而且是当前设置的元素
    1. 等价于：:first-child:last-child
  6. :only-of-type:父元素中唯一的当前子元素，父元素可能有多个子元素，但是当前设置的这个元素只有一个
  7. :root:代表根元素，就是HTML元素
  8. :empty:代表里面完全空白（即没有任何子元素、空格）的元素

否定伪类

  1. :not()格式是:not(x)
  2. x是一个简单的选择器选择器
    1. 元素选择器、通用选择器、属性选择器、类选择器、id选择器、伪类（除否定伪类）

  3. :not()表示除x以外的元素，相当于对选择器进行取反选择

     /* div元素，id值不为test的所有div元素 */
 div:not(#test)

  4. 注意：not只支持简单的选择器，不支持组合选择器：(下面都不支持)

     div:not(div.one){}
 div:not(div .one){}

伪元素

  1. 常见的伪元素有

     :first-line、::first-line
 :first-letter、::first-letter
 :before、::before、
 :after、::after

  2. 为了区别伪元素和伪类，建议伪元素使用2个冒号，比如：::first-line

::first-line

  1. ::first-line可以针对首行文本设置属性
  2. 只有下列属性可以应用在::first-line伪元素
    1. 字体属性、颜色属性、背景属性
    2. word-spacing、letter-spacing、text-decoration、text-transform、line-height

::first-letter

  1. ::first-letter可以针对首字符设置属性
  2. 只有下列属性可以应用在::first-letter伪元素
    1. 字体属性、margin属性、padding属性、border属性、颜色属性、背景属性
    2. text-decoration、text-transform、letter-spacing、word-spacing、line-height、float、vertical-align

  3. 举例：

     <head>
     <meta charset="UTF-8">
     <title>伪类</title>
       
     <style>
         div {
             width: 100px;
             background-color: red;
         }
         /* 给div元素里面内容第一行设置样式 */
        div::first-line {
             color: yellow;
        }
        /* 第一个字体的大小 */
        div::first-letter {
            font-size: 50px;
        }
     </style>
 </head>
    
    
 <body>
    <div>我是文字我是文字我是文字我是文字我是文字我是文字</div>
 </body>

::before、::after

  1. ::before和::after用来在一个元素的内容之前或者之后插入其他内容（可以是文字、图片）

     <style>
     /* div内容最前面加 */
     div::before {
         content: "666";
         color: blue;
     }
     /* div内容最后面加 */
     /* div::after {
         content: "777";
         color: green;
     } */
     /* 加图片 */
     div::after {
         content: url("./imgs/test.png");
     }
    
     div {
         color: red;
     }
       
 </style>

  2. 通过before、after添加的内容默认是inline类型的,可以看成一个span元素，示例：通过before、after给一个控件添加2个子元素

     <style>
     .box {
         background-color: #ff0;
         width: 100px;
         height: 100px;
     }
     /* 通过before/after添加子元素 */
     .box::before {
         content: "";
         display: block;
         background-color: #f00;
         width: 50px;
         height: 50px;
     }
     .box::after {
         content: "";
         display: block;
         background-color: #0f0;
         width: 50px;
         height: 50px;
     }
 </style>
    
 body>
 <div class="box"></div>
 </body>

  3. before、after注意事项：

    1. content属性不能少
    2. 可以使用before、after来取代子元素
    3. before、after默认的display默认的是inline，可以看成是span元素
    4. 由于::before和::after是CSS样式，所以可有可无的内容才使用before、after

All content is licensed under CC BY-NC-SA

Buit with Jekyll and 3-Jekyll theme • Hosted on Github

Table of Contents