CSS3的常用属性(一)

选择器

属性选择器(通过标签属性来选择)

  • E[attr]: 表示只要元素<E>存在属性attr就能被选中  如: div[class]
  • E[attr=val]: 表示元素<E>存在属性attr的值等于val,即可被选中  如: div[class="val"]
  • E[attr*=val]: 表示元素<E>存在属性attr的值包含val,且在任意位置  如: div[class*="text_val"]
  • E[attr^=val]: 表示元素<E>存在属性attr的值包含val,且在开始位置  如: div[class^="val_one"]
  • E[attr$=val]: 表示元素<E>存在属性attr的值包含val,且在结束位置  如: div[class$="two_val"]

伪类选择器

  • E:first-child: 选择所有元素的第一个子元素<E>(该伪类很容易让人误解,且是在CSS2中定义)
    • p:first-child  表示选择器匹配任何元素的第一个子元素<p>
    • p>i:first-child  表示选择器匹配所有<p>元素的第一个子元素<i>
    • p:first-child i  表示选择器匹配任何元素的第一个子元素<p>中的所有<i>元素
  • E:last-child: 选择元素的最后一个子元素(与E:first-child相似)
  • E:nth-child(n): 选择所有元素的子元素<E>,且<E>元素是符合n制定的规则的
    • E:nth-child(3): 选中第3个子元素<E>
    • E:nth-child(n): 选中全部的子元素<E>,因为n遵循线性变化,从0,1,2,3,4…… 当n<=0时,选取无效
    • E:nth-child(2n-1): 选中所有的奇数的<E>
    • E:nth-child(-n 5): 选中前5个<E>   注意: E:nth-child(5-n) 这样写是没有作用的
    • E:nth-last-child(-n 5): 选中后5个<E>
    • E:nth-child(even): 选中所有的偶数的子元素<E>  补充: E:nth-child(odd)  所有的奇数
  • E:empty: 选中没有任何内容的<E>元素,包括空格
  • E:target: 结合锚点进行使用,出于当前锚点的元素会被选中
  • E:not(selector): 除selector(任意选择器)外的元素都会被选中
  • 其他不常用伪类选择器如: :nth-of-type():nth-last-of-type():first-of-type:last-of-type:only-child:only-of-type

伪元素选择器

  • E::before,E::after: <E>元素内部的开始和结束创建一个元素,该元素是行内元素,且需结合content属性使用
    特别说明: 这两个选择器在旧版本当中是伪类选择器(不存在伪元素的概念),新版本下E:before,E:after会被自动识别为E::befote,E::after
  • E::first-letter: 文本的第一个字母或文字
  • E::first-line: 文本第一行
  • E::selection: 选中文本的样式

 

颜色

  • rgba(0,0,0,0.1): 色彩空间,一种新的颜色的表示方式,其中R(red),G(green),B(blue),A(alpha,不透明度)
  • hsla(200,,,1): H(hue,色调, 取值范围0~360,其中0/360表示红色,120表示绿色,240表示蓝色),S(saturation,饱和度,取值范围0%~100%),L(lightness,亮度,取值范围0%~100%),A(alpha,不透明度,取值范围0~1)
    补充: opacity(不透明度)只能针对整个盒子设置,子盒子及其内容会继承父盒子的不透明度,而rgba,hsla可应用于任何设置颜色的地方,且不具有继承性

 

文本阴影

  • text-shadow: 可分别设置偏移量,模糊度,颜色(可设透明度)
    • 水平偏移量:正值向右,负值向左
    • 垂直偏移量:正值向下,负值向上
    • 模糊度不能为负值
      举例说明:
      文字凸起:
      .tu{
      text-shadow: -1px -1px 1px #fff, 1px 1px 1px #000;      
      }
      .ao{
      text-shadow: -1px -1px 1px #000, 1px 1px 1px #fff;
      }

 

