css选择器以及层叠样式

css选择器以及层叠样式

• 这周开始学习CSS样式中的选择器以及它们的层叠样式。

1、基本选择器

• 元素选择器：
  * 一个标签由开始标记、元素内容、结束标记三个部分。
  * 标记名：开始标记
  * 类选择器：class
  * ID选择器：id
  * 通配符：*
• 结构、层次选择器
  * 子级选择器： 父元素>子元素
  * 后代选择器： 祖先元素 后代元素
  * 兄弟选择器: 兄弟元素A+/~兄弟元素B
  * +;只能选中A后面的元素
  * AB之间不能有其他元素
  * ~;选择A之后所有的B元素
  *结构伪类选择器：
  • :nth-child(n): n是数值或小括号里是公式,为公式时n从0开始，为数字时从1开始
    * :first-child\nth-child(1)\nth-of-type(1)
    * :last-child\last-of-type(1)\last-nth-child(1)\last-nth-of-type(1)
    * 奇数项：odd\或(2n+1)
    * 偶数项: even\或2n
    * 缺点：选择器选择的是离大括号最近的一个元素，第三个不一定是需要的选择器
    * 条件：所有的兄弟元素标记名相同。
  • :nth-of-type(n): n是数值或小括号里是公式
  • 否定选择器:
    * not():小括号里是排除的元素
    * :not(:nth-child(3))
    * 如何对多个元素进行否定：
    * :not(:nth-child(3)):not(:nth-child(5))
    • :only: 只有一个子元素
    • :empty: 没有子元素
• 动态伪类:
  * :link 未访问
  * :visited 已访问
  * :focus 焦点、激活(键盘tab)(input\a)
  * :hover 悬停
  * :active 点击时
  * :target 锚点(当前页面内容的跳转)
  * 格式：

<a herf="#跳转标签的id值">

• 伪元素
  * ::first-line 第一行
  * ::first-letter 第一个字或字母
  * ::after 标签之前添加内容
  * ::before 标签之后添加内容
  * 当前元素与::after和::before层次关系: 父子级关系 当前标签是父元素 ::after和::before是子元素。
  * ::after 当前标签的第一个子元素
  * ::before 当前标签的最后一个子元素
  * ::selection 选中区域的样式添加，例：

:p::selection{
                background-color: red;
                color:white;
            }

• 属性选择器:
  * 属性名=“属性值”
  * 格式: 元素[属性名=“属性值”]
  * 选中以XXX开始
  * 书写格式: 元素[属性名^=“属性值”]
  * 选中以XXX结束
  * 书写格式: 元素[属性名$=“属性值”]
  * 指定属性中包含XXX
  * 书写格式: 元素[属性名*=“属性值”]

2、层叠样式

• 层叠机制浏览器自动触发
  • 条件：声明冲突
  • 行内>id>类>元素>通配符
  • 功能：判断最终哪个样式声明获胜
    • 比较优先级
      • 开发者
      • 浏览器
      • 用户：!importent 最重要但很少考虑
    • 比较特殊性
      • a:行内
      • b:ID
      • c:类、伪类、属性
      • d:元素
      • 如果优先级相同则比较特殊性
      • 特指度:
      • 特指值:
    • 比较源次序
      • 谁后写谁胜出

    <style>
        article>section:not(:nth-child(3)):not(:nth-child(5)){
            color: red;
        }
        a:hover{
            color: fuchsia;
        }
        a:link{
            color: red;
        }
        a:valid{
            color: yellow;
        }
        a:focus{
            color: green;
        }
        a:active{
            color: saddlebrown;
        } 
        p{
            margin: 100px;
            display: flex;
            flex-wrap: wrap;
        }
        /* p:target{
            color: fuchsia;
        } */
        p:nth-child(3)::first-line{
            color: hotpink;
        }
        aside::after{
            margin-left: 300px;
            /* content: "";
            display: inline-block;
            width: 100%; */
            border-bottom: 5px solid rebeccapurple;
            /* position: relative;
            left: -200px;
            bottom: -20px;
            opacity: 0;
            transition: all 10s; */
        }
        aside:hover::after{
            opacity: 1;
        }

    </style>