1.高阶选择器:子代后代，相邻通用兄弟，交集并集，属性，伪类，伪元素
子代后代选择器
 div>p{}  div p{}
相邻通用兄弟
 div+p{}  div~p{}理解：div同学的同桌p  div同学的【同学（有p的）】
交集并集选择器
 div,p    div.div注意:类选择写后面
属性选择器
 [id] [class='div'] [class^*$='d']
伪类选择器,伪元素选择器（重点讲解）
定义:伪类用于向某些选择器添加特殊的效果(添加样式)
  伪元素用于向某些选择器设置特殊效果。(改变样式)
总结区别:
 伪类本质上是为了弥补常规CSS选择器的不足；
 伪元素本质上是创建了一个 有内容的 虚拟容器；
 css3中:伪类和::伪元素;
 可以同时使用多个伪类，而只能同时使用一个伪元素；

常用伪类: :not() :focus :link :visited :hover :active :first-child       :nth-child():nth-last-child():nth-of-type(n):only-child :only-of-type
 结构性伪类选择器
 :root()选择器等同于<html>元素
 :not()选择器称为否定选择器
 :empty()选择器表示的就是空。是一点内容都没有，哪怕是一个空格
 :target()选择器 点击a标签#111目标id为111的标签
  <p id="111">sadadas</p>
  <a href="#111">123</a>
 :lang()项目需要做国际化，并且中英文环境下，样式会有不同。
  a:lang(en){color:'red'}选中3个以en开头的
  <a lang="en-us" href="http://www.phpstudy.net"> phpstudy </a>
        <a lang="en-uk">HTML</a>
        <a lang="en" href="http://www.511yj.com"> 511遇见</a>

常用伪元素: ::first-letter,::first-line,::before,::after

用途1

.app:before{
    content: '';
    border: 1px #df147f solid;
    width: 50px;

    position: absolute;
    left: 25px;
    top:-5px;
}
.app:after{
    content: '';
     border: 1px #ff102c solid;
    width: 50px;

    position: absolute;
    left: 25px;
    bottom:-5px;
}

用途2 清浮动

css3中新加了个 ::selection
css3中新写法::
 
 
2.基本样式:长度颜色,字体样式,文本样式,背景样式
长度颜色
<style type="text/css">
  body {
   background-color: yellowgreen;
  }
  div {
   /*长度单位*/
   /*px in pt mm cm em rem vw vh*/
   width: 100px;
   /*width: 720pt; 10in*/
   /*width: 10em; 通常160px 10rem*/
   /*width: 50vw; 50% view width*/
   height: 100px;
   /*颜色单位*/
   /*单词 rgb() rgba() #六个十六进制位*/
   色光三原色：红、绿、蓝。
   /*background-color: cyan;*/
   /*background-color: rgb(255, 0, 0);*/
   /*background-color: rgba(255, 0, 0, 0);*/
   /*满足AABBCC形式可以简写为abc*/
   background-color: #a0c
  }
字体样式
<style type="text/css">
  span {
   /*大小*/
   font-size: 30mm;
   /*字重: bold粗 (normal标准 lighter较淡的) 100~900*/
   font-weight: 900;
   /*行高: 行高设置大于等于字体大小,字体在行高中垂直居中显示*/
   line-height: 50mm;
   /*样式: 一般不关心*/
   font-style: normal;
   /*字族:可以自定义字族当Segoe UI Emoji不存在,或不起作用,再选取 微软雅黑 */
   font-family: "Segoe UI Emoji", "微软雅黑";
   /*css语法: 空格隔开为多个值赋值(加粗,style，size/hight，famil), ,隔开为一个值多值赋值*/
   font: lighter 50mm/80mm "Segoe UI Emoji", "微软雅黑";
  }
 </style>
文本样式
 <style type="text/css">
  span {
   color: red;
   /*水平居中方式:left center right*/
   text-align: center;
   /*字划线: underline line-through overline none*/
   text-decoration: overline;
   /*字间距*/
   letter-spacing: 3px;
   /*词间距*/
   word-spacing: 10px;
  }
div {
   width: 300px;
   /*显示方式*/
   display: inline-block;
  }
  div {
   font-size: 12px;
   /*垂直排列方式: top baseline bottom*/
   vertical-align: baseline;
   /*缩进*/
   text-indent: 2em;
  }
  /*遇到连体的英文,html将其解析为一个单词(作为一个整体)*/
  .div {
   /*按标签的设定宽度强行换行,可以在单词(整体)内部换行*/
   word-wrap: break-all;
  }
 </style>
 <div class="div">abcdefabcdefabcdefabcdeabcdefabcdef</div>
背景样式
  <style type="text/css">
  div {
   width: 300px;
   height: 300px;
   background-color: red;
  }
  div {
   /*背景图片*/
   background-image: url("data/bg_repeat.gif");
   /*平铺: no-repeat repeat-x repeat*/
   background-repeat: no-repeat;
   /*定位*/
   /*10px == 10px center 设置一个值,第二个值默认为center*/
   /*10px 10px 第一个值控制水平位置,第二个值控制垂直位置*/
   /*background-position: right center;*/
   /*定位相关的涉及到滚动时的效果: scroll fixed*/
   background-attachment: fixed;
  }
  div {
   /*整体设置*/
   background: url("data/bg_repeat.gif") 10px 10px no-repeat red;
  }
 </style>

