zoukankan      html  css  js  c++  java
  • 前端css常用的选择小汇

    要使用css对HTML页面中的元素实现一对一,一对多或者多对一的控制,这就需要用到CSS选择器。选择器就是选择器用来指定样式的作用范围。

    类选择器:

    类选择器在css中比较常见,首先要在普通标签中设置一个类,类名不可为中文,然后在 style 标签中添加该类名的样式。类选择器在选择器前要加一个点”.”

    例子:

    <head>
    <style type="text/css">
    .shasha{
        color:red;
        font-size:20px;    
    }
    <style>
    </head>
    <body>
        <h1 class="shasha">标题</h1>
        <p class="shasha">第一段</p>
        <p> 第二段</p>
    </body>
    

    样式会作用于class类型为shasha的标签内容上,类名可以随便取,别用中文。

    ID选择器

    ID选择器与类选择器大致相同,不同的是:

    • ID选择起标签内部指定ID;
    • ID选择器前面不用点”.”,而用井号”#”
    • ID选择器只能起一个ID名;类选择器可以起多个类名。

    例子:

    <head>
    <style type="text/css">
    #shasha2{
        color:red;
        font-size:20px;    
    }
    <style>
    </head>
    <body>
        <h1 id="shasha2">标题</h1>
        <p id="shasha2">第一段</p>
        <p> 第二段</p>
    </body>
    

    子选择器:

    小于这个类的子标签

    例子:

    .shasha>li{
        border:1px solid red;
    }
    

    所有后代标签选择器

    小于号代表第一个后代,空格可以指定其所有后代标签

    例子:

    .shasha li{
        border:1px solid red;
    }
    

    通用选择器

    通用选择器,选择html文档中的所有标签。

    *{
        border:1px solid red;
        font-size:20px;
    }
    

    伪类选择符

    给标签的某一个状态设定一个类,例如超链接标签可以设置为鼠标停留后显示别的颜色。
    最常用的也就是a:hover

    a:hover{
        color:red;
        font-size:20px;    
    }
    

    分组选择符

    选择符中间以逗号隔开,等于同时给多个选择符添加样式

    .shasha,#shasha2 span{
        color:red;
    }
    

    标签选择器:

    直接以html中的标签作为选择器:如果设置 HTML 的样式,选择器通常将是某个 HTML 元素,比如 p、h1、em、a,甚至可以是 html 本身,也称元素选择器

    <style tye="text/css">
    p{
        font-size:12px;
        line-height:1.6em;
    }
    html {color:black;}
    h1 {color:blue;}
    h2 {color:silver;}
    </style>
    

    总结:

    1. 普通标签选择:以html中的标签选择
    2. 类选择器:给标签添加一个类属性,根据类属性添加样式,可以使用多个类名,多次使用
    3. ID选择器:给标签添加一个ID属性,ID必须是要唯一的,一个文档只能使用一次ID选择器。
    4. 子选择器:用小于号分隔,指其选择器中的子标签
    5. 包含选择器:用空格分隔,指其选择器中的所有后代标签
    6. 通用选择器:对html中所有的标签有效
    7. 伪类选择器:给标签的一个动作添加一个选择器
    8. 分组选择器:逗号分隔,同时作用给多个标签

    CSS 选择器参考手册:http://www.w3school.com.cn/cssref/css_selectors.asp

    原文作者:祈澈姑娘
    原文链接:https://www.jianshu.com/u/05f416aefbe1
    创作不易,转载请告知

    90后前端妹子,爱编程,爱运营,爱折腾。
    坚持总结工作中遇到的技术问题,坚持记录工作中所所思所见,欢迎大家一起探讨交流。
    有个很难涨粉的的公众号叫:【编程微刊】

    文末福利:

    福利一:前端,Java,产品经理,微信小程序,Python等资源合集大放送:https://www.jianshu.com/p/e8197d4d9880
    福利二:微信小程序入门与实战全套详细视频教程

    image

    领取方式:
    如果需要学习视频,欢迎关注 【编程微刊】微信公众号,回复【领取资源】一键领取以下所有干货资源,获取更多有用技术干货、文档资料。所有文档会持续更新,欢迎关注一起成长!

    原文作者:祈澈姑娘
    原文链接:https://www.jianshu.com/u/05f416aefbe1
    创作不易,转载请告知

    90后前端妹子,爱编程,爱运营,爱折腾。
    坚持总结工作中遇到的技术问题,坚持记录工作中所所思所见,欢迎大家一起探讨交流。

  • 相关阅读:
    DataSet & DataTable &DataRow 深入浅出(转)
    使用三种方式搭建IIS web 网站
    淘宝系App图片为什么在北京电信网络加载这么慢?
    面向新手的Web服务器搭建(一)——IIS的搭建
    Ajax请求中的async:false/true的作用
    .net SerialPort
    .net常用属性
    Active Directory 常用属性
    .net加密
    MongoDb
  • 原文地址:https://www.cnblogs.com/wangting888/p/9701712.html
Copyright © 2011-2022 走看看