• 元素选择符
  • 关系选择符
  • 属性选择符
  • 伪类选择符
  • 伪对象选择符

一、元素选择符

1.通配符:*{ }

2.类选择符:.类名称{ }

3.id选择符::#id名称{ }

4.类型选择符(标签选择符):标签 { }

二、关系选择符

1.子元素选择器:父亲>儿子

2.兄弟选择器::你自己~你的兄弟

3.相邻选择器:E+F

4.包含选择器:E F

三、属性选择符

1.属性

2.写法:

  (1)当前元素[属性]{ }

  (2)当前元素[属性="属性值"]{ }

四、伪类选择符

1.定义:它允许给htm标签的某种状态没置祥式。
    1)元素:link :设置超链接a在未被访问前的样式。
    2)元素:visited :设置超链接a在其链接地址已被访问过时的样式。
    3)元素:hover:设置元素在其鼠悬停时的样式。
    4)元索:active :没置元素在被用户激活(在鼠标点击与释放之间发生的事件)时的样式。
   
      2.注意! ! !
       1) a:hover必须位于a:link 和a:visited之后, a:active 必须位于a:hover之后。
       2)可靠的顺序是: I(link)ov(visited)e h(hover)a(active)te,即用喜欢(love)和讨厌(hate)连两个歌词来记忆。

五、伪对象选择符

1.元素:before{ }:设置在对象前发生的内容。用来和content属性一起使用,并且必须定义content属性.

2.元素:after{ }:设置在对象后发生的内容。用来和content属性一起使用,并且必须定义content属性。

选择器的优先级

!important>内联>ID>类>标签|伪类|属性选择器>伪对象>继承>通配符

注意:!important要写在属性值的后面,分号的前面。

例:

p{

  color:red !important;

}

CSS基础学习-2.CSS选择器(上)的更多相关文章

  1. CSS基础学习 21.CSS居中总结

    注意:*在IE中并不代表通配符的意思,是代表根元素的意思,所以为了匹配适应各种浏览器,进行页面初始化 <style> *{ margin:0; padding:0; } </styl ...

  2. CSS基础学习 20.CSS媒体查询

  3. CSS基础学习 19.CSS hack

  4. CSS基础学习 18.CSS多列

    四种常见的浏览器内核:

  5. CSS基础学习 17.CSS动画

  6. CSS基础学习 16.CSS过渡

  7. CSS基础学习-15-1.CSS 浏览器内核

  8. CSS基础学习-14 CSS visibility与overflow属性

  9. CSS基础学习-13.CSS 浮动

    如果前一个元素设置浮动属性,则之后的元素也会继承float属性,我觉得这里说是继承不太对,可以理解为会影响到之后的元素,所以在设置浮动元素之后的元素要想不被影响就需要清除浮动.元素设置左浮动,则清除左 ...

随机推荐

  1. 手把手教你在pycharm上上传项目至GitHub

    如果你还没有下载Git,请移步下载:https://git-scm.com/downloads 下载后解压傻瓜式安装,不过请记住你的安装目录,我们会用到. 以我的安装目录为例:D:\Program F ...

  2. [bzoj1776][Usaco2010 Hol]cowpol 奶牛政坛_倍增lca

    [Usaco2010 Hol]cowpol 奶牛政坛 题目大意: 数据范围:如题面. 题解: 第一想法是一个复杂度踩标程的算法..... 就是每种政党建一棵虚树,然后对于每棵虚树都暴力求直径就好了,复 ...

  3. Excel 下来公式 内容却一样

    首先我们打开我们电脑里面的excel2007的软件   我们随便输入一点输入,进行公式计算   我们在上边输入=A1+B1,就能算出这个的结果   我们把上边的公式算好了,点击下拉试试   我们发现虽 ...

  4. 模仿ORM

    ORM 对象关系映射 类 ---------->映射--------->    表 对象 ------>映射---------->   一条记录 对象点属性 --->映射 ...

  5. vue axios拦截跳转

    第一步:添加需要拦截的页面 { path: '/control', name: 'Control', meta: { requireAuth: true }, 第二步:页面拦截 router.befo ...

  6. Python验证数据的抽样分布类型

    假如要对一份统计数据进行分析,一般其来源来自于社会调研/普查,所以数据不是总体而是一定程度的抽样.对于抽样数据的分析,就可以结合上篇统计量及其抽样分布的内容,判断数据符合哪种分布.使用已知分布特性,可 ...

  7. the specified service is marked as deletion,can not find the file specified

    使用命令注册windows service sc create CCGSQueueService binpath= "D:\DKX4003\services\xxx.xx.xx\xxx.ex ...

  8. JS基础_一元运算符

    <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...

  9. Swagger学习(一、入门)

    简单 入门(效果) SwaggerConfig.class @Configuration //变成配置文件 @EnableSwagger2 //开启swagger2 public class Swag ...

  10. 编译程序遇到问题 relocation R_X86_64_32 against `.rodata' can not be used when making a shared object;

    编译程序遇到问题  relocation R_X86_64_32 against `.rodata' can not be used when making a shared object; 发现编译 ...