zoukankan      html  css  js  c++  java
  • Css基础(2)

    Day04 Css选择器与权重比较

    一、Css选择器

    上一章节已经讲解过了Css基础选择器。这一次我们将继续讲CSS的其他选择器。

    1. 后代选择器 div p
    2. 交集选择器 div.d1
    3. 并集选择器 div,p
    4. 子元素选择器 div>p
    5. 序列选择器 ul li:first-child、 ul:li:last-child
    6. 相邻兄弟选择器 div + p
    7. 普通兄弟选择器 div ~ p

    后代选择器选中标签所有后代:

    	/*后代选择器*/
    	.c1 span{
    		color: pink;
    	}  
    

    交集选择器选中两个集合(类、标签、某id)的交集部分,并集选择器则是选中两个集合的并集部分:

    	/*交集选择器*/
    	div.c2 {
    		color:purple;
    	}
    	/*并集选择器*/
    	.c3,.c4,.c5{
    		color: yellow;
    	}  
    

    子元素选择器是针对后代中的某一子元素进行选择,是具体的某一元素:

    	/*子元素选择器*/
    	#id2>em {
    		color:brown;
    	}
    

    序列选择器是针对序列中的第一元素和最后一个元素进行选择:

    	/*序列选择器*/
    	ul li:first-child{
    		color: pink;
    	}
    	ul li:last-child {
    		color: blue;
    	}
    

    普通兄弟选择器就是对同一级别的标签进行选择,而相邻选择器则是紧扣相邻两字对相邻的兄弟进行选择:

    	/*普通兄弟选择器*/
    	div ~ p {
    		color: red;
    	}
    	/*相邻兄弟选择器*/
    	div + p {
    		color: grey;
    	}
    

    自己敲代码进行验证是最稳妥的。

    权重比较

    层叠解决的是css冲突的问题。

    比较权重来解决层叠问题。
    Css中的权重比较主要遵循的规则如下图所示:

    当选中内容比较权重时按照id>class>html的原则进行比较。当碰到!important时,它能够把"单独属性"的权重变为无限大。使用需谨慎。

    行内元素与块级元素

    常见的块级元素:div 块级元素
    常见的行内元素:span 行内元素

    块级元素和行内元素的区别:

    1. 行内元素部不能够设置宽度和高度。行内元素的宽度和高度是标签内容的宽度和高度。块级元素可以设置宽度和高度。

    2. 块级元素会独占一行。而行内元素却部能够独占一行,只能和其他的行内元素共用一行。

    3. 如果块级元素不设置宽度,那么块级元素会自动的沾满父元素的全部宽度。

    块级元素和行内元素之间的转换利用 :display: inline block inlin-block

  • 相关阅读:
    uniapp 基于 flyio 的 http 请求封装
    微信小程序实现连续扫码功能(uniapp)
    定时器+echarts运行时间太长导致内存溢出页面崩溃
    vue2.0 + element ui 实现表格穿梭框
    js 不同时间格式介绍以及相互间的转换
    vue2.0+Element UI 表格前端分页和后端分页
    vue2.0 + Element UI + axios实现表格分页
    kafka能做什么?kafka集群配置 (卡夫卡 大数据)
    Java List和Map遍历的方法,forEach()的使用
    Flink 集群搭建,Standalone,集群部署,HA高可用部署
  • 原文地址:https://www.cnblogs.com/Itssyuu/p/7078916.html
Copyright © 2011-2022 走看看