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

一、元素选择符

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. web代码审计题

    @题名:code i春秋https://www.ichunqiu.com/battalion wp:https://www.ichunqiu.com/writeup/detail/4139

  2. vue-wechat-title动态修改title

    在使用Vue制作项目的过程中,发现title没有变化 所以使用vue-wechat-title插件动态修改tilte 一.安装 npm vue-wechat-title --save 二.引入和使用 ...

  3. 快速排序的Python代码实现

    选择一个数,和它后面的数比较,把比它小的放在它的左边,大的在右边(位置可能会因为左边元素的添加而右移) def quick_sort(arr): if arr==[]: return[] else: ...

  4. 【转帖】Office的光荣历史(2)

    Office的光荣历史(2) https://www.sohu.com/a/201411215_657550 2017-10-31 10:57 7.MS Office 2000 (Office 9.0 ...

  5. 第二章 impala基础使用

    第二章 impala基本使用 1.impala的使用 1.1.impala-shell语法 1.1.1.impala-shell的外部命令参数语法 不需要进入到impala-shell交互命令行当中即 ...

  6. springboot 论坛项目

    项目演示地址:http://www.mawen.co/ 快速搭建sprintboot项目 运行第一个springboot项目 leaf package hello; import org.spring ...

  7. crontab中的%

    crontab中的%是换行的意思,在使用时需要使用\做转义. ----------------- 在用crontab执行一段定时任务时,想要把数据输出到一个日期命名的文件中 * * * * * cd ...

  8. 使用python连接mysql数据库——pymysql模块的使用

    安装pymysql pip install pymysql 使用pymysql 使用数据查询语句 查询一条数据fetchone() from pymysql import * conn = conne ...

  9. Fiddler之WebFroms的中文乱码问题

    乱码问题:修改注册表 1.windows+R ,输入regedit ,按enter键 2.进入这个目录:HKEY_CURRENT_USER\Software\Microsoft\Fiddler2 3. ...

  10. Codeforces 1244F. Chips

    传送门 显然可以注意到连续的两个相同颜色的位置颜色是不会改变的,并且它还会把自己的颜色每秒往外扩展一个位置 同时对于 $BWBWBW...$ 这样的序列,它每个位置的颜色每一秒变化一次 然后可以发现, ...