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. springMVC怎么接受前台传过来的多种类型参数？（集合、实体、单个参数）

    创建一个实体:里面包含需要接受的多种类型的参数.如实体.list集合.单个参数.(因为springMVC无法同时接受这几种参数,需要创建一个实体包含它们来接受) 如接收User(bean里面包含Lis ...

  2. eclipse配置文件乱码

    修改文件打开工具 安装文件编辑器插件 然后搜索

  3. springBoot中实现自定义属性配置、实现异步调用、多环境配置

    springBoot中其他相关: 1:springBoot中自定义参数: 1-1.自定义属性配置: 在application.properties中除了可以修改默认配置,我们还可以在这配置自定义的属性 ...

  4. [Android] Sqlite 数据库操作 工具封装类

    sqlite 数据库封装类 DatabaseUtil.java(封装的类) package com.jack.androidbase.tools; import android.content.Con ...

  5. Nginx不支持Post数据中带有"."

    如果提交的数据中带有.,nginx会把数据过滤掉,会导致后台收不到数据.下面是一个错误示例及解决办法

  6. C#基础_MD5

    MD5加密 1创建Md5 2.开始加密,需要将字符转换为字节数组 3.返回一个加密好的字节数组 4.将字节数组中每个元素按照指定的编码格式解析成字符串 1 static void Main(strin ...

  7. 【LeetCode】335. Self Crossing（python）

    Problem:You are given an array x of n positive numbers. You start at point (0,0) and moves x[0] metr ...

  8. Spring Boot 起步

    ……………………………………………………………………………………………………………… [应用配置]application.yml [port][context-path][datasource][jp ...

  9. PHP cURL实现模拟登录与采集使用方法详解教程

    来源:http://www.zjmainstay.cn/php-curl 本文将通过案例,整合浏览器工具与PHP程序,教你如何让数据 唾手可得 . 对于做过数据采集的人来说,cURL一定不会陌生.虽然 ...

  10. 第27月第12天 webrtc ios openssl boost

    1. source 'https://github.com/CocoaPods/Specs.git' target 'YOUR_APPLICATION_TARGET_NAME_HERE' do pla ...