一、CSS选择器构成

CSS选择器是你想要改变样式的html元素,通俗的说,选择器可以改变html文件中标签的属性,这些属性可以是颜色,背景图,字体等。每个选择器有一条或多条声明,可以同时改变某个标签的一个或多个属性,每个属性和它的值用冒号分开,不同属性之间用分号隔开。

 h1{
font-family: "楷体";
color: red;
}

在上述例子中,h1是选择器,也是html文件中的元素或标签;color、font-family是属性;red、"楷体"是值。

结果:

字体显示为楷体,颜色显示为红色

二、CSS选择器的种类

【通用选择器】
1.写法:*{}
2.作用:选中页面所有标签

*{
color: red;
}

结果:所有文字颜色变为红色

【标签选择器】
1.写法:HTML标签名{
      样式属性:样式属性;
      ...
    }
2.作用:选中页面所有对应标签

ol{
font-family: "楷体";
color: red;
}

结果:对应标签中字体变为楷体,颜色变为红色

【类class选择器】
1.写法:.选择器class名称{}
2.用法:在需要改变样式的标签上使用class="选择器名称",来调用对应选择器
3.作用:修改所有调用选择器的标签

.one{
color: blue;
}

结果:class为one的内容文字变为蓝色

【id选择器】
1.写法:#选择器名称{}
2.用法:在需要改变样式的标签上使用id="选择器名称",来调用对应选择器
3.注意事项:同一页面的同一id是唯一的
4.作用:修改唯一id的样式

#two{
font-size: 26px;
}

结果:id为two的内容文字字体为26像素

【特殊选择器】
[后代选择器]
1.写法:选择器1 选择器2 选择器3 ...{}
例如:#div .li{}

div .li1{
color: orange;
}

[子代选择器]
1.写法:选择器1>选择器2>选择器3...{}
例如:#div>.ul>.li{}

div>ul>.li1{
color: orange;
}

注意:子代选择器与后代选择器的不同在于,子代选择器不能隔代。

举个形象的例子,后代选择器:爷爷 我{}

        子代选择器:爷爷>爸爸>我{}
[交集选择器]
1.写法:选择器1选择器2...{}
例如: .one#o{} 元素必须同时具备class="和"id=""才能生效
[并集选择器]
1.写法:选择器1,选择器2,...{}
例如:.f,#t{} 元素只需具备class=""或id="" 即可生效

【伪类选择器】
1、写法:选择器名称:伪类状态{}
常见伪类状态:link未访问状态、visited已访问状态、hover鼠标指上状态、active激活选定状态(鼠标点击未松开)、focus获得焦点时状态(inout常用)
2、超链接多种伪类共存时顺序:link(visited)-hover-active

a:link{
color: green;
}
a:visited{
color: blue;
}
a:hover{
color: red;
}
a:active{
color: orange;
} input:focus{
color: green;
}

结果:当鼠标放上去时显示伪类选择器设置的属性

三、选择器优先级

通用选择器<标签选择器<类选择器<id选择器<伪类选择器

优先级大的可以覆盖优先级小的属性值