盒模型

  • box-sizing: css中通过box-sizing来指定盒子模型;box-sizing有两个值;分别是:
    • content-box: 盒子的实际宽度等于width值加上border值加上padding值,是默认值
    • border-box: 盒子的实际宽度等于设置的width值,即使定义了border和padding,也不会改变盒子的实际宽度

更多专业前端知识,请上 【猿2048】www.mk2048.com

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/361609.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

问题集锦

1、viewpager 用到了ViewPager&#xff0c;Android5.0.1&#xff0c;却额外在Build Path中引入了v4jar包&#xff0c;并且在“Order and Export”中勾选了此jar包&#xff0c;编译时出现错误&#xff1a; [2014-09-28 23:49:30 - Dex Loader] Unable to execute dex: Multiple …

ImageField,FileField上传文件命名问题

django 的models.ImageFiled,FileField有属性upload_to&#xff0c;该属性是指定将文件上传到服务器的位置&#xff0c;及存储在哪个文件夹下&#xff0c;你可以很方便甚至很少的代码就可以实现文件上传操作了。 但是默认的存储的文件名是没有改变的&#xff0c;也就是说所存储…

Spring靴子战争包装

Spring Boot建议在构建期间使用嵌入式容器&#xff08;tomcat或码头&#xff09;创建一个可执行jar&#xff0c;并在运行时将此可执行jar作为独立进程使用。 但是&#xff0c;通常将应用程序部署到外部容器上是很常见的&#xff0c;Spring Boot提供了打包应用程序的方式&#x…

递归函数

递归函数实在一个函数通过名字调用自身的情况下构成的。 1 window.onload function() {2 var a factorial;3 factorial null;4 alert(a(4));5 };6 7 /**8 * 叠乘9 * param {叠乘的基数} num n 10 * return {叠乘结果} n*(n-1)*(n-2)*...*1 11 */…

正则表达式及测试工具

1. 正则表达式 正则表达式&#xff1a;一种匹配文本中的字符序列的字符模式。在很多文本编辑器或其他工具里&#xff0c;正则表达式通常被用来检索或替换那些符合某种模式的文本内容。许多程序设计语言都支持利用正则表达式进行字符串操作。 一个正则表达式就是由普通字符&…

CCD与CMOS摄像头的区别

首先说一下在闭路电视监控中摄像机的CCD 和CMOS 的结构&#xff0c;ADC的位置和数量是最大的不同。简单的说&#xff0c;CCD每曝光一次&#xff0c;在快门关闭后进行像素转移处理&#xff0c;将每一行中每一个像素&#xff08;pixel&#xff09;的电荷信号依序传入“缓冲器”中…

Java注释教程– ULTIMATE指南(PDF下载)

编者注&#xff1a;在本文中&#xff0c;我们提供了全面的Java注释教程。 Java中的注释是一项主要功能&#xff0c;每个Java开发人员都应该知道如何使用它们。 我们在Java Code Geeks上提供了许多教程&#xff0c;例如创建自己的Java注释 &#xff0c; 带有自定义注释的Java注…

Jquery获取DOM绑定事件

获取到当前正在执行的事件&#xff1a; $(#testDive).bind(click, function(event){alert(event: event.type)}); 获取所有绑定事件&#xff1a; $._data(document.getElementById(testDive), events); 更多专业前端知识&#xff0c;请上 【猿2048】www.mk2048.com

laravel中的自定义函数的加载和第三方扩展库加载

一.自定义公共函数 1. 创建文件 app/Helpers/functions.php 2. 修改项目 composer.json 3.运行composer dump-auto 4.OK&#xff0c;然后你就可以在任何地方用到 app/Helpers/functions.php 中的函数了。 二.添加第三方扩展库 1.确定你要放第三方库的目录&#xff0c;比如还是刚…

Java EE 8发生了什么?

