• CSS选择器


    通用选择器

    应用于文档中的所有元素
    eg:

    *{}
    应用于页面中的所有元素
    

    类型选择器

    匹配元素名称与选择器相似的元素
    eg:

    h1,h2,h3{}
    应用于<h1>元素,<h2>元素和<h3>元素
    

    类选择器

    匹配这样的元素:元素的class特性的值与此选择器的点(或句点)符号后面的部分相同
    eg:

    .note{}
    应用于所有class特性值为note的元素。
    p.note{}
    只应用于class特性值为note的<p>元素
    

    id选择器

    匹配这样的元素:元素的id特性的值与此选择器#后面的部分相同
    eg:

    #introduction{}
    应用于id特性值为introduction的元素。
    

    子元素选择器

    匹配指定元素的直接元素
    eg:

    li>a{}
    应用于所有父元素为<li>的<a>元素(对页面中其它<a>元素不起作用)
    

    后代选择器

    匹配指定元素的后代元素(不仅是指定元素的直接子元素)
    eg:

    p a{}
    应用于所有位于<p>元素中的<a>元素,不论他们之间有没有嵌套其他元素
    

    相邻兄弟选择器

    匹配一个元素的相邻兄弟元素
    eg:

    h1+p{}
    应用于<h1>元素之后的第一个<p>元素(对其他<p>元素不起作用)
    

    普通兄弟选择器

    匹配一个元素的兄弟元素,不论这个元素是不是与它的兄弟元素相连
    eg:

    h1~p{}
    如果有两个<p>元素均为<h1>元素的兄弟元素,那么这些规则对两个兄弟元素都起作用
    

    css中的伪类

    锚伪类(未被访问状态,已被访问状态,鼠标悬停状态,活动状态)
    :link 未被访问的链接添加样式
    :visited 向已被访问的链接添加样式
    :hover 鼠标悬停时向元素添加样式
    :active 向被激活的元素添加样式
    :focus 向拥有鼠标输入焦点的元素添加样式
    :first-child 向第一个子元素添加样式
    eg:

    <!DOCTYPE html>
    <html>
        <meta charset="UTF-8">
        <style>
            a:link{background-color: aqua;}
        </style>
        <body>
           <a href="#">ZzkTxdy</a>
        </body>
    </html>
    
  • 相关阅读:
    OAuth2.0协议封装类
    FFmpeg学习笔记
    mysql学习笔记(有待增补)
    使用cnpm国内淘宝镜像命令
    mongoDB中的聚合操作示例
    react的学习日常整理
    服务器防止访问超时的一些参数设置
    MongoDB基本语句操作
    CI框架配置多个数据库
    php前后台登录交互明文传输使用base64加密
  • 原文地址:https://www.cnblogs.com/Acapplella/p/13416463.html
Copyright © 2020-2023  润新知