安科网

CSS3学习笔记1-选择器和新增属性

编程爱好者联盟

编程爱好者联盟

2016-11-16

关注 关注

前言：之前自学了一些关于CSS3的知识，在学习过程中也遇到过坑，不过总算磕磕绊绊的学习完了关于CSS3的相关知识，于是最近把之前的笔记和代码整理了一下，也算是一个对CSS3知识的回顾复习吧，也希望能够对想学这方面知识的小白有所帮助。因为是各种渠道找的资料，学习的不算系统，所以知识点涵盖的不甚全面，望各位看官不吝指正批评。

CSS3简介

CSS3是CSS2的“进化”版本，在CSS2基础上，增强或新增了许多特性， 弥补了CSS2的众多不足之处，使得Web开发变得更为高效和便捷。

css3现状

  • 浏览器支持程度差，需要添加私有前缀
  • 移动端支持优于PC端
  • 不断改进中
  • 应用相对广泛

CSS3新增选择器

1.属性选择器新增

  • E[属性名^=值]：从头去匹配这个‘属性 = 对应值’的E元素
  • E[属性名$=值]：从尾去匹配这个‘属性 = 对应值’的E元素
  • E[属性名*=值]：从任意位置去匹配这个‘属性 = 对应值’的E元素
  • E[属性名|=值]：匹配具备该属性的元素，并且属性值以对应值开头并紧接着“-”，如果该属性的属性值仅有匹配值，也能匹配到。

2.伪类选择器

  • E：first-child 找到第一个孩子为E的元素
  • E：last-child 找到最后一个孩子为E的元素
  • E：nth-child（N）找到第N个孩子为E的元素，N以1开始
  • E：nth-child（odd）匹配奇数的孩子为E的元素
  • E：nth-child（even）匹配偶数的孩子为E的元素
  • E：nth-child（3n+1）匹配第3n+1个孩子为E的元素，n从0开始

:nth-of-type使用方法与:nth-child类似。

3.其他选择器

  • input:focus{} => 选择获取焦点的表单
  • Input:checked{} => 选择被选中的checkbox表单
  • input:enabled{} => 选择可操控的表单元素
  • input:disabled{} => 选择不可操控的表单
  • E:target{} => 选择通过锚点跳转的当前E元素
  • E:empty{} => 选择没有子节点的E元素包括文本节点（基本不用）

伪元素before after

作用：渲染一个虚拟的标签插入到当前元素的内部前面或后面

总结：

  1. 伪元素默认是行内元素，我们可以进行转换，在实践中，我们常用来模拟装饰标签
  2. 伪元素是虚拟的，不能通过js去获取，但可以用类样式进行覆盖
  3. 清除浮动的底层原理，就是通过伪元素去清除浮动，节约DOM内存
  4. content不能省略，即便里面没有内容
  5. 当伪类需要配合iconfont去使用的话需要打开iconfont.css 拿到content里面对应的值
  6. 当伪元素需要hover的效果的时候不能直接hover 需要借助于父级 写法：父级：hover：伪元素

圆角 border-radius

实现元素的圆角化，使用方式与border、padding和margin类似，可以合写，也可以单独设置。

  1. 一个值设置的是盒子的四个角的水平和垂直半径
  2. 每个角都可以单独进行设置 其取值顺序是左上 右上 右下 左下顺时针设置
  3. 可以简写 简写的逻辑跟padding和margin一样
  4. 单位支持像素，和百分比（参照的是宽度和高度）
  5. 可以用 水平半径/垂直半径 去单独控制半径 并且每一个半径都可以单独控制

[blockquote]

