zoukankan      html  css  js  c++  java
  • 前端_day06_CSS选择器

    css样式表

    一.基本选择器

      1.标签选择器:<style>标签名{stylesheet......}</style>

      2.ID选择器:<style>#ID名{stylesheet......}</style>

      3.类选择器:<style>.类名{stylesheet......}</style>

      4.通配符选择器:<style>*{stylesheet......}</style>

      5.伪类选择器:选择的是标签的状态,常见的a标签

            <style>

                a:link{stylesheet......}     //链接还没被点击

                a:visited{stylesheet......}  //访问过这个链接

                a:hover{stylesheet......}    //鼠标放在上面悬停

                a:active{stylesheet......}   //鼠标按住不松手

            </style>

            <style>

                标签选择器:first-child{stylesheet......}  //选择标签选择器中的第一个元素

                标签选择器:first-line{stylesheet......}   //设置第一行样式

                标签选择器:first-letter{stylesheet......}   //设置第一个字符的样式

                标签选择器:before{content:URL( address )} //引用网络的样式表

            </style>

    二.复合选择器

      1.交集选择器:多个选择器用+号连接;<style>.class+div{stylesheet......}</style>

      2.并集选择器:多个选择器用,号连接;<style>div,span{stylesheet......}</style>

      3.子代选择器:多个选择器用>连接;<style>div>#ID{stylesheet......}</style>

      4.后代选择器:多个选择器用空格连接;<style>div .class{stylesheet......}</style>

    三.CSS代码插入形式

      1.行内样式css样式表就是把css代码直接写在现有的HTML标签中

      2:嵌入式,嵌入式css样式,就是可以把css样式代码写在head中<style type="text/css">XXX</style>标签之间。

      3:外连式css样式,写在单独的一个文件中.

        样例:引用阿里云矢量图标库

        外联式的引用:<link  rel="stylesheet" href="//at.alicdn.com/t/font_656651_w6yflbuqhrsk0529.css">

        <i class="icon iconfont">&#xe679;</i>

        <i class="iconfont icon-tiaoxingtu"></i>

    四.CSS三大特性

      
      1.层叠性:当多个样式作用于同一个标签时,样式发生了冲突,总是执行后面的样式而与这些样式调用的顺序无关,可以认为后面的样式叠在了前面的样式上
      2.继承性:内部标签可以继承外部标签的样式但是只能继承文字相关的样式,文字颜色,大小等特殊的:h标签无法继承文字大小a标签,无法继承文字颜色
      3.优先级:当多个选择器作用在同一个标签上时,然后又设置了相同的属性,如何层叠就是由优先级确定的
        1).如果是间接选中(继承来的)那么谁离得近就使用谁的
        2).如果是直接选中并且选择器类型一样,那么谁写在后面就用谁的
        3).如果直接选中,并且类型还不一样,那么就会按选择器优先级来确定
      important>行内样式>id选择器>类选择器>标签选择器>通配符选择器>继承如果我们想提高某个样式的优先级,可以使用!important
        1.它只能修饰属性
        2.需要写在;前面
        3.通配符选择器也可以使用

  • 相关阅读:
    相信未来 ————11月份做题记录
    noi 滚cu后7月oi生活
    博客已经迁移到 http://imbotao.top 也会同步到这儿
    构建第一个SpringBoot工程
    Spring 事务管理
    IntelliJ IDEA 使用技巧
    JS 获取字符串实际长度
    读《程序员修炼之道》
    读《如何高效学习》
    SQL 语句优化方法
  • 原文地址:https://www.cnblogs.com/memo-song/p/8992277.html
Copyright © 2011-2022 走看看