zoukankan      html  css  js  c++  java
  • css中的选择器

    1.在html中引入css的方法:四种方式:

      a.行内式(也称内联式) 如:

               <h1 style="color:red;test</h1>

      b.内嵌式

               <style type="text/css">

                   h1{

                             color:red;

                              font-size: 10.5pt; font-family: Calibri, sans-serif; line-height: normal; widows: auto;">                 }

               </style>

      c.导入式

                <style type="text/css"> @import"mystyle.css";</style>

      d.链接式

             <link href="mystyle.css" rel="stylesheet" type="text/css"/>

    2.css选择器:包括基本选择器和复合选择器

     

       基本的CSS选择器: 如 h1{color:red;font-size:25px;}这里h1为选择器名称,color和font-size为属性而red和25px为值。

       基本的CSS选择器包括标记选择器,类选择器和ID选择器。

     

          标记选择器:由html的标记构成css的选择器名称,如上例子说描述。

          类选择器:可以应用于不同的元素。 例如<p>元素和<h>元素可以共用类选择器。

          ID选择器:和类选择器一样,由开发者命名。id选择器只能赋给一个元素。

     

          类别选择器定义的时候以 .开始  在元素中通过class属性来应用.

          ID选择器定义的时候以 # 开始 在元素中通过id来应用。

     

        注意:类选择器和ID选择器的优先级大于标记选择器。

     

        复合选择器:

        "交集"选择器:

              div.special{...}

              div#special{...}

              "交集"选择器是指:以一个标记选择器开始 后面跟着一个类选择器或ID选择器, 它表示必须满足标记选择器的标记,同时必须声明了后面的类别或ID。

     

         "并集"选择器:

                  div,h1.first,p.specia{...} 

             多个选择器通过逗号相连,只要满足其中任一个选择器的元素都会被选中。

     

         "后代选择器":

                  div h1.first span.firstLetter{......}

              多个选择器通过空格相连,表示同时满足所有的选择器的元素会被选中。

     

         css的继承特性:当使用CSS对某一个元素设置以后,这样的一个设置会对该元素产生作用,以及对该元素所有的子元素产生作用.(文档结构对象模型DOM)

         css的层叠特性:解决样式的重叠现象。

                        规则:  行内样式>ID样式>类别样式>标记样式

     

     

     

            

  • 相关阅读:
    Laravel 静态资源管理及表单布局
    Laravel 中间件的使用(前置与后置)
    Laravel 中的模板中的url
    Laravel 基础语法和include的使用
    Laravel模板的继承
    Laravel的路由、控制器和模型
    用composer安装laravel
    vue cli3.0 给路径起别名 vue.config.js ;代码统一风格 .editorconfig
    github的使用
    Java学习的第十二天
  • 原文地址:https://www.cnblogs.com/fjhh/p/5370544.html
Copyright © 2011-2022 走看看