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. 原生JavaScript运动功能系列（二）：缓冲运动

    匀速运动实现回顾 缓冲运动剖析 示例实现 方法提取 匀速运动实现回顾及缓冲运动剖析: 在这个系列的上一篇博客中原生JavaScript运动功能系列(一):运动功能剖析与匀速运动实现就运动的核心功能组成 ...

  2. 【leetcode-101】 对称二叉树

    101. 对称二叉树 (1过) 给定一个二叉树,检查它是否是镜像对称的. 例如,二叉树 [1,2,2,3,4,4,3] 是对称的. 1 / \ 2 2 / \ / \ 3 4 4 3 但是下面这个 [ ...

  3. AJAX工作原理与缺点

    1.概念:什么是AJAXAJAX全称为“Asynchronous JavaScript and XML”(异步JavaScript和XML),是一种创建交互式网页应用的网页开发技术.2.为什么要使用他 ...

  4. java四种权限修饰符（public > protected > (default) > private）

    权限修饰符在哪里可以访问 (default) : 表示什么权限修饰符都不写 位置 public protected (default) private 同一个类 yes yes yes yes 同一个 ...

  5. 分布式中的 transaction log

    分布式中的 transaction log 在分布式系统中,有很多台node组成一个cluster,对于client 的一个写操作请求而言,在什么样的情况下,cluster告诉client此次写操作请 ...

  6. Spring 快速开始 配置Spring Framework

    [配置Spring Framework] 1.XML配置依赖关系 bean是由Springframework管理,我们自己编写bean,Spring也内建了bean,比如ApplicationCont ...

  7. Sqlserver 连接oracle和mysql数据库 已经oracle导入sqlserver表数据

    SQL Server2012创建连接服务器到ORACLE11G 8,百思考不知道原因啊??突然我发现如下:链接服务器—〉访问接口—〉OraOLEDB.Oracle—〉允许进程内没有勾上,但是我想上面的 ...

  8. java设计模式之单例模式以及实现的几种方法

    java设计模式以及实现的几种方法,看到比较好的博客文章,收藏起来供以后再次阅读.. 参见:http://www.cnblogs.com/garryfu/p/7976546.html

  9. ThinkPHP5基础学习（慕课版）

    一.thinkphp 5.0 的安装及配置 二.URL和路由 三.请求和相应 四.视图和模板 五.数据库的操作 六.模型的操作

  10. ACM2作业

    文件读写知识点: 写入文件:freopen("文件名", "r", stdin); 写出文件:freopen("文件名", "w& ...