html5--6-10 CSS选择器7--伪类选择器

实例

学习要点

  • 掌握常用的CSS选择器
  • 了解不太常用的CSS选择器

什么是选择器

当我们定义一条样式时候,这条样式会作用于网页当中的某些元素,所谓选择器就是样式作用的对象.

插入样式的三种方法

    1. 内联样式表(行内)
    2. 内部样式表(style中)
    3. 外部样式表
      • 创建一个外部样式表
      • 在head中使用link元素插入样式表

CSS语法

  • 单一元素的多个属性之间用分号隔开;若只有一个可以省略
  • 多个元素之间用逗号隔开
  • 如果值为若干单词,则要给值加引号;除了这种情况外其他时候不可以加引号
  • css代码的注释
  • 样式的优先顺序:
    • 设计者设计的样式>浏览器用户自定义的样式>浏览器自设的样式
    • 强制优先级:!important
    1. 行内(内联)样式
    2. 内部样式:style中的样式
    3. 外部样式
  • 层叠、继承、冲突
    • 外观样式--比如字体、颜色可以继承;而布局有关的样式不可以继承,比如边框等
  • 可以在同一个 HTML 文档内部引用多个外部样式表。

CSS选择器

    • 常用选择器
      1. 通用选择器:“*”
      2. 元素选择器
      3. id选择器:前面有一个 # 号
      4. 类选择器:前面加符号 .
        • 给一个元素加上多个类名
        • 指定某一特定的类
  • 属性选择器

      • E[att] :选择具有att属性的E元素。需要选择有某个属性的元素,而不论属性值是什么,可以使用简单属性选择器。

    可以根据多个属性进行选择,只需将属性选择器链接在一起即可。

    • E[att="val"]:选择具有att属性且属性值等于val的E元素。进一步缩小选择范围,(只选择有特定属性值的元素。)
    • E[att~="val"]:选择具有att属性且属性值有多个,其中一个的值等于val的E元素。
    • E[att|="val"]:选择具有att属性且属性值为以val开头并用连接符"-"分隔的字符串的E元素。
    • E[att^="val"]:选择具有att属性且属性值为以val开头的字符串的E元素。
    • E[att$="val"]:选择具有att属性且属性值为以val结尾的字符串的E元素。
    • E[att*="val"]:选择具有att属性且属性值为包含val的字符串的E元素。
  • 关系选择器
    • 后代选择器(包含选择器)ul li{}:后代选择器又称为包含选择器。后代选择器可以选择作为某元素后代的元素。
    • 子元素选择器ul>li:与后代选择器相比,子元素选择器只能选择作为某元素子元素的元素,缩小了选择范围
    • 相邻选择符:E+F:选择紧贴在E元素之后F元素。
    • 兄弟选择器E~F:选择E元素所有兄弟元素F。(只可以选择到之后的元素)
  • 伪元素选择器
    • E:first-letter/E::first-letter 设置元素内的第一个字符的样式。
    • E:first-line/E::first-line设置元素内的第一行的样式。
    • E:before/E::before在每个 E元素的内容之前插入内容。用来和content属性一起使用
    • E:after/E::after在每个E元素的内容之后插入内容。用来和content属性一起使用
    • E::selection设置对象被选择时的颜色。
  • 伪类选择器结构伪类选择器
    • E:first-child 父元素的第一个子元素E。
    • :root:选择文档的根元素。
    • E:last-child:最后一个子元素E。
    • E:only-child:仅有的一个子元素E。
    • E:only-of-type:只有一种类型的子元素。
    • E:nth-child(n):元素的第n个子元素E。
      • 可以直接用数值:比如2
      • 可以用奇数(odd)偶数(even)
      • 可以用公式3n
    • E:nth-last-child(n):匹配父元素的倒数第n个子元素E。
    • E:first-of-type :匹配同类型中的第一个同级元素E。
    • E:last-of-type:匹配同类型中的最后一个同级元素E。
    • E:nth-of-type(n):匹配同类型中的第n个同级兄弟元素E。
    • E:nth-last-of-type(n):匹配同类型中的倒数第n个同级兄弟元素E。
    • E:empty :匹配没有任何子元素(包括text节点)的元素E。

    UI伪类选择器

    • E:first-child 父元素的第一个子元素E。

