• CSS学习笔记03-CSS复合选择器

    目录

    交集选择器

    交集选择器由两个选择器构成，找到的标签必须满足：既有标签一的特点，也有标签二的特点。其中第一个为标签选择器，第二个为类选择器，两个选择器之间不能有空格。

    1. <style>
    2.     /* 交集选择器的书写要求：
    3.     1.第一个选择器必须是标签选择器
    4.     2.第二个选择器必须是类选择器
    5.     3.两个选择器中间不加空格，加点 */
    6.  
    7.     /* 含义：class名为one的p标签 */
    8.     p.one{
    9.         color: aqua;
    10.     }
    11.  
    12.     h2.one{
    13.         color:aquamarine;
    14.     }
    15. style>
    16. <body>
    17.     
    18.     <p class="one">我是第一个p>
    19.     <p class="one">我是第二个p>
    20.     <p class="three">我是第三个p>
    21.     <h2 class="one">我是标题h2>
    22.  
    23. body>

     并集选择器

    并集选择器（CSS选择器分组）是各个选择器通过逗号连接而成的，任何形式的选择器（包括标签选择器、class类选择器id选择器等），都可以作为并集选择器的一部分。如果某些选择器定义的样式完全相同，或部分相同，就可以利用并集选择器为它们定义相同的CSS样式。

    1.   <style>
    2.         /* 并集选择器 就是和的意思 选择器类型不限制 多个选择器之间用逗号连接 */
    3.         p,
    4.         h2,
    5.         .a{
    6.             color:aquamarine;
    7.         }
    8.     style>
    9. head>
    10. <body>
    11.     <p>我是段落p>
    12.     <h2>我是标题h2>
    13.     <div class="a">我是普通盒子div>
    14. body>

    后代选择器 

    后代选择器又称为包含选择器，用来选择元素或元素组的后代，其写法就是把外层标签写在前面，内层标签写在后面，中间用空格分隔。当标签发生嵌套时，内层标签就成为外层标签的后代。 子孙后代都可以这么选择。 或者说，它能选择任何包含在内 的标签。

    1.  <style>
    2.         /* 书写规范： 父级选择器 空格 子代 以下都可以*/
    3.         div p{
    4.             color:red;
    5.         }
    6.  
    7.         .father .son{
    8.             background-color:green;
    9.         }
    10.  
    11.         div .son{
    12.             text-align: center;
    13.         }
    14.  
    15.     style>
    16. head>
    17. <body>
    18.     <div class="father">
    19.         爸爸
    20.         <p class="son">
    21.             儿子
    22.           
    23.         p>
    24.     div>
    25. body>

     子元素选择器

    子元素选择器只能选择作为某元素子元素的元素。其写法就是把父级标签写在前面，子级标签写在后面，中间跟一个 > 进行连接，注意，符号左右两侧各保留一个空格。

    1. <style>
    2.         /* 子元素选择器 多个选择器之间用>连接，只能找到亲儿子 */
    3.        
    4.         .one>p>span{
    5.             color:aqua; 
    6.         }
    7.  
    8.         /* 子元素选择器只能一级一级找 不能跨级，下面是错误的 */
    9.         /* div>span{
    10.             color: green;
    11.         } */
    12.  
    13.     style>
    14. head>
    15. <body>
    16.     <div class="one">
    17.         爸爸
    18.         <p>
    19.             儿子
    20.             <span>
    21.                 孙子
    22.             span>
    23.         p>
    24.     div>
    25. body>

     链接伪类选择器

    • :link /* 未访问的链接 */

    • :hover /* 鼠标移动到链接上 */

    • :active /* 选定的链接 */

    • :visited /* 已访问的链接 */

      1. <style>
      2.        
      3.        /* 注意他们写的顺序：lvha */
      4.          /* 链接未访问时的样式 */
      5.          a:link{
      6.             color:pink;
      7.         }
      8.         
      9.         a:visited{
      10.             color:aqua;
      11.         }
      12.  
      13.         /* 鼠标移动到链接上 (最常用)*/
      14.         a:hover{
      15.             color:red;
      16.         }
      17.  
      18.         /* 选定的链接 */
      19.         a:active{
      20.             color:purple;
      21.         }
      22.         /* 已访问的链接 */
      23.       
      24.         p:hover{
      25.             background-color: aquamarine;
      26.         }
      27.     style>
      28. head>
      29. <body>
      30.     <a href="#">百度a>
      31.     <p>我是段落p>
      32. body>

    结构伪类选择器

    E:first-child
    选择父元素的第一个子元素E。

    E:last-child
    选择父元素的最后一个子元素E。

    E:nth-child(n)
    匹配父元素的第n个子元素E，假设该子元素不是E，则选择器无效。

    E:nth-last-child(n)
    匹配父元素的倒数第n个子元素E，假设该子元素不是E，则选择器无效。

    E:nth-of-type(n)
    匹配同类型中的第n个同级兄弟元素E。

    该选择器总是能命中父元素的第n个为E的子元素，不论第n个子元素是否为E

    1. <style>
    2.     /* li的父亲的第一个孩子 是li标签 才能生效 */
    3.     li:first-child{
    4.         color:red;
    5.     }
    6.  
    7.      /* li的父亲的最后一个孩子 是li标签 才能生效 */
    8.     li:last-child{
    9.         color:aqua;
    10.     }
    11.  
    12.  
    13.      /* li的父亲的第二个孩子 是li标签 才能生效 */
    14.     li:nth-child(2){
    15.         color:blue;
    16.     }
    17.  
    18.     /* odd 奇数  even 偶数 */
    19.     /* n 可以是数字 也可以是表示奇偶的英文 还可以是公式 */
    20.     li:nth-child(2n+1){
    21.         color:pink;
    22.     }
    23.  
    24.     li:nth-child(even){
    25.         color:green;
    26.     }
    27.  
    28.     /* 同类标签的第几个，括号里也可以是公式 */
    29.     li:nth-of-type(2){
    30.         font-size: 40px;
    31.     }
    32.  
    33. style>

    占位符选择器

    E::placeholder , 修改占位符样式

    1. <style>
    2.  
    3.         input::placeholder{
    4.             color:pink;
    5.             /* 修改占位符里面的文字大小 有最小临界值 12px */
    6.             font-size: 12px;
    7.         }
    8.     style>
    9. head>
    10. <body>
    11.     <input type="text" placeholder="123">
    12. body>

    伪元素选择器

    1. E::first-letter文本的第一个单词或字（如中文、日文、韩文等）

    2. E::first-line 文本第一行；

    3. E::selection 可改变选中文本的样式；

    4. E::before和E::after   在E元素内部的开始位置和结束位创建一个元素，该元素为行内元素，且必须要结合content属性使用。

      1. <style>
      2.         /* first-letter  是选中文本的第一个字或单词 */
      3.         p::first-letter{
      4.             font-size: 30px;
      5.             color:palegreen;
      6.         }
      7.  
      8.         /* first-line 文本第一行 */
      9.         p::first-line{
      10.             background-color: darkorange;
      11.         }
      12.  
      13.         /* section 改变选中文本的样式 */
      14.         p::selection{
      15.             color:blueviolet;
      16.             background-color: aqua;
      17.         }
      18.  
      19.         /* 伪元素设置的内容是无法选中的 */
      20.         p::before{
      21.             /* content 设置伪元素的内容 */
      22.             content: "我是后加的";
      23.             color:brown;
      24.             font-size: 30px;
      25.         }
      26.         
      27.         p::after{
      28.             content: "我是后加的结尾";
      29.         }
      30.     style>
      31. head>
      32. <body>
      33.     <p>
      34.         你寂寞。泰戈尔说：“我们把世界看错了，反说他欺骗我们。”
      35.          你自卑。“你之所以感到巨人高不可攀，那只是因为你跪着。” 
      36.          你痛苦。牧师悄悄告诉你：“人比神伟大，因为神不懂得痛苦。” 
      37.          你违心。知道吗：“世界上有许多事情必须做，但你不一定喜欢做，这就是责任的全部意义。”
      38.           你懊悔。聂?鲁达《太阳颂歌》中说：“过去我不了解太阳，那时我过的是冬天.......”
      39.           你焦急。大仲马讲：“人生就是不断的等待与希望。”
      40.     p>
      41. body>

       选中：

              

      属性选择器

      

    1. <style>
    2.     a[href="#"]{
    3.         color:red;
    4.     }
    5.  
    6.     [href="index.html"]{
    7.         color:aqua;
    8.     }
    9.  
    10.     [class="one"]{
    11.         color:blueviolet;
    12.     }
    13.     [type="text"]{
    14.         outline-color: red;
    15.     }
    16.  
    17.     /* 1.以什么为开头去选择 */
    18.     [href^="a"]{
    19.         color:brown;
    20.     }
    21.  
    22.     /* 2.以什么为结尾 */
    23.     [href$="d.html"]{
    24.         font-size: 40px;
    25.     }
    26.  
    27.     /* 3.只要含有这个属性，并且属性值里面包含这个字母的就可以选中 */
    28.     [href*="b"]{
    29.         font-style: italic;
    30.     }
    31.  
    32.  
    33. style>
    34. <body>
    35.     <p class="one">我是p标签p>
    36.     <p class="two">我是大pp>
    37.     <a href="#">我是aa>
    38.     <a href="index.html">我也是aa>
    39.     <img src="" alt="你好">
    40.     <input type="text">
    41.     <input type="password" name="" id="">   
    42.     <h2 class="three">我是标题h2> 
    43.  
    44.     <a href="abc.html">abca>
    45.     <a href="abcd.html">abcda>
    46.     <a href="bcd.html">bcda>
    47.     <p class="abc" href="bbb.html">我是段落p>
    48. body>

     

  • 相关阅读:
    C# Winform围棋棋盘
    Python3-类基础
    官方解决 maven 上传jar包到中央仓库401
    25K测试老鸟6年经验的面试心得，四种公司、四种问题…
    【译】.NET 7 中的性能改进（三）
    【Node.js】zlib 模块
    kafka事务的详解
    深入探究 threejs 中的材质与纹理应用
    交错攻击 | 平行会话攻击 | 反射攻击 | 类型错误攻击
    从 AST 到 自定义 Babel 插件
  • 原文地址：https://blog.csdn.net/qq_52117632/article/details/127403228