前端_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.通配符选择器也可以使用

原文地址:https://www.cnblogs.com/memo-song/p/8992277.html