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. linux 精简开机自启动

    centos7 精简开机自启动 ntsysv rsyslog  crond  sshd network

  2. 11-SQLServer的事务、存储过程和触发器

    一. 事务 在SQLServer中,每条SQL语句,默认就是一条隐式的事务,但是如果我们需要一组SQL语句,那么就需要采用SQLServer提供的特有的标记 来声明事务的开始.提交和回滚了. 事务的开 ...

  3. Vue 限制input输入 限数字 或 小数点后两位number

    Vue 限制input输入 小数点后两位number <input type="number" @keydown="handleInput2" place ...

  4. AAndroid Studio的\drawable还是mipmap

    图片应该放在drawable文件夹下,而mipmap文件夹只适合放app icons

  5. JavaSE回顾及巩固的自学之路(一)——————前言

    长长的呼出一口气,终于到了末端了,JavaSE,Java入门的基础,历经一个多月,终于细细的学了一遍,大部分的时间都是熬夜到半夜两点钟.本来是一个月的课程,足足让我给学了将近两个月,为什么呢?第一,还 ...

  6. GCC编译器原理（一）04------GCC 工具：nlmconv、nm、objcopy、objdump和 ranlib

    1.3.13 nlmconv nlmconv 将可重定位的对象文件(Infile)转换为 NetWare 可加载模块(outfile),并可选择读取头文件信息获取 NLM 头信息. 选项,描述 -I ...

  7. 4-20模块 序列化模块 hashlib模块

    1,模块,py文件就是模块,py之所以好用就是模块多. 2,模块的分类: 1,内置模块,python 安装时自带的模块 2,扩展模块,别人写好的,需要安装之后,可以直接使用.itchat微信模块, b ...

  8. css哪些属性可以继承

    不可继承的:display.margin.border.padding.background.height.min-height.max- height.width.min-width.max-wid ...

  9. 关于Scroller的使用

    这篇文章讲解的很详细 https://blog.csdn.net/u011102153/article/details/53337648

  10. Javascript入门(五)数组操作、循环语句

    一.数组与数组操作 <script type="text/javascript"> //数组定义方式 var list1 = new Array(1,2,3); var ...