精华内容
下载资源
问答
  • ElementUI Select选择器下拉框样式修改

    千次阅读 2020-10-12 14:07:14
    Select选择器下拉框样式无法修改原因 通过Dom元素可以发现,官方Select选择器下拉框是直接插入body...在Select选择器上,添加 :popper-append-to-body=“false” <el-select v-model="tableData[scope.$index].typ

    Select选择器下拉框样式无法修改原因

    通过Dom元素可以发现,官方Select选择器下拉框是直接插入body标签中,与最外级div同级,所以在Vue中无论怎么写css都无法覆盖到下拉框样式。
    在这里插入图片描述

    在ElementUI官方文档中,查找到一个属性:popper-append-to-body(默认值是 true)。

    在这里插入图片描述
    在Select选择器上,添加

    :popper-append-to-body=“false”

    <el-select v-model="tableData[scope.$index].type"
               placeholder="请选择"
               :popper-append-to-body="false"
               popper-class="select-popper"
               @change="showTableDate(scope)">
      <el-option
        v-for="item in 4"
        :key="item.value"
        :label="item.label"
        :value="item.value">
      </el-option>
    </el-select>
    

    从Dom元素中可以看出,这次下拉框元素被直接插入到 el-select 标签内,可以编写css去覆盖样式了。
    在这里插入图片描述

    展开全文
  • CSS内嵌样式选择器是通过使用style标签写在head里的 选择器一共有9种: 1、标签选择器:是指通过元素的标签名字来选中元素 从而设置...3、类(class)选择器元素设置class及属性值,通过class的值来选择元素(...

    CSS内嵌样式的选择器是通过使用style标签写在head里的
    选择器一共有9种:
    1、标签选择器:是指通过元素的标签名字来选中元素 从而设置样式
    语法结构:元素标签名{属性:属性值;属性:属性值}

    2、id选择器:通过id选择器选择元素的结构(只可选一个)
    语法结构:#id的值{属性:属性值;属性:属性值}

    3、类(class)选择器:给元素设置class及属性值,通过class的值来选择元素(可选多个)
    语法结构:.class的值{属性:属性值;属性:属性值}

    4、后代选择器(用空格隔开)
    li和a都是ul的后代
    语法结构:ul li{属性:属性值;属性:属性值}
    ul a{属性:属性值;属性:属性值}

    <ul>
    	<li>
    		<a></a>
    	</li>
    	<div></div>
    </ul>
    

    5、子代选择器(用">"隔开)(如代码块)
    语法结构:ul>li>a{属性:属性值;属性:属性值}

    6、相邻兄弟选择器(用"+"隔开)(如代码块)
    语法结构:li+div{属性:属性值;属性:属性值}

    7、组合选择器(用“,”隔开)
    语法结构:.div_01,.div_02{属性:属性值;属性:属性值}

    8、*伪类选择器
    语法结构:元素名称:hover属性{属性:属性值;属性:属性值}
    link 未访问的链接
    visited 已访问的链接
    hover 鼠标滑过的链接
    active 已选中的链接

    9、伪元素选择器
    语法结构:
    (1)属性:before{content:" ";属性:属性值;属性:属性值}(重点:必须添加content属性)
    first-line 首行
    first-letter 首字母
    before 元素之前
    ofter 元素之后
    (2)E:nth-child(n){属性:属性值;属性:属性值} // 表示 选择第几个子元素
    E:nth-last-child(n){…} // 表示 选择倒数第几个子元素
    E:nth-child(2n-1){…} // 表示 所有奇数行
    E:nth-child(2n){…} // 表示 所有偶数行
    E:nth-child(-1n+5){…} // 表示 前五个
    E:nth-last-child(-1n+5){…} // 表示 后五个
    E:nth-child(2n-1){…} // 表示 所有奇数行
    first-child 第一个
    last-child 最后一个

    展开全文
  • CSS 选择所有子元素添加样式

    万次阅读 2018-09-26 20:40:15
    一开始纳闷CSS中到底有没有这种选择全部子元素的选择器呢,后来看了下文档,发现虽然没有,但是最基本的方法人家已经告诉你了,剩下的就靠你自己的造化了(看你会不会变通使用!) 教程OS:“方法都在这了,会...

    方法:> *

    以实际项目中less为例:

    .lk-toolbar {
        .el-input {
            width: 169px;
            margin-right: 10px;
        }
        > * {
            margin-bottom: 20px;
        }
    }

    上面代码成功实现了 .lk-toolbar 下一切子元素的 margin-bottom: 20px 

    这么一来避免罗列各种可能出现的子元素类型,傻逼式操作:

    .lk-toolbar {
        .el-input {
            width: 169px;
            margin-right: 10px;
            margin-bottom: 20px;
        }
        .el-button, .el-date-editor {
            margin-bottom: 20px;
        }
    }

    应用场景(效果):

     

    感悟(废话):

    一开始纳闷CSS中到底有没有这种选择全部子元素的选择器呢,后来看了下文档,发现虽然没有,但是最基本的方法人家已经告诉你了,剩下的就靠你自己的造化了(看你会不会变通使用!)

    教程OS:“方法都在这了,会不会用就看你自己了。”

     

     

    展开全文
  • 03-CSS样式表和选择器

    千次阅读 2019-10-06 14:47:30
    CSS四种基本选择器:标签选择器、类选择器、ID选择器、通用选择器 CSS几种扩展选择器:后代选择器、交集选择器、并集选择器 CSS样式优先级 前言 现在的互联网前端分三层: HTML:超文本标记语言。从语义的角度描述...

    本文主要内容

    • CSS概述
    • CSS和HTML结合的三种方式:行内样式表内嵌样式表外部样式表
    • CSS四种基本选择器:标签选择器类选择器ID选择器通用选择器
    • CSS几种扩展选择器:后代选择器交集选择器并集选择器
    • CSS样式优先级

    前言

    现在的互联网前端分三层:

    • HTML:超文本标记语言。从语义的角度描述页面结构
    • CSS:层叠样式表。从审美的角度负责页面样式
    • JS:JavaScript 。从交互的角度描述页面行为

    CSS 概述

    CSS:Cascading Style Sheet,层叠样式表。CSS的作用就是给HTML页面标签添加各种样式,定义网页的显示效果。简单一句话:CSS将网页内容和显示样式进行分离,提高了显示功能。

    css的最新版本是css3,我们目前学习的是css2.1。 因为css3和css2.1不矛盾,必须先学2.1然后学3。

    接下来我们要讲一下为什么要使用CSS。

    HTML的缺陷:

    1. 不能够适应多种设备
    2. 要求浏览器必须智能化足够庞大
    3. 数据和显示没有分开
    4. 功能不够强大

    CSS 优点:

    1. 使数据和显示分开
    2. 降低网络流量
    3. 使整个网站视觉效果一致
    4. 使开发效率提高了(耦合性降低,一个人负责写html,一个人负责写css)

    比如说,有一个样式需要在一百个页面上显示,如果是html来实现,那要写一百遍,现在有了css,只要写一遍。现在,html只提供数据和一些控件,完全交给css提供各种各样的样式。

    CSS的重点知识点

    盒子模型、浮动、定位

    CSS 整体感知

    我们先来看一段简单的css代码:

    <!DOCTYPE html>
    <html lang="en">
    <head>
    	<meta charset="UTF-8">
    	<title>Document</title>
    	<style>
    		p{
    			color:red;
    			font-size: 30px;
    			text-decoration: underline;
    			font-weight: bold;
    			text-align: center;
    			font-style: italic;
    		}
    		h1{
    			color:blue;
    			font-size: 50px;
    			font-weight: bold;
    			background-color: pink;
    		}
    
    	</style>
    </head>
    <body>
    	<h1>我是大标题</h1>
    	<p>
    		我是内容
    	</p>
    
    </body>
    </html>
    

    解释如下:

    在这里插入图片描述

    我们写css的地方是style标签,就是“样式”的意思,写在head里面。后面的课程中我们将知道,css也可以写在单独的文件里面,现在我们先写在style标签里面。

    如果在sublime中输入<st或者<style然后按tab键,可以自动生成的格式如下:(建议)

    	<style type="text/css"></style>
    

    type表示“类型”,text就是“纯文本”,css也是纯文本。

    但是,如果在sublime中输入st或者style然后按tab键,可以自动生成的格式如下:(不建议)

    	<style></style>
    

    css对换行不敏感,对空格也不敏感。但是一定要有标准的语法。冒号,分号都不能省略。

    CSS语法

    语法格式:(其实就是键值对)

    选择器{
    	属性名: 属性值;
    	属性名: 属性值;
    }
    

    或者可以写成:

    选择器{
    	k:v;
    	k:v;
    	k:v;
    	k:v;
    }
    选择器{
    	k:v;
    	k:v;
    	k:v;
    	k:v;
    }
    

    解释:

    • 选择器代表页面上的某类元素,选择器后一定是大括号。
    • 属性名后必须用冒号隔开,属性值后用分号(最后一个属性可以不用分号)。
    • 属性名和冒号之间最好不要有空格(经验)。
    • 如果一个属性有多个值的话,那么多个值用 空格 隔开

    举例:

    p{color: red;}
    

    完整版代码举例:

    <style type="text/css">
    	p{
    		font-weight: bold;
    		font-style: italic;
    		color: red;
    	}
    
    </style>
    
     <body>
    	<p>洗白白</p>
    	<p>你懂得</p>
    	<p>我不会就这样轻易的狗带</p>
     </body>
    

    效果:

    在这里插入图片描述

    css代码的注释

    格式:

    <style type="text/css">
    
    	/*
    		具体的注释
    	*/
    
    	p{
    		font-weight: bold;
    		font-style: italic;
    		color: red;
    	}
    
    </style>
    

    注意:CSS只有/* */这种注释,没有//这种注释。而且注释要写在<style>标签里面才算生效哦。

    接下来,我们要开始真正地讲css的知识咯。

    css怎么学?CSS有两个知识部分:
    1) 选择器,怎么选;
    2) 属性,样式是什么

    CSS的一些简单常见的属性

    我们先来接触CSS的一些简单常见的属性,因为接下来需要用到。后期会专门用一篇文章来写CSS的属性。

    以下属性值中,括号中的内容表示sublime中的快捷键。

    字体颜色:(c)

    color:red;
    

    color属性的值,可以是英语单词,比如red、blue、yellow等等;也可以是rgb、十六进制(后期详细讲)。

    字号大小:(fos)

    font-size:40px;
    

    font就是“字体”,size就是“尺寸”。px是“像素”。单位必须加,不加不行。

    背景颜色:(bgc)

    background-color: blue;
    

    background就是“背景”。

    加粗:(fwb)

    font-weight: bold;
    

    font是“字体” weight是“重量”的意思,bold粗。

    不加粗:(fwn)

    font-weight: normal;
    

    normal就是正常的意思。

    斜体:(fsi)

    font-style: italic;
    

    italic就是“斜体”。

    不斜体:(fsn)

    font-style: normal;
    

    下划线:(tdu)

    text-decoration: underline;
    

    decoration就是“装饰”的意思。

    没有下划线:(tdn)

    text-decoration:none;
    

    PS:css没啥难的,就是要把属性给记忆准确。

    CSS和HTML结合的方式(样式表)

    CSS和HTML结合的方式,其实就是问你css的代码放在哪里比较合适。CSS代码理论上的位置是任意的,但通常写在<style>标签里。只要是<style>标签里的代码,那就是css代码,浏览器就是这样来进行解析的。

    CSS和HTML的结合方式有3种:

    • 行内样式:在某个特定的标签里采用style属性。范围只针对此标签。
    • 内嵌样式表:在页面的head里采用<style>标签。范围针对此页面。
    • 引入外部样式表css文件的方式。这种方式又分为两种:
      • 1、采用<link>标签。例如:<link rel = "stylesheet" type = "text/css" href = "a.css"></link>
      • 2、采用import,必须写在<style>标签中,并且必须是第一句。例如:@import url(a.css) ;

    两种引入样式方式的区别:外部样式表中不能写标签,但是可以写import语句。

    下面来详细的讲一讲这三种方式。

    1、CSS和HTML结合方式一:行内样式

    采用style属性。范围只针对此标签适用。

    该方式比较灵活,但是对于多个相同标签的同一样式定义比较麻烦,适合局部修改。

    举例:

    <p style="color:white;background-color:red">我不会就这样轻易的狗带</p>
    

    效果:

    在这里插入图片描述

    2、CSS和HTML结合方式二:内嵌样式表

    在head标签中加入<style>标签,对多个标签进行统一修改,范围针对此页面。

    该方式可以对单个页面的样式进行统一设置,但对于局部不够灵活。

    举例:

    <style type="text/css">
        p{
            font-weight: bold;
            font-style: italic;
            color: red;
        }
    
    </style>
    
    
    
     <body>
    	<p>洗白白</p>
    	<p style="color:blue">你懂得</p>
     </body>
    

    在这里插入图片描述

    3、CSS和HTML结合方式三:引入外部样式表css文件

    引入样式表文件的方式又分为两种:

    • (1)采用<link>标签。例如:<link rel = "stylesheet" type = "text/css" href = "a.css"></link>

    • (2)采用import,必须写在<style>标签中,并且必须是第一句。例如:@import url(a.css) ;

    两种引入样式方式的区别:外部样式表中不能写标签,但是可以写import语句。

    具体操作如下:
    我们先在html页面的同级目录下新建一个a.css文件,那说明这里面的代码全是css代码,此时就没有必要再写<style>标签这几个字了。
    a.css的代码如下:

    p{
    	border: 1px solid red;
    	font-size: 40px;
    }
    

    上方的css代码中,注意像素要带上px这个单位,不然不生效。
    然后我们在html文件中通过<link>标签引入这个css文件就行了。效果如下:

    在这里插入图片描述

    这里再讲一个补充的知识:link标签的rel属性
    <link>标签的rel属性:
    其属性值有以下两种:

    • stylesheet:定义的样式表
    • alternate stylesheet:候选的样式表

    看字面意思可能比较难理解,我们来举个例子,一下子就明白了。
    举例:

    现在定义我们来定义3种样式表:
    a.css:定义一个实线的黑色边框

    div{
    	width: 200px;
    	height: 200px;
    	border: 3px solid black;
    }
    

    ba.css:蓝色的虚线边框

    div{
    	width: 200px;
    	height: 200px;
    	border: 3px dotted blue;
    }
    

    c.css:来个背景图片

    div{
    	width: 200px;
    	height: 200px;
    	border: 3px solid red;
    	background-image: url("1.jpg");
    }
    

    然后我们在html文件中引用三个样式表:

      <link rel = "stylesheet" type = "text/css" href = "a.css"></link>
      <link rel = "alternate stylesheet" type = "text/css" href = "b.css" title="第二种样式"></link>
      <link rel = "alternate stylesheet" type = "text/css" href = "c.css" title="第三种样式"></link>
    

    上面引入的三个样式表中,后面两个样式表作为备选。注意备选的样式表中,title属性不要忘记写,不然显示不出来效果的。现在来看一下效果:(在IE中打开网页)

    CSS的四种基本选择器

    CSS选择器:就是指定CSS要作用的标签,那个标签的名称就是选择器。意为:选择哪个容器。

    CSS的选择器分为两大类:基本选择题和扩展选择器。

    基本选择器:

    • 标签选择器:针对一类标签
    • ID选择器:针对某一个特定的标签使用
    • 类选择器:针对你想要的所有标签使用
    • 通用选择器(通配符):针对所有的标签都适用(不建议使用)

    下面来分别讲一讲。

    1、标签选择器:选择器的名字代表html页面上的标签

    标签选择器,选择的是页面上所有这种类型的标签,所以经常描述“共性”,无法描述某一个元素的“个性”。

    举例:

    p{
    	font-size:14px;
    }
    

    上方选择器的意思是说:所有的<p>标签里的内容都将显示14号字体。

    效果:

    在这里插入图片描述

    再比如说,我想让“生命壹号学完了安卓,继续学前端哟”这句话中的“前端”两个变为红色字体,那么我可以用<span>标签把“前端”这两个字围起来,然后给<span>标签加一个标签选择器。

    代码如下:

    <!DOCTYPE html>
    <html lang="en">
    <head>
    	<meta charset="UTF-8">
    	<title>Document</title>
    	<style type="text/css">
    		span{
    			color: red;
    		}
    	</style>
    </head>
    <body>
    	<p>生命壹号学完了安卓,继续学<span>前端</span></p>
    </body>
    </html>
    

    【总结】需要注意的是:

    (1)所有的标签,都可以是选择器。比如ul、li、label、dt、dl、input。

    (2)无论这个标签藏的多深,一定能够被选择上。

    (3)选择的所有,而不是一个。

    2、ID选择器:规定用#来定义

    针对某一个特定的标签来使用,只能使用一次。css中的ID选择器以”#”来定义。

    举例:

    #mytitle{
    	border:3px dashed green;
    }
    

    效果:

    在这里插入图片描述

    id选择器的选择符是“#”。

    任何的HTML标签都可以有id属性。表示这个标签的名字。这个标签的名字,可以任取,但是:

    • (1)只能有字母、数字、下划线。
    • (2)必须以字母开头。
    • (3)不能和标签同名。比如id不能叫做body、img、a。

    另外,特别强调的是:HTML页面,不能出现相同的id,哪怕他们不是一个类型。比如页面上有一个id为pp的p,一个id为pp的div,是非法的!

    一个标签可以被多个css选择器选择:

    比如,我们可以同时让标签选择器和id选择器作用于同一个标签。如下:

    在这里插入图片描述

    然后我们通过网页的审查元素看一下效果:
    在这里插入图片描述
    现在,假设选择器冲突了,比如id选择器说这个文字是红色的,标签选择器说这个文字是绿色的。那么听谁的?
    实际上,css有着非常严格的计算公式,能够处理冲突.

    一个标签可以被多个css选择器选择,共同作用,这就是“层叠式”的第一层含义(第一层含义和第二层含义,放到css基础的第三篇文章里讲)。

    3、类选择器:规定用圆点.来定义

    、针对你想要的所有标签使用。优点:灵活。

    css中用.来表示类。举例如下:

    .one{
    	width:800px;
    }
    
    

    效果:

    在这里插入图片描述

    和id非常相似,任何的标签都可以携带id属性和class属性。class属性的特点:

    • 特性1:类选择器可以被多种标签使用。

    • 特性2:同一个标签可以使用多个类选择器。用空格隔开。举例如下:(正确)

    <h3 class="teshu  zhongyao">我是一个h3啊</h3>
    

    初学者常见的错误,就是写成了两个class。举例如下:(错误)

    <h3 class="teshu" class="zhongyao">我是一个h3啊</h3>
    

    类选择器使用的举例:

    类选择器的使用,能够决定一个人的css水平。

    比如,我们现在要做下面这样一个页面:

    在这里插入图片描述

    正确的思路,就是用所谓“公共类”的思路,就是我们类就是提供“公共服务”,比如有绿、大、线,一旦携带这个类名,就有相应的样式变化。对应css里的代码如下:

    	<style type="text/css">
    		.lv{
    			color: green;
    		}
    		.da{
    			font-size: 30px;
    		}
    		.underline{
    			text-decoration: underline;
    		}
    	</style>
    

    然后让每个标签去选取自己想要用的类选择器:

        <p class="lv da">段落1</p>
    	<p class="lv xian">段落2</p>
    	<p class="da xian">段落3</p>
    

    也就是说:

    (1)不要去试图用一个类名,把某个标签的所有样式写完。这个标签要多携带几个类,共同完成这个标签的样式。

    (2)每一个类要尽可能小,有“公共”的概念,能够让更多的标签使用。

    问题:到底用id还是用class?

    答案:尽可能的用class,除非极特殊的情况可以用id。

    原因:id是js用的。也就是说,js要通过id属性得到标签,所以css层面尽量不用id,要不然js就很别扭。另一层面,我们会认为一个有id的元素,有动态效果。

    举例如下:

    在这里插入图片描述

    上图所示,css和js都在用同一个id,会出现不好沟通的情况。

    我们记住这句话:类上样式,id上行为。意思是说,class属性交给css使用,id属性交给js使用。

    上面这三种选择器的区别:

    • 标签选择器针对的是页面上的一类标签。
    • ID选择器是只针对特定的标签(一个),ID是此标签在此页面上的唯一标识。
    • 类选择器可以被多种标签使用。

    4、通配符*:匹配任何标签

    通用选择器,将匹配任何标签。不建议使用,IE有些版本不支持,大网站增加客户端负担。

    效率不高,如果页面上的标签越多,效率越低,所以页面上不能出现这个选择器。

    举例:

    *{
    	margin-left:0px;
    	margin-top:0px;
    }
    
    

    效果:

    在这里插入图片描述

    CSS的几种高级选择器

    高级选择器:

    • 后代选择器:用空格隔开
    • 交集选择器:选择器之间紧密相连
    • 并集选择器(分组选择器):用逗号隔开
    • 伪类选择器

    下面详细讲一下这几种高级(扩展)选择器。

    1、后代选择器: 定义的时候用空格隔开

    对于E F这种格式,表示所有属于E元素后代的F元素,有这个样式。空格就表示后代。

    后代选择器,就是一种平衡:共性、特性的平衡。当要把某一个部分的所有的什么,进行样式改变,就要想到后代选择器。

    后代选择器,描述的是祖先结构。

    看定义可能有点难理解,我们来看例子吧。

    举例1:

    	<style type="text/css">
    		.div1 p{
    			color:red;
    		}
    	</style>
    

    空格就表示后代。.div1 p 表示.div1的后代所有的p

    这里强调一下:这两个标签不一定是连续紧挨着的,只要保持一个后代的关联即可。也就是说,选择的是后代,不一定是儿子。

    举例:

    	<style type="text/css">
    		h3 b i{
    			color:red ;
    		}
    	</style>
    

    上方代码的意思是说:定义了<h3>标签中的<b>标签中的<i>标签的样式。
    同理:h3和b和i标签不一定是连续紧挨着的,只要保持一个后代的关联即可。

    效果:

    在这里插入图片描述

    或者还有下面这种写法:

    在这里插入图片描述
    上面的这种写法,<h3>标签和<i>标签并不是紧挨着的,但他们保持着一种后代关系。

    还有下面这种写法:(含类选择器、id选择器都是可以的)

    在这里插入图片描述
    我们在开头说了:后代选择器,描述的是一种祖先结构。我们举个例子来说明这句话:

    <!DOCTYPE html>
    <html lang="en">
    <head>
    	<meta charset="UTF-8">
    	<title>Document</title>
    	<style type="text/css">
    		div div p{
    			color: red;
    		}
    	</style>
    </head>
    <body>
    	<div>
    		<div class="div2">
    			<div class="div3">
    				<div class="div4">
    					<p>我是什么颜色?</p>
    				</div>
    			</div>
    		</div>
    	</div>
    </body>
    </html>
    

    上面css中的div div p,也能使文字的颜色变红。通过浏览器的审查元素,我们可以看到 p元素的祖先列表:

    在这里插入图片描述

    讲到这里,我们再提一个sublme的快捷键。

    在sublime中输入p#haha,按tab键后,会生成<p id="haha"></p>

    在sublime中输入p.haha,按tab键后,会生成<p class="haha"></p>

    2、交集选择器:定义的时候紧密相连

    定义交集选择器的时候,两个选择器之间紧密相连。一般是以标签名开头,比如div.haha,再比如p.special

    如果后一个选择器是类选择器,则写为div.special;如果后一个选择器id选择器,则写为div#special

    来看下面这张图就明白了:

    在这里插入图片描述

    h3.special{
    	color:red;
    }
    

    选择的元素要求同时满足两个条件:必须是h3标签,然后必须是special标签。

    举例:

    <!DOCTYPE html>
    <html lang="en">
    <head>
    	<meta charset="UTF-8">
    	<title>交集选择器测试</title>
    	<style type="text/css">
    		h3.special {
    			color: red;
    		}
    
    	</style>
    </head>
    <body>
    	<h3 class="special zhongyao">标题1</h3>
    	<h3 class="special">我也是标题</h3>
    	<p>我是段落</p>
    </body>
    </html>
    

    效果如下:

    在这里插入图片描述

    注意,交集选择器没有空格。所以,没有空格的div.red(交集选择器)和有空格的div .red(后代选择器)不是一个意思。

    交集选择器可以连续交:(一般不要这么写)

    h3.special.zhongyao{
    	color:red;
    }
    

    上面这种写法,是 IE7 开始兼容的,IE6 不兼容。

    3、并集选择器:定义的时候用逗号隔开

    三种基本选择器都可以放进来。

    举例:

    p,h1,#mytitle,.one{
    	color:red;
    }
    

    效果:

    在这里插入图片描述

    一些 CSS3 选择器

    所有的css3选择器,我们放在HTML5和CSS3课上介绍。暂时先接触一部分。

    PS:我们可以用IETester这个软件测一下CSS在各个版本IE浏览器上的显示效果。

    浏览器的兼容性问题

    IE: 微软的浏览器,随着操作系统安装的。所以每个windows都有IE浏览器。各版本如下:

    • windows xp 操作系统安装的IE6
    • windows vista 操作系统安装的IE7
    • windows 7 操作系统安装的IE8
    • windows 8 操作系统安装的IE9
    • windows10 操作系统安装的edge

    浏览器兼容问题,要出,就基本上就是出在IE6、7身上,这两个浏览器是非常低级的浏览器。

    为了测试浏览器CSS 3的兼容性,我们可以在网上搜"css3 机器猫"关键字,然后在不同的浏览器中打开如下链接:

    测试结果如下:

    在这里插入图片描述

    我们可以在百度统计里查看浏览器的市场占有率:

    • IE9 5.94%
    • IE8 21.19%
    • IE7 4.79%
    • IE6 4.11%

    我们可以在http://html5test.com/results/desktop.html中查看

    在这里插入图片描述

    我们要知道典型的IE6兼容问题(面试要问),但是做项目我们兼容到IE8即可。不解决IE8以下的兼容问题,目的在于:培养更高的兴趣和眼光,别天天的跟IE6较劲。

    我们可以用「IETester」软件看看css在各个浏览器中的显示效果。

    1.子代选择器,用符号>表示

    IE7开始兼容,IE6不兼容。

    div>p{
    	color:red;
    }
    

    div的儿子p。和div的后代p的截然不同。

    能够选择:

    	<div>
    		<p>我是div的儿子</p>
    	</div>
    

    不能选择:

    	<div>
    		<ul>
    			<li>
    				<p>我是div的重孙子</p>
    			</li>
    		</ul>
    	</div>
    

    2.序选择器

    IE8开始兼容;IE6、7都不兼容

    设置无序列表<ul>中的第一个<li>为红色:

    	<style type="text/css">
    		ul li:first-child{
    			color:red;
    		}
    	</style>
    

    设置无序列表<ul>中的最后一个<li>为红色:

    		ul li:last-child{
    			color:blue;
    		}
    

    序选择器还有更复杂的用法,以后再讲。

    由于浏览器的更新需要过程,所以现在如果公司还要求兼容IE6、7,那么就要自己写类名:

    	<ul>
    		<li class="first">项目</li>
    		<li>项目</li>
    		<li>项目</li>
    		<li>项目</li>
    		<li>项目</li>
    		<li>项目</li>
    		<li>项目</li>
    		<li>项目</li>
    		<li>项目</li>
    		<li class="last">项目</li>
    	</ul>
    

    用类选择器来选择第一个或者最后一个:

    		ul li.first{
    			color:red;
    		}
    
    		ul li.last{
    			color:blue;
    		}
    

    3.下一个兄弟选择器

    IE7开始兼容,IE6不兼容。

    +表示选择下一个兄弟

    	<style type="text/css">
    		h3+p{
    			color:red;
    		}
    	</style>
    

    上方的选择器意思是:选择的是h3元素后面紧挨着的第一个兄弟。

        <h3>我是一个标题</h3>
    	<p>我是一个段落</p>
    	<p>我是一个段落</p>
    	<p>我是一个段落</p>
    	<h3>我是一个标题</h3>
    	<p>我是一个段落</p>
    	<p>我是一个段落</p>
    	<p>我是一个段落</p>
    	<h3>我是一个标题</h3>
    	<p>我是一个段落</p>
    	<p>我是一个段落</p>
    	<p>我是一个段落</p>
    	<h3>我是一个标题</h3>
    

    效果如下:

    在这里插入图片描述

    这种选择器作用不大。

    展开全文
  • JS如何操作class选择器样式

    千次阅读 2018-08-16 23:14:00
    JS如何操作class选择器样式 在学习前端的知识的时候,发现使用JS无法操作class选择器样式,刚开始还以为是js没有设置,只有在jquery可以操作呢? 看了一些相关文章才清楚: document....
  • 今天继上篇Qt 之 样式表的使用之设置样式的方法 ,来简单谈一谈Qt中样式选择器的一些用法。二、样式选择器我们先看一下Qt文档中对于不同选择器的解释:可以在Qt助手中输入 The Style Sheet Syntax 然后查看 Selector...
  • 很多时候,我们写网页样式时候会遇到如下面图这种的, 第4个li下面有一行虚线什么的,这样循环,那么,如何很方便的用css实现呢! 我们写的html代码 实例如下: class="list">  "#">1·...
  • 使用ID选择器来声明样式

    千次阅读 2018-05-03 22:07:18
    Use an ID Attribute to Style an Element和类选择器一样,你也可以使用ID选择器来声明样式。声明一个叫cat-photo-element的ID选择器 ,并设置背景色为绿色。:#cat-photo-element { background-color: green;}注意...
  • 伪类,用于向某些选择器添加特殊的效果。用伪类定义的样式并不是作用在标记上,而是作用在标记的状态上,如a标签的:hover,表单元素的:disabled。 元素,如div、p、h1等,是实实在在存在的元素。 伪元素,是html中不...
  • 解决ElementUI级联选择器的禁用样式问题发现问题解决写在最后 发现问题 最近我在项目中使用到了ElementUI级联选择器,不得不说ElementUI真的很强大(老师说在批评一个人的缺点之前需要先肯定他的优点,这样才不会被...
  • 某一类标签设置同一个样式使用类选择器;匹配所有元素使用通配选择器;群组选择器可以抽离相同样式;包含选择器给某元素的子元素设置样式;伪类选择器可以向超链接添加特殊效果;选择器优先级行内样式最高,通配...
  • .class1{ color:Red} .class2{ font-size:100px} $(function () { $("#btn1").click(function () { //当点击#btn1的时候#div1添加一个class2的样式 $("#div1").addClas
  • CSS入门基础(样式,css文件,选择器

    千次阅读 多人点赞 2020-10-27 20:16:34
    CSS入门学习CSS的简介基本用法元素添加样式1.行内样式2.内部样式3.外部样式 CSS的简介 层叠样式表(英文全称:Cascading Style Sheets)是一种用来表现HTML(标准通用标记语言的一个应用)或XML(标准通用标记语言的...
  • css选择器:修改样式 实现开关灯效果    开关灯效果    body  {  background: #FFF;  } .day {  background: #000; } .night {  background: #FFF; }     function Switch() { ...
  • CSS样式——选择器及其优先级

    千次阅读 2019-05-29 23:08:25
    选择器的作用就是将CSS样式和对应的需要修饰的标签关联起来,同时也增强了CSS代码的复用性,提高了代码效率。 首先来介绍基本的几个选择器 一、简单选择器 1、id选择器 <div id="only1"></div> id...
  • 今天做一个需求,用户针对老年人(看不起字),所以控件要求大一点,el-date-picker 日期选择器,官方没有的 api 中没有修改大小的字段,于是 自己研究了下,完美解决!! 在全局CSS文件中放置如下代码 .el-date-...
  • 主要内容 CSS概述 CSS和HTML结合的三种方式:行内样式表、内嵌样式表、外部样式表 CSS四种基本选择器:标签选择器、类选择器、ID选择器、通用选择...CSS的作用就是HTML页面标签添加各种样式,定义网页的显示效果
  • Android基于wheelView的自定义日期选择器(可拓展样式)

    万次阅读 热门讨论 2015-06-26 18:13:06
    基于wheelView的自定义日期选择器项目要求效果图:要求 “6月20 星期五” 这一项作为一个整体可以滑动,”7时”、”48分”分别作为一个滑动整体。系统自带的DatePicker、TimePicker大家都知道,只有这种效果:百度了...
  • CSS 选择器及各样式引用方式

    千次阅读 2015-08-26 17:31:55
     一个好的界面,是一个Web吸引人们最大的卖点。...1.选择器的分类 语法结构:   1.1 Id选择器 1.1.1 格式  #id :#+元素的id;id是区分大小写。 1.1.2 示例 #title1 {background-color:Blue;
  • 修改antd中选择器修改不了的样式

    千次阅读 2020-02-24 14:03:16
    直接添加样式进行修改 重点: 如果不能直接修改样式的组件,该怎么修改它的默认样式呢? 解决方案: 通过修改antd全局样式 F12打开控制台的审查元素,找到需要修改的元素 如图中箭头的选择器是antd的,我们的项目中...
  • CSS ID选择器与CLASS选择器

    千次阅读 2015-08-22 17:10:11
    在 CSS 中,选择器是一种模式,用于选择需要添加样式的元素。 属性选择器可以根据元素的属性及属性值来选择元素。  三种基本的选择器类型:标签名选择器、类选择器、ID选择器 具体语法如下:  1、标签名选择器,...
  • jQuery UI datepicker用beforeShowDay特殊日期添加样式以及常用的属性 第一篇博客,写的不好还请大家见谅哈,希望大家提出意见,以后改正 需要的依赖:  在jQuery UI官网上下载jQuery UI,下载网址为:...
  • 选择器3.ID选择器4.群组选择器5.通配符(全局)选择器6.后代选择器7.子选择器8.伪类选择器(1)链接伪类(2)伪类选择器的其他用法9.属性选择器10.选择器的优先级以及权重11.!important用法 一、什么是CSS? 1.CSS...
  • WXSS(WeiXin Style Sheets)是一套样式语言,用于描述 WXML 的组件样式。WXSS 用来决定 WXML 的组件应该怎么显示。为了适应广大的前端开发者,我们的 WXSS 具有 CSS 大部分特性。 同时为了更适合开发微信小程序,我们...
  • 正常情况下,写在下面的样式优先级高于上面的样式 demo1{ color:red; color:green; /*绿色的优先级高于红色,所有浏览器都会显示绿色*/ } 加了!important 那么它的优先级会比较高,ie6比较傻,不认识。 demo2...
  • element-ui是vue项目中常用的pc端ui组件库,但是其样式上可能与我们的项目需求有较大差异,通常使用自己的样式覆盖ui组件库样式以达到目的 方法1: 创建自定义样式文件 在main.js或app.vue中引入 ps:只适合做...
  • 1、内部样式、外部样式、内联样式 内联方式:样式定义在单个的HTML元素中 CSS语法:只需要将分号隔开的一个或多个属性/值对作为元素的style...样式表规则位于文档头中的元素内:在文档的元素内添加元素 在<style>
  •   在使用vue+element开发的时候由于项目需要,需要使用element日期选择器里面的支持多选以及跳选的日期选择器。   就是这货: code: &amp;lt;el-date-picker v-model=&quot;value13&quot; type=&...
  • 用CSSSVG 的内容添加样式

    万次阅读 2018-01-31 21:46:01
    使用元素实例化图标或任何其它的SVG元素或图像,元素添加样式时经常会碰到一些问题。这篇文章的目的是尽可能你介绍一些方法来解决:使用引入的内容添加样式受限的问题。 但是在开始之前,我们先快速浏览一下...
  • 【Qt】Qt样式表总结(一):选择器

    千次阅读 2018-08-31 18:18:08
    样式规则由选择器和声明组成。选择器指定受规则影响的部件;声明指定应在小部件上设置哪些属性。 如: QLabel { color: white; } QLabel为样式规则中的选择器,大括号中的 color: white; 为...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 196,899
精华内容 78,759
关键字:

给选择器添加样式