Java EE 8的工作进展顺利。 是时候赶上了&#xff01; 无需费力就可以潜入… 不要忘记Java EE 7….. 围绕三个重要主题 HTML 5对齐–用于WebSocket的Java API&#xff08;JSR 356&#xff09;&#xff0c;JSON处理&#xff08;JSR 353&#xff09;&#xff0c;JAX-RS 2.0&…

HDU 1312 Red and Black

这题就是比较水的一道搜索题了&#xff0c;BFS跟DFS都能做&#xff0c;直接看代码吧&#xff01; AC code&#xff1a; View Code 1 #include <iostream> 2 #define MAX 50 3 using namespace std; 4 int w, h; 5 char map[MAX][MAX]; 6 int dir[][2] {{0, 1}, {1, 0},…

HTML5新增属性学习笔记

1、form属性 表单内的从属元素&#xff0c;可以写在表单外部。可以通过指定元素的form属性来声明元素所属表单。form的属性值为表单的id。 1 <form id"testForm"> 2 <input type"text"> 3 </form> 4 <textarea form"testFo…

Unity3D笔记十七 Unity3D生命周期

一个游戏组件的脚本有一个生命周期——一开始实例化&#xff0c;直到结束实例被销毁。在这期间&#xff0c;他们有时候处于激活状态&#xff0c;有时候处于非激活状态&#xff1b;对于活动&#xff0c;对用户有时候可见&#xff0c;有时候不可见 本文主要讨论常见脚本的的生命周…

自适应堆大小

在改进我们的测试平台以改进Plumbr GC问题检测器的同时 &#xff0c;我最终编写了一个小型测试用例&#xff0c;我认为这对于更广泛的读者来说可能很有趣。 我追求的目标是测试JVM在eden&#xff0c;survivor和Tenured空间之间如何分割堆方面的自适应性。 测试本身正在成批生成…

.Net对SQL数据库的web备份

基于B/S模式下的&#xff0c;数据库远程备份&#xff0c;备份成功后可下载到本地 1 protected void ButtonDataBackup_Click(object sender, EventArgs e) 2 { 3 string newname "数据库名" DateTime.Now.Year.ToString() DateTime.Now.Month.ToStri…

ajax向后台传递数组

$.ajax({traditional: true//这个设置为true&#xff0c;data:{"steps":["qwe","asd","zxc"]}会转换成stepsqwe&stepsasd&... }); 更多专业前端知识&#xff0c;请上 【猿2048】www.mk2048.com

错误笔记

1、user_name a and password b时&#xff0c;无法打印到这个节点&#xff0c;原因是 a "yajuan" b 123456时 a 为字符串类型&#xff0c;b为数字类型&#xff0c;类型不同“且”的关系不成立。导致if 节点失败 转载于:https://www.cnblogs.com/wangyajuanjuan…

第一次Java 8体验

像世界其他地方一样&#xff0c;我深深地爱上了Slack。 为什么&#xff1f; 原因很多&#xff0c;但主要的原因是它提供了一种围绕通讯而非工具真正构建SDLC流程的新方法。 您认为这些天哪个更常见&#xff0c;杂乱无章的机智团队在荒野中四处徘徊&#xff0c;尽管他们有出色的…

七个重要习惯——读《高效能人士的七个习惯》整理

个人的成功习惯一&#xff1a;积极主动习惯二&#xff1a;以始为终习惯三&#xff1a;要事第一 公众的成功习惯四&#xff1a;双赢思维习惯五&#xff1a;知彼解己习惯六&#xff1a;综合综效 习惯七&#xff1a;不断更新 附图&#xff1a; 转载于:https://www.cnblogs.com/ziq…

浏览器兼容问题笔记

Safari浏览器&#xff1a; 1.safari执行history.go(-1);需要添加return false; Chrome浏览器 1.Chrome浏览器要预读图片&#xff0c;需要通过对图片的预加载。注&#xff1a;预加载前一定要将<img>加入<body> 1 /* 预加载图片 node-<img> func-回调函数 *…