<!DOCTYPE html>
<html lang="zh-cmn-Hans">
<head>
<meta charset="utf-8" />
<title>dcocument</title>
<style>
ul{margin:0;padding:0;}
li{list-style:none;margin:10px 0 0 0;padding:10px;background:#bbb;}
.test .one{border-radius:10px;}
.test .two{border-radius:10px 20px;}
.test .three{border-radius:10px 20px 30px;}
.test .four{border-radius:10px 20px 30px 40px;}
.test2 .one{border-radius:10px/5px;}
.test2 .two{border-radius:10px 20px/5px 10px;}
.test2 .three{border-radius:10px 20px 30px/5px 10px 15px;}
.test2 .four{border-radius:10px 20px 30px 40px/5px 10px 15px 20px;}
</style>
</head>
<body>
<h2>水平与垂直半径相同时：</h2>
<ul class="test">
    <li class="one">提供1个参数<br />border-radius:10px;</li>
    <li class="two">提供2个参数<br />border-radius:10px 20px;</li>
    <li class="three">提供3个参数<br />border-radius:10px 20px 30px;</li>
    <li class="four">提供4个参数<br />border-radius:10px 20px 30px 40px;</li>
</ul>
<h2>水平与垂直半径不同时：</h2>
<ul class="test2">
    <li class="one">提供1个参数<br />border-radius:10px/5px;</li>
    <li class="two">提供2个参数<br />border-radius:10px 20px/5px 10px;</li>
    <li class="three">提供3个参数<br />border-radius:10px 20px 30px/5px 10px 15px;</li>
    <li class="four">提供4个参数<br />border-radius:10px 20px 30px 40px/5px 10px 15px 20px;</li>
</ul>
</body>
</html>

[/blockquote]

阴影box-shadow

语法 box-shadow：水平偏移 垂直偏移 模糊大小 阴影大小 颜色 阴影

  1. 第一个值 ：Npx 阴影向水平方向偏移N个像素 正数往右 负数往左
  2. 第二个值 ：Npx 阴影向垂直方向偏移N个像素 正数往下 负数往上
  3. 第三个值 ：px 模糊大小
  4. 第四个值 ：px 阴影尺寸
  5. 第五个值 ：颜色 默认值是黑色
  6. 第六个参数： 内外阴影 默认是外阴影 内阴影是inset
  7. 阴影可以写多个，中间用逗号隔开
  8. 阴影可以简写，但是需要注意有一些值需要补0

[blockquote]

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        div{
            width: 200px;
            height: 200px;
            background-color: green;
            margin: 10px auto;
        }
        /* 第一个值 ：Npx  阴影向水平方向偏移N个像素  正数往右 负数往左 */
        div:nth-child(1){
            box-shadow: -10px 0;
        }
        /* 第二个值 ：Npx  阴影向垂直方向偏移N个像素  正数往下 负数往上 */
        div:nth-child(2){
            box-shadow: 0px -10px;
        }

        div:nth-child(3){
            box-shadow: 10px 10px;
        }
        /* 第三个值 ：羽化大小 （模糊的大小） */
        div:nth-child(4){
            box-shadow: 10px 10px 50px;
        }
        /* 第四个值 ：阴影尺寸 */
        div:nth-child(5){
            box-shadow: 0px 0px 10px 5px;
        }
        /* 第五个值 ：颜色 默认值是黑色 */
        div:nth-child(6){
            box-shadow: 0px 0px 10px 5px rgba(100,100,100,0.5);
        }
        /* 第六个值 内外阴影 默认是外阴影 内阴影是inset */
        div:nth-child(7){
            box-shadow: 0px 0px 10px 5px red inset;
        }
        /* 阴影可以写多组 用逗号隔开*/
        div:nth-child(8){
            box-shadow: 0px 0px 10px 5px red inset,5px 5px 5px 5px pink,10px 10px 5px 5px blue;
        }
        div:nth-child(9){
            box-shadow: 5px 5px red;
        }
    </style>
</head>
<body>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
</body>
</html>

[/blockquote]

边框图片border-image（了解，有兼容性问题，同时效果难做）

以九宫格的方式来切割图片，然后把每部分图片平铺作为边框。

值说明：

  • border-image-source:url('border.png'); 图片路径
  • border-image-slice:26;图片切割，不要带单位，遵从九宫格式切图法（上下左右各来一刀）
  • border-image-repeat:round或者stretch或者repeat; round没有瑕疵，stretch默认拉伸，repeat 平铺（可能有瑕疵）
  • 简写：border-image:url('border.png') 26 round;

背景图片系列（重点）

1.背景图片的基准点

background-origin：值

  • border-box:忽略边框 直接从边框的起始 0 ，0点平铺
  • padding-box:默认值，忽略padding 直接从padding的起始 0 ，0点平铺
  • content-box:从内容部分开始平铺 跟padding有关系

[blockquote]

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        .box{
            width: 800px;
            height: 800px;
            border: 10px dashed #000;
            background:  url(image/heihei.jpg) 0 0 no-repeat;
             /* padding-box  默认取值，从padding的起始点开始平铺 padding的大小不会产生影响*/
            /*  border-box 从border的起始点开始平铺 border的大小不会产生影响 */
            /* content-box 从内容的起始点开始平铺，会留出padding的位置 */
            background-origin: content-box;
            padding: 20px;
        }
    </style>
</head>
<body>
    <div class="box"></div>
</body>
</html>

[/blockquote]

2.多重背景

背景图片之间用逗号隔开，可以写多组，最先渲染的图片有可能会遮住后面渲染的图片

[blockquote]

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        .box{
            width: 800px;
            height: 800px;
            border: 10px dashed #000;
            background:  url(image/heihei.jpg) 0 0 no-repeat,url(image/hehe.png) right bottom no-repeat,url(image/11051156_1536_864.jpg) no-repeat;
        }
    </style>
</head>
<body>
    <div class="box"></div>
</body>
</html>

[/blockquote]

3.背景大小

background-size:值

  • 当只有一个值的情况下，宽度实现拉伸，并且高度会保持等比例，可以支持px，也可以支持百分比，百分比参照的是这个盒子本身的宽度
  • 当有两个值的情况下，宽度和高度会分别拉伸到对应的值，可能会变形，可以支持px，也可以支持百分比，百分比参照的是这个盒子本身的宽度
  • contain 当图片的宽度或者是高度在缩放的时候有一个“碰到”了盒子的边缘，则停止变化，（宽度或高度满足一个即可）
  • 在contain的基础上保证不留白，这就是cover的效果（宽度和高度都需要满足）

[blockquote]

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        .box{
            width: 800px;
            height: 800px;
            border: 10px dashed #000;
            background:  url(image/Aatrox_1.jpg) 0 0 no-repeat;
            /* 一个值的情况下，宽度会进行拉伸，高度会保持等比例 */
            /* 两个值的情况下，宽度和高度都会拉伸，可能会产生变形 */
            /* 可以接受百分比  百分比参照的是盒子的宽和高 */
            /* contain 当图片的宽度或者是高度有一个达到了最大值，整体停止缩放 可能会带来留白呀*/
            /* cover 在contain的基础上，保持不留白，继续放大，知道另外一个边也得到最大值 */
            background-size:cover;

            /* 预告： background-size会在自适应页面里面用到，在全屏轮播图里面用到 */
        }
    </style>
</head>
<body>
    <div class="box"></div>
</body>
</html>

[/blockquote]

盒子内减box-sizing

之前我们的盒子的实际宽度是 实际宽度 = width + padding + border，而内减属性会自动帮我们减去padding和border值 ，所以用了内减的盒子实际宽度就等于width，至于padding和border的值会自动被width内减掉。

[blockquote]

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        div{
            width: 200px;
            height: 200px;
            background-color: yellowgreen;
            margin: 10px auto;
        }
        div:nth-child(2){
            padding: 10px;
        }
        div:nth-child(3){
            padding: 10px;
            border: 10px solid hotpink;
        }
        div:nth-child(4){
            padding: 10px;
            border: 10px solid hotpink;
            box-sizing: border-box;
        }
    </style>
</head>
<body>
    <!-- 一个盒子真正的实际宽度包括 Border + padding + width   
        在css3中，可以借助于border-sizing去实现盒子自动内减，有两个值 
        broder-box 
        content-box

        broder-box 内减掉边框和padding
        content-box 是默认值 该是多少就是多少
    -->
    <div>1</div>
    <div>2</div>
    <div>3</div>
    <div>4</div>    
</body>
</html>

[/blockquote]

渐变

1.线性渐变

background:-webkit-linear-gradient(起始位置,颜色一 位置,颜色二 位置 ,颜色三 位置);

[blockquote]

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        .box{
            width: 300px;
            height: 300px;
            border: 1px solid #000;
            margin: 10px auto;
            /* 线性渐变      
                语法：background:linear-gradient(起始位置,颜色一 位置,颜色二 位置 ,颜色三 位置);    
                （1）需要添加私有前缀 
                （2）第一个参数，起始位置  可以接受方位名词 也可以是一个点
                    也可以是deg 角度  控制的是渐变线的角度 正值是逆时针，负值是顺时针
                （3）颜色 可以是任意颜色     
            */
            background: -webkit-linear-gradient(45deg,red 20%,green 60%,blue);
        }
    </style>
</head>
<body>
    <div class="box"></div>
</body>
</html>

[/blockquote]

2.径向渐变

background:-webkit-radial-gradient(起始位置,颜色一 位置,颜色二 位置 ,颜色三 位置);

[blockquote]

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        .box{
            width: 300px;
            height: 300px;
            border: 1px solid #000;
            margin: 10px auto;
            /* 径向渐变 
                语法：background:radial-gradient(起始位置,颜色一 位置,颜色二 位置 ,颜色三 位置);    
                （1）需要添加私有前缀 
                （2）第一个参数，起始位置  可以接受方位名词 也可以是一个点
                    也可以是像素  不接受deg
                （3）颜色 可以是任意颜色    
            */
            background: -webkit-radial-gradient(150px 150px,red 20%,green 60%,blue 10%);
        }
    </style>
</head>
<body>
    <div class="box"></div>
</body>
</html>

[/blockquote]

总结：

  1. 两种渐变的参数都是一样的 ，起始位置都接受方位名词
  2. 线性渐变的起始位置还能接受deg 角度 径向渐变不能接受deg但是接受px
  3. 需要添加私有前缀
  4. 颜色位置的取值遵守递增的关系

私有前缀

作用：兼容低版本的一些高级浏览器，或者一些特定的css3属性需要添加私有前缀才起作用 每一条css3属性合理来说都需要添加对应浏览器的前缀，以保证其兼容性

  • 谷歌 苹果：-webkit
  • 火狐：-moz-
  • IE：-ms-
  • o：-o-

注意：在手机端，一般来说只需要写一个-webkit-（针对国内的绝大部分手机端）

添加的位置：大部分都是直接添加到最前面，css2没有的属性都是添加在最前面的，有一些是css2就有的属性是添加在后面的（例如：background：-webkit-linear-gradient（））

[blockquote]

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        div{
            border-radius: 10px;
            -webkit-border-radius: 10px;
            -moz-border-radius: 10px;
            -ms-border-radius: 10px;
            -o-border-radius: 10px;
        }
    </style>
</head>
<body>
    <div></div>
</body>
</html>

[/blockquote]

css3选择器 css

编程爱好者联盟

编程爱好者联盟

8 关注 14 粉丝 0 动态

关注 关注

相关推荐

06前端css3增加选择器

element[attribute=‘value‘’] 匹配所有attribute属性值为value的元素，设置样式

vavid 2020-06-28

CSS3 选择器

简单点理解就是选择元素中的第一个子元素，记住是子元素，而不是后代元素。用来定位某个父元素的一个或多个特定的子元素。其中“n”是其参数，不仅可以是整数值，也可以是表达式和关键词，但参数n的起始值始终是1，而不是0。也就是说，参数n的值为0时，选择器将选择不到

somboy 2020-06-10

web前端入门到实战：常见CSS3选择器和文本字体样式汇总

常见的CSS3选择器包含：常用基本、属性、伪类、层级（组合）选择器，具体使用情况建议先阅读[css选择器四大类：基本、组合、属性、伪类]对于选择器的使用有一个基本了解，选择器的作用在于通过它找到元素，并且给它添加属性样式。专门建立的学习Q-q-u-n： 7

WinerChopin 2020-04-18

css3基本选择器+属性选择器+动态伪类+UI状态伪类+结构类

祖先元素 后代元素{ }. 父元素>子元素{ }. 所有兄弟元素选择器。选择所有带指定属性，并且指定属性值的元素。选择所有带指定属性，并且属性以指定值结尾的元素，结尾可以是一个完整的单词，也可以是单个字母

lanzhusiyu 2020-02-02

CSS3 选择器——伪类选择器（转）

前面花了两节内容分别在《CSS3选择器——基本选择器》和《CSS3选择器——属性选择器》介绍了CSS3选择器中的基本选择器和属性选择器使用方法，今天要和大家一起学习CSS3选择器中的第三部分，也是最后一部分——伪类选择器。伪类选择器对于大家来说最熟悉的莫过

sorryericsson 2016-01-04

CSS3 选择器——属性选择器（转）

上一切在《CSS3选择器——基本选择器》中主要介绍了CSS3选择器的第一部分，这节主要和大家一起来学习CSS3选择器的第二部分——属性选择器。属性选择器早在CSS2中就被引入了，其主要作用就是对带有指定属性的HTML 元素设置样式。E[attr]：只使用属

drdrsky 2016-01-04

好程序员HTML5培训教程-总结30个CSS3选择器

好程序员HTML5培训教程-总结30个CSS3选择器1 *：通用选择器 { margin:0; padding:0; }*选择器是选择页面上的全部元素，上面的代码作用是把全部元素的margin和padding设为0，最基本的清除浏览器默认样式的方法。

afeichuanqi 2019-07-01

即学即用，轻松搞定这些选择器！（下）

在上一篇文章中，我们讲到基础选择器中的元素选择器、ID选择器、类选择器。本期我们继续看一下伪类选择器、伪元素选择器、通用选择器的使用方法。伪类是指逻辑上存在、但文档树中并不存在的“幽灵”分类，通常用于给元素某些特定状态添加样式。伪类典型的应用就是为超链接添

沉着前进 2019-06-29

jQuery选择器的优势

今天学习了jQuery选择器，以前只是会用常用的一些，今天具体看了一下，发现还是值得好好学习的。直接通过$("")便可以获取。但是如果用jQuery就可以避免这样的麻烦，代码是：$.css;$("")获取的永远是对象

nicepainkiller 2016-06-23

CSS3 选择器——伪类选择器（转）

前面花了两节内容分别在《CSS3选择器——基本选择器》和《CSS3选择器——属性选择器》介绍了CSS3选择器中的基本选择器和属性选择器使用方法，今天要和大家一起学习CSS3选择器中的第三部分，也是最后一部分——伪类选择器。伪类选择器对于大家来说最熟悉的莫过

cscscssjsp 2016-01-04

CSS3 选择器——属性选择器（转）

上一切在《CSS3选择器——基本选择器》中主要介绍了CSS3选择器的第一部分，这节主要和大家一起来学习CSS3选择器的第二部分——属性选择器。属性选择器早在CSS2中就被引入了，其主要作用就是对带有指定属性的HTML 元素设置样式。使用CSS3属性选择器，

Simagle 2016-01-04

第36章 CSS3中新增的属性选择器

<h1>CSS3中的属性选择器</h1>

沈宫新 2015-12-08

CSS3 :nth-child()伪类选择器

CSS3的强大，让人惊叹，人们在惊喜之余，又不得不为其艰难的道路感到可惜：好的标准只有得到行业浏览器的良好支持才算得上“标准”。CSS3标 准已提出数年，但是目前能实现她的浏览器并不多，虽然部分浏览器能实现部分规范，但这又有什么用呢？面对更多的兼容性问题，

wolaizheli 2014-10-09

Jquery选择器全总结

Jquery中的选择器完全继承了CSS的风格，利用Jquery选择器，可以非常便捷和快速的找出特定的Dom元素，然后为他们添加相应的行为，而无需担心浏览器是否支持这一选择器，学会使用选择器是学习Jqeury的基础，Jquery的行为规则都必须在获取到元素

83493467 2014-08-29

CSS3属性选择器详解

上一章在《CSS3基本选择器》中主要介绍了CSS3选择器的第一部分，这节主要和大家一起来学习CSS3选择器的第二部分——属性选择器。属性选择器早在CSS2中就被引入了，其主要作用就是对带有指定属性的HTML 元素设置样式。使用CSS3属性选择器，你可以只指

csscode 2014-08-11

CSS3伪类选择器详解

前面花了两节内容分别在《CSS3基本选择器》和《CSS3属性选择器详解》介绍了CSS3选择器中的基本选择器和属性选择器使用方法，今天要和大家一起学习CSS3选择器中的第三部分，也是最后一部分——伪类选择器。伪类选择器对于大家来说最熟悉的莫过于:link,:

lanzhusiyu 2014-08-11

转载--CSS3选择器--基本选择器

选择器主要是用来确定html的树形结构中的DOM元素节点。我们先来看一个常用的选择器列表图。下面我们先看看上表中基本的选择器的使用方法和其所起的作用，为了更好的说明问题，先创建一个简单的DOM结构，如下：

xuzhen0 2014-07-25

极客技术专题【008期】：CSS3核心技术：选择器

资 深Web前端工程师，W3CPlus创始人，目前就职于上海携程 。2010年开始从事 Drupal 主题制作工作，是 Drupal 社区团队最早成员之一。现久居上海，从事 Web 前端工作，关注移动端、CSS3、Sass等最新技术，目前正在撰写一本关于C

zengni 2013-08-19

jquery选择器详解

jqueryObj.next;//获取jqueryObj标签的后面紧邻的一个div，nextAll获取所有。jQuery 的选择器借鉴了大量 CSS1 ~ CSS3 标准的特点，并且整理成一个强大的对象选择工具集。属性选择器jQuery 的属性选择器是其所

恋雨烟梦 2013-06-25

读Zepto源码之Selector模块

Selector 模块是对 Zepto 选择器的扩展，使得 Zepto 选择器也可以支持部分 CSS3 选择器和 eq 等 Zepto 定义的选择器。在阅读本篇文章之前，最好先阅读《读Zepto源码之神奇的$》。}判断元素是否可见。可见的标准是元素有宽或者

Cricket 2019-06-21
编程爱好者联盟

编程爱好者联盟

W3CSchool教程
HTML 教程
CSS 教程
Bootstrap 教程
Javascript 教程
jQuery 教程
后端教程
C 教程
Java 教程
PHP 教程
Python 教程
Go 教程
移动开发
Android 教程
Swift 教程
Kotlin 教程
jQuery Mobile 教程
ionic 教程
关于我们
新闻动态
联系方式
招聘英才
安科实验室
帮助与反馈

安科网(Ancii)，中国第一极客网

Copyright © 2013 - 2019 Ancii.com

京ICP备18063983号 京公网安备11010802014868号