CSS样式之选择器
一、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样式之选择器的更多相关文章
- CSS样式表 选择器
1.内联样式表 和HTML联合显示,控制精确,但是可重用性差,冗余较多. 例:<p style="font-size:14px;">内联样式表</p> &l ...
- CSS样式与选择器
CSS构造块的样式: 1. h1{color:red;background-color:yellow} 其中:h1是选择器,花括号内是声明部分.多个声明之间用分号隔开. 2.为样式规则添加注释:/* ...
- 日常:css样式、选择器、个别知识点、数组array
优先加入css引入文件定义,个别的在下面用style改变.(从左往右,从上往下)CSS样式表1.内联样式表(优先级最高)(改个别的)<div style="width:100px; h ...
- 前端之css样式(选择器)。。。
一.css概述 CSS是Cascading Style Sheets的简称,中文称为层叠样式表,对html标签的渲染和布局 CSS 规则由两个主要的部分构成:选择器,以及一条或多条声明. 例如 二.c ...
- java基础57 css样式、选择器和css定位(网页知识)
本文知识点(目录): 1.CSS样式 2.选择器 3.CSS定位 1.CSS样式 1.html 在一个网页中负责的是一个页面的结构 2.css(层叠样式表)在一个页面中负责了一个页面 ...
- 前端基础之css样式(选择器)
一.css概述 CSS是Cascading Style Sheets的简称,中文称为层叠样式表,对html标签的渲染和布局 CSS 规则由两个主要的部分构成:选择器,以及一条或多条声明. 例如 二.c ...
- 前端之css样式(选择器)
一.css概述 CSS是Cascading Style Sheets的简称,中文称为层叠样式表,对html标签的渲染和布局 CSS 规则由两个主要的部分构成:选择器,以及一条或多条声明. 例如 二.c ...
- css的基本操作学习--css样式,选择器,hover,文字属性,文本属性,背景
什么是css? 通配符选择器 <head> /* *通配符选择器 匹配任何元素 */ *{ margin: 0; padding: 0; } </head> css样式有三种 ...
- css样式高级技巧-选择器
用<div>元素为网页 在编写样式表时,我们经常要用div元素来包装内容: <div> <p>Here are two paragraphs of content& ...
随机推荐
- xml 和html 语言区别
都是标记语言(ML),一个是超文本标记语言,一个是扩展标记语言. 不同之处: 1可扩展性:HTML不具备扩展性,而XML是原标记语言,可以用于定义新的标记语言. 2侧重点: HTML侧重于如何表现信息 ...
- kali虚拟机安装提示安装系统步骤失败
首先虚拟机不论是VM还是VirtualBox都可以直接安装kali镜像文件的,不过如果你采用虚拟机默认硬盘8G设置的话,到的系统安装步骤会出错无法继续,具体原因不明. 解决办法却很简单,将虚拟机的硬盘 ...
- javascript基础-闭包
原理 函数里包含函数,即闭包. 包含函数的结果是,子函数会挟持父函数的活动对象.子函数在访问一个变量时,先读自身的活动对象,是否包含此变量,没有从父函数里找,还没有,去祖函数,层层回溯,直到windo ...
- Python有哪些好用的语言翻译方法
最近有个需求,要将几万条数据从日语翻译成中文.因为数据的获取和处理用的是python代码,所以想先尝试翻译部分也用python实现. 目前网上查到的翻译方法有百度.有道云以及谷歌翻译,下面会对这三个方 ...
- python 获取utc时间转化为本地时间
import datetime timenow = (datetime.datetime.utcnow() + datetime.timedelta(hours=8)) timetext = time ...
- php系统共享模板问题
我们在用php+html+css来写一个管理系统时,例如报名系统.投票系统,统计系统等,我们往往需要在管理后台查看每一位报名者的情况,问题接着就来了,由于比赛或者活动要求不同个,往往报名表不太一样,这 ...
- JavaSE教程-02Java基本语法-思维导图
思维导图看不清楚时: 1)可以将图片另存为图片,保存在本地来查看 2)右击在新标签中打开放大查看 1.注释 定义:用于解释说明程序作用的文字 注释类别 单行注释 格式: //注释文字 多行注释 格式: ...
- 简单两步快速学会使用Mybatis-Generator自动生成entity实体、dao接口和简单mapper映射(用mysql和oracle举例)
前言: mybatis-generator是根据配置文件中我们配置的数据库连接参数自动连接到数据库并根据对应的数据库表自动的生成与之对应mapper映射(比如增删改查,选择性增删改查等等简单语句)文件 ...
- 浅谈java内存分配和回收策略
一.导论 java技术体系中所提到的内存自动化管理归根结底就是内存的分配与回收两个问题,之前已经和大家谈过java回收的相关知识,今天来和大家聊聊java对象的在内存中的分配.通俗的讲,对象的内存分配 ...
- 为网页生成二维码(jquery.qrcode.min.js)
做网站活动页面的时候,要为每个活动生成一个二维码,虽然简单,但还是习惯记录下来. jquery.qrcode.min.js是js的一个库,主流的浏览器都支持:IE6~10, Chrome, Firef ...