web@css高级选择器(after，befor用法),基本css样式的更多相关文章

  1. css高级选择器&盒模型

    css高级选择器&盒模型 1.组合选择器 群组选择器 /* 每个选择器为可以为三种基础选择器的任意一个,用逗号隔开,控制多个*/ div,.div,#div{ color:red } 后代(子 ...

  2. day40 css高级选择器

    一.高级选择器 高级选择器分为:后代选择器.子代选择器.并集选择器.交集选择器 后代选择器 使用空格表示后代选择器.顾名思义,父元素的后代(包括儿子,孙子,重孙子) .container p{ col ...

  3. 【笔记】CSS高级选择器:nth-child()

    详解CSS中:nth-child的用法 前端的哥们想必都接触过css中一个神奇的玩意,可以轻松选取你想要的标签并给与修改添加样式,是不是很给力,它就是“:nth-child”. 下面我将用几个典型的实 ...

  4. css高级选择器

    并集选择器 p,h1{} 交集选择器 p.first{} 后代选择器:嵌套标签 h1 span{} 子元素选择器 h1>span{} 属性选择器 input[type="passwor ...

  5. CSS 高级选择器

    相信各位如我一样的“抠图崽”和前端大佬们,在写网页样式的实话,总是免不了写下各种各样的选择器,再给选择的元素写入样式.最基本的元素选择器.class选择器.ID选择器等就不再过多的说了,相信大家都熟的 ...

  6. css各类选择器类型和用法

    1.ID 选择器(ID selector,IS):使用 # 标识selector,语法格式:#S{...}(S为选择器名).例:id为name的标签会匹配下面的样式 <style> #na ...

  7. css以及选择器基础

    CSS样式基础了解1.css基础语法CSS样式的出现是为了将内容和表现分离极大的提高了工作效率内联样式(在 HTML 元素内部)<p style="margin-left: 10px: ...

  8. Python-ccs高级选择器 盒模型

    css高级选择器与盒模型 脱离文档流 ,其中就是产生了BFC 1.组合选择器 - 群组选择器 /* 每个选择器位可以位三种基础选择器的任意一个, 用逗号隔开, 控制多个 */ div, #div, . ...

  9. CSS 1. 选择器

    1.css的介绍 CSS是指层叠样式表(Cascading Style Sheets),样式定义如何显示HTML元素,样式通常又会存在于样式表中.也就是说把HTML元素的样式都统一收集起来写在一个地方 ...

随机推荐

  1. golang 常量

    介绍 常量使用const修改 常量在定义时必须初始化 常量定义后不能修改 常量只能修饰bool.数值类型(int.float).string类型 golang中没有硬性规定常量必使用大写字母,但仍然通 ...

  2. HDU 6373(斜面上小球弹跳 运动分解)

    题意是给定两个点的位置,过原点引一条射线穿过第一个点,射线位置作为斜面位置,第二个点处令一小球自由落体,问小球能碰撞到斜面几次. 开始时想算出两次碰撞中小球沿斜面运动的距离,然后发现每一段距离会因为高 ...

  3. redis集群之主从架构

    https://redis.io/topics/replication1. redis主从架构概述(1)一个master可以配置多个slave(2)slave与master之间使用异步复制进行数据同步 ...

  4. 数据建模工具系列 之 让SQL Power Architect支持Vertica

    几款数据建模软件评估 下面是流行几款数据建模软件: 软件 特点 支持Vertica? 免费? ERWin 功能强大, 操作较繁琐 不支持Vertica 商业软件,价格高 Power Designer ...

  5. VS WebDev.WebServer40

    vs2010下有一个WebDev.WebServer40工具,可以直接拿来当服务器用,这样就不用再安装iis了.位置在 C:\Program Files (x86)\Common Files\micr ...

  6. 七、文件IO——I/O处理方式和文件锁

    7.1 I/O 处理方式 7.1.1 I/O处理的五种模型 阻塞I/O模型 若所调用的 I/O 函数没有完成相关的功能就会使进程挂起,直到相关数据到达才会返回.如 终端.网络设备的访问. 非阻塞模型 ...

  7. new和delete动态分配和撤销内存

    视频:C++引用及new和delete的使用 一.new用法 使用new运算符时必须已知数据类型,new运算符会向系统堆区申请足够的存储空间,如果申请成功,就返回该内存块的首地址,动态分配失败,则返回 ...

  8. Swiper.js使用教程

    官网地址:(http://www.swiper.com.cn/). 一.Swiper.js简介: Swiper(前称Swiper master) 是一款免费以及轻量级的移动设备触控滑块的js框架,使用 ...

  9. struct详解

    正常定义一个数据结构都是这样用 typedef struct{ int a; int b; }M; 在使用时 M a; 其实 struct是这样的 struct M{ int a; int b; }; ...

  10. MFCC/Filter Bank的提取流程

    预加重:通过一个一阶有限激励响应高通滤波器,使信号的频谱变得平坦,不易受到有限字长效应的影响. 分帧:根据语音的短时平稳特性,语音可以以帧为单位进行处理,实验中选取的语音帧长为32ms,帧移为16ms ...