博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
css选择器的使用详解
阅读量:6799 次
发布时间:2019-06-26

本文共 1130 字,大约阅读时间需要 3 分钟。

-、css选择器的分类:

 

 

二、常用选择器详解:

  1、标签选择器:

  语法:

    标签名 {

      属性:属性值;

    }

  代码示例:

    h1 {

      color: #ccc;

      font-size: 28px;

    }

 

  2、类选择器:

   语法:

    .类名 {

      属性:属性值;

    }

   代码示例:

    .top {

      margin-top:25px;

    }

    <div class="top"></div>

  3、id选择器:

   语法:

    #ID名称 {

      属性:属性值;

    }

   代码示例:

   #top {

    padding-top:10px;

   }

   <div id="top"></div>

  注意:ID属性是唯一标识。

  4、伪类

   语法:

   元素:伪类 {

    属性:属性值;

   }

   代码示例:

   a:link {

    color:blue;

    }

  5、并集选择器:

   语法:

   标签名,.类名,#ID名称 {

    属性:属性值;

   }

   代码示例:

   p,.top,#title {

    color:red;

   }

  6、后代选择器:

   语法:

   p span {

     属性:属性值;

   }

三、通用选择器详解:

   语法:

  *{

   属性:属性值;

  }

四、高级选择器详解:

  1、子选择器:

    代码示例:

    #nav>li {

      padding-left: 20px;

    } 

 

  2、相邻同胞选择器:

    代码示例:

    h2+p {

      font-size: 1.4em;

    }

  3、属性选择器:

    代码示例:

    [id="header"] {

      background: url(branding-color.png) repeat-y left top;

    }

    a[rel="nofollow"] {

      padding-right: 20px;

    }

五、样式的优先级(权重):

  基本选择器之间:ID选择器〉类选择器〉标签选择器

  样式表之间:  行内样式〉内嵌样式〉外部样式

  css样式之间:  同一个选择器且两条相同的声明,后一条声明会覆盖前一条声明

转载于:https://www.cnblogs.com/john-sr/p/5692394.html

你可能感兴趣的文章
日期类型存储成字符串类型的格式问题
查看>>
VUE -- 自定义控件(标签)
查看>>
identity in sql server 批量插入history
查看>>
Java开发命名规范总结
查看>>
.NET (C#) Internals: ASP.NET 应用程序与页面生命周期——吴秦(Tyler)
查看>>
wcf客户端动态嗅探服务实例
查看>>
【集合框架】JDK1.8源码分析之IdentityHashMap(四)
查看>>
hibernate 7大主键生成策略详解与对象状态
查看>>
Linux安装软件命令小结
查看>>
上周上线碰见的ORA-00054错误回放
查看>>
java中System类简介(转)
查看>>
批处理技巧:循环固定目录的子目录,然后向每个子目录拷贝文件
查看>>
影响数据库性能的因素
查看>>
音频编码器
查看>>
无线网络会杀死固网? 不可能的事情
查看>>
DockOne微信分享(一一二):Flannel中vxlan backend的原理和实现
查看>>
qemu QLIST数据结构
查看>>
WCF技术剖析之三十:一个很有用的WCF调用编程技巧[下篇]
查看>>
模块化数据中心成未来互联网企业首选
查看>>
IT风险的防控水平是一个“木桶”原理
查看>>