html5--6-10 CSS选择器7--伪类选择器的更多相关文章

  1. CSS属性、伪类选择器,CSS3选择器

    CSS1时IE6是部分支持,伟大的IE6!CSS2时IE6部分支持,伟大的IE6依旧是部分支持!CCS3盛行CSS4也已经提上日程的现在,IE6完全不支持.IE6你该走了,我们会永远记住你的功绩的!I ...

  2. CSS3 选择器——笔记+实战案例(基本选择器、组合选择器、属性选择器、伪类选择器)

    使用CSS3 选择器——笔记 CSS通过选择器控制HTML元素,CSS选择器对网页对象可以实现一对一.一对多或者多对一的匹配. 一.CSS3选择器分类 CSS选择器在CSS2.1选择器的基础上新增了属 ...

  3. CSS3每日一练之选择器-结构性伪类选择器

    <!DOCTYPE HTML> <html> <head> <meta charset="gb2312"> <title> ...

  4. HTML[2种特殊选择器]_伪类选择器&属性选择器

    本文介绍两种特殊的选择器 1.伪类选择器 2.属性选择器 1.伪类选择器 ...: nth-of -type (x) x为同类型兄弟元素中的排名 例如: <body> <ul> ...

  5. CSS基础--属性选择器、伪类选择器

    属性选择器 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF ...

  6. 第49天学习打卡(CSS 层次选择器 结构伪类选择器 属性选择器 美化网页元素 盒子模型)

    推荐书籍:码出高效: Java 开发手册 2.2 层次选择器 idea里代码规范是按:ctrl +alt+L快捷键 注释快捷键:ctrl+/ 1.后代选择器:在某个元素的后面 祖爷爷 爷爷 爸爸 你 ...

  7. CSS中的选择器之html选择器和伪类选择器

    1.html选择器(标签选择器) 基本语法: html标签名称{ 属性名:属性值; 属性名:属性值; } 继续在上面的代码中做修改,实例代码: <!DOCTYPE html> <ht ...

  8. css选择器(常规选择器,伪类选择器,伪元素选择器,根元素选择器)

    前言 CSS的一个核心特性是能向文档中的一组元素类型应用某些规则,本文将详细介绍CSS选择器 选择器 [通配选择器] 星号*代表通配选择器,可以与任何元素匹配 *{color: red;} [元素选择 ...

  9. CSS选择器之伪类选择器(元素)

    :first-child 选择某个元素的第一个子元素(IE6不支持) :last-child 选择某个元素的最后一个子元素 :first-of-type [CSS3]选择一个上级元素下的第一个同类子元 ...

  10. HTML+CSS教程(四)选择器(id选择器,类选择器,标签选择器,子代选择器,后代选择器,组选择器,伪类选择器)/css引入页面的形式(行内样式、内嵌样式、外联样式)

    一.回顾内容 前端的三大组成(三大模块)    HTMl(超文本标记语言) 结构层    css(层叠样式表) 表现层:用来美化HTML结构    JS(Java script)(脚本语言) 行为层: ...

随机推荐

  1. 同时在windows和linux环境开发时换行符的处理

    Git 的 core.autocrlf 參數默认为true,即每次 checkin 時,Git 會將純文字類型的檔案中的所有 CRLF 字元轉換為 LF,也就是版本庫中的換行符號一律存成 LF:在 c ...

  2. 2017 ACM/ICPC Asia Regional Guangxi Online 记录

    题目链接  Guangxi 感觉这场比赛完全是读题场啊…… 比赛过程中丢失了一波进度,最后想开题的时候已经来不及了…… Problem A 按题意模拟……按照那个矩阵算就可以了 #include &l ...

  3. T1164 统计数字 codevs

    http://codevs.cn/problem/1164/ 题目描述 Description [问题描述]某次科研调查时得到了n个自然数,每个数均不超过1500000000(1.5*109).已知不 ...

  4. Codeforces 837 E Vasya's Function

    Discription Vasya is studying number theory. He has denoted a function f(a, b) such that: f(a, 0) =  ...

  5. ACM用到的算法。先做个笔记,记一下

    ACM 所有算法 数据结构 栈,队列,链表 哈希表,哈希数组 堆,优先队列 双端队列 可并堆 左偏堆 二叉查找树 Treap 伸展树 并查集 集合计数问题 二分图的识别 平衡二叉树 二叉排序树 线段树 ...

  6. JDK动态代理理解精髓

      1.Java动态代理的关键是:Proxy类要和InvocationHandler的接口实现类,要用同一个目标target对象class,所以精髓是InvocationHandler和Proxy是一 ...

  7. Linux索引节点(Inode:no space for device)用满导致的一次故障

    问题描写叙述 在storm測试环境集群上上nimbus和supervisor自己主动挂调.重新启动时显示no space for device,也不能创建,加入文件及文件夹,df -h查看 ilesy ...

  8. 团购类网站倒计时的js实现

    一.如火如荼的团购网站 根据易观国际提供的统计数据,截至2010年6月,中国市场团购网站数量已经突破400家.国内团购潮从今年2月份开始出现,在4~6月出现高峰,尤其是今年5月,一些大的网站如爱帮网. ...

  9. Tips/Tricks in Deep Neural Networks

    转自: http://lamda.nju.edu.cn/weixs/project/CNNTricks/CNNTricks.html

  10. Appium基于安卓的各种FindElement的控件定位

    转自:http://www.2cto.com/kf/201410/340345.html 1. findElementByName 1.1 示例 ? 1 2 el = driver.findEleme ...