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. Project facet Java version 1.8 not supported

    把其它的项目到自己的eclipse中后,进行运行项目之后,就会提示为“Project facet Java version 1.8 not supported”.   进行更改配置,进行右键项目就会弹 ...

  2. WebStorm记录(1)

    开始写前端,使用WebStorm,记录下使用过程 参考 WebStorm 初步使用 & HTML5 学习报告 webstorm怎么运行调试html WebStorm 快速开发教程 --CSS篇 ...

  3. windows安装mysql5.7.xx解压版

    解压后修改配置文件 my.ini [mysql] # 设置mysql客户端默认字符集 default-character-set=utf8 [mysqld] #设置3306端口 port = 3306 ...

  4. Nginx 学习笔记（六）引入线程池 性能提升9倍

    原文地址:https://www.cnblogs.com/shitoufengkuang/p/4910333.html 一.前言 1.Nignx版本:1.7.11 以上 2.NGINX采用了异步.事件 ...

  5. 028、限制容器对CPU的使用（2019-01-23 周三）

    参考https://www.cnblogs.com/CloudMan6/p/7003199.html   默认情况下,所有容器都可以平等的使用host cpu资源,没有限制   docker 可以通过 ...

  6. Win32程序框架

    // WinMsg.cpp : 定义应用程序的入口点. // #include "stdafx.h" #include <stdio.h> #include " ...

  7. Mark Text - 下一代所见即所得的Markdown编辑器

    Mark Text 所输及所见,摒弃了众多 markdown 编辑器左边写作右边预览的写作方式,巧妙的将编辑和预览融为一体.snabbdom 作为 Mark Text 的渲染引擎,保证了极速渲染编辑页 ...

  8. 【bzoj 2588】Spoj 10628. Count on a tree

    Description 给定一棵N个节点的树,每个点有一个权值,对于M个询问(u,v,k),你需要回答u xor lastans和v这两个节点间第K小的点权.其中lastans是上一个询问的答案,初始 ...

  9. .net 使用oracle 的存储过程有返回值也有数据集（游标）

    public void GetData(string username, string userip, string userkey, string userareaid, string ypid, ...

  10. Coursera, Deep Learning 5, Sequence Models, week2, Natural Language Processing & Word Embeddings

    Word embeding 给word 加feature,用来区分word 之间的不同,或者识别word之间的相似性. 用于学习 Embeding matrix E 的数据集非常大,比如 1B - 1 ...