CSS样式之选择器的更多相关文章

  1. CSS样式表 选择器

    1.内联样式表 和HTML联合显示,控制精确,但是可重用性差,冗余较多. 例:<p style="font-size:14px;">内联样式表</p> &l ...

  2. CSS样式与选择器

    CSS构造块的样式: 1.  h1{color:red;background-color:yellow} 其中:h1是选择器,花括号内是声明部分.多个声明之间用分号隔开. 2.为样式规则添加注释:/* ...

  3. 日常:css样式、选择器、个别知识点、数组array

    优先加入css引入文件定义,个别的在下面用style改变.(从左往右,从上往下)CSS样式表1.内联样式表(优先级最高)(改个别的)<div style="width:100px; h ...

  4. 前端之css样式(选择器)。。。

    一.css概述 CSS是Cascading Style Sheets的简称,中文称为层叠样式表,对html标签的渲染和布局 CSS 规则由两个主要的部分构成:选择器,以及一条或多条声明. 例如 二.c ...

  5. java基础57 css样式、选择器和css定位(网页知识)

    本文知识点(目录): 1.CSS样式    2.选择器    3.CSS定位 1.CSS样式 1.html 在一个网页中负责的是一个页面的结构    2.css(层叠样式表)在一个页面中负责了一个页面 ...

  6. 前端基础之css样式(选择器)

    一.css概述 CSS是Cascading Style Sheets的简称,中文称为层叠样式表,对html标签的渲染和布局 CSS 规则由两个主要的部分构成:选择器,以及一条或多条声明. 例如 二.c ...

  7. 前端之css样式(选择器)

    一.css概述 CSS是Cascading Style Sheets的简称,中文称为层叠样式表,对html标签的渲染和布局 CSS 规则由两个主要的部分构成:选择器,以及一条或多条声明. 例如 二.c ...

  8. css的基本操作学习--css样式,选择器,hover,文字属性,文本属性,背景

    什么是css? 通配符选择器 <head> /* *通配符选择器 匹配任何元素 */ *{ margin: 0; padding: 0; } </head> css样式有三种 ...

  9. css样式高级技巧-选择器

    用<div>元素为网页 在编写样式表时,我们经常要用div元素来包装内容: <div> <p>Here are two paragraphs of content& ...

随机推荐

  1. call和apply的小结

    call和apply的区别: 1.call函数和apply方法的第一个参数都是要传入给当前对象的对象,即函数内部的this.后面的参数都是传递给当前对象的参数. 2.俩者的格式和参数定义: call的 ...

  2. 二叉树遍历 C#

    二叉树遍历 C# 什么是二叉树 二叉树是每个节点最多有两个子树的树结构 (1)完全二叉树——若设二叉树的高度为h,除第 h 层外,其它各层 (1-h-1) 的结点数都达到最大个数,第h层有叶子结点,并 ...

  3. CPU最核心的电子元件叫做石英晶振

    CPU是电子计算机的主要设备之一,是电脑中的核心配件.主要功能是解释计算机指令以及处理计算机软件中的数据.有人会问,你知道CPU里面都有什么吗?我想大家都会说硅晶体,集成度极大的半导体材料.却没有人提 ...

  4. List集合数据太多进行分批,List的subList方法应用

    List<String> mStrings=new ArrayList<>(); //初始化 for (int i = 0; i < 1020; i++) { mStri ...

  5. Microsoft Azure IoTHub Serials 1 - 使用Android设备与Azure IoTHub进行交互

    Azure IoTHub的目标是为物联网的应用场景提供方便的设备接入,完成消息的发送和接收(C2D和D2C).经过持续不断的努力,目前Azure IoTHub已经支持多种操作系统设备的接入,包括And ...

  6. [原创]MongoDB_Sharding

    Mongo Sharding:本示例搭建了三个副本集作为三个分片的sharding集群,其中master,slave,factershi三台同网段的内网主机.前期规划和原理分析省略,可根据具体配置推导 ...

  7. LiteIDE灰调配色方案

    说明 本文写于2017-04-03,使用LiteIDE X31(基于Qt 4.8.5),操作系统为Windows. 使用 LiteIDE下载后解压即可使用.配色方案的所有配置文件都位于liteide/ ...

  8. js实现防盗图

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  9. 读《深入理解Java虚拟机》

    Java虚拟机运行时数据区 对象的创建 Java创建对象,在语言层面上使用new关键字.虚拟机遇到new关键字时,会检查这个指令的参数是否能在常量池中定位到一个类的符号引用,并且检查这个符号引用代表的 ...

  10. Hadoop化繁为简(二)—层层递进轻松入门hdfs

    层层递进-解开hdfs的面纱 1.hdfs是什么?它与普通服务器的文件系统有什么区别?它的特性有什么? 2.hdfs的工作原理是怎样的? 3.每台机器都单独启动有什么弊端?假设有1000台机器需要启动 ...