CSS之选择器相关
一、选择器的作用
选择器就是用来选择标签的,要使用css对HTML页面中的元素实现一对一,一对多或者多对一的控制,这就需要用到CSS选择器。
body{
color:gray;
font-size: 12px;
}
/*标签选择器*/
p{
color: red;
font-size: 20px;
}
span{
color: yellow;
}
2.id选择器:
在使用id选择器到时候需要注意一下三点:
(1)同一个页面中id不能重复。
(2)何的标签都可以设置id
(3)id命名规范 要以字母 可以有数字 下划线 - 大小写严格区分 aa和AA是两个不一样的属性值
1 #box{
2 background:green;
3 }
4
5 #s1{
6 color: red;
7 }
8
9 #s2{
10 font-size: 30px;
11 }
3.类选择器:
类选择器在使用前需要在标签中加入class类=" ",在style样式中需要 "." + 类名来使用
.lv{
color: green; }
.big{
font-size: 40px;
}
.line{
text-decoration: underline; }
公共类的简化使用:
<div>
<p class="lv big">段落1</p>
<p class="lv line">段落2</p>
<p class="line big">段落3</p>
</div>
高级选择器:
高级选择器中包括:子代选择器、后代选择器、并集选择器和交集选择器.
1.子代选择器:
使用>表示子代选择器。比如div>p,仅仅表示的是当前div元素选中的子代(不包含孙子....)元素p。
1 .container>p{
2 color: yellowgreen;
3 }
2.后代选择器:
使用空格表示后代选择器。顾名思义,父元素的后代(包括儿子,孙子,重孙子)
1 .container p{
2 color: red;
3 }
4 .container .item p{
5 color: yellow;
6 }
3.并集选择器:
这种选择器比较常见,用起来也很方便,只在多个选择器之间使用逗号隔开。表示选中的页面中的多个标签。一些共性的元素,可以使用并集选择器
1 a,b,c,d{
2 color: #008000;
3 text-decoration: none;
4
5 }
4.交集选择器:
使用.表示交集选择器。第一个标签必须是标签选择器,第二个标签必须是类选择器 语法:div.active
比如有一个<h4 class='active'></h4>这样的标签。它表示示两者选中之后元素共有的特性。
1 h4{
2 width: 100px;
3 font-size: 14px;
4 }
5 .active{
6 color: red;
7 text-decoration: underline;
8 }
9 /* 交集选择器 */
10 h4.active{
11 background: #00BFFF;
12 }
其他选择器:
其他选择器中包括:属性选择器、伪类选择器、伪元素选择器等等。重点介绍这三个。
1.属性选择器:
属性选择器,字面意思就是根据标签中的属性,选中当前的标签。
/*根据属性查找*/
/*[for]{
color: red;
}*/ /*找到for属性的等于username的元素 字体颜色设为红色*/
/*[for='username']{
color: yellow;
}*/ /*以....开头 ^*/
/*[for^='user']{
color: #008000;
}*/ /*以....结尾 $*/
/*[for$='vvip']{
color: red;
}*/ /*包含某元素的标签*/
/*[for*="vip"]{
color: #00BFFF;
}*/ /**/ /*指定单词的属性*/
label[for~='user1']{
color: red;
} input[type='text']{
background: red;
}
2.伪类选择器:
伪类选择器一般会用在超链接a标签中,使用a标签的伪类选择器,我们一定要遵循"爱恨准则" LoVe HAte
/*没有被访问的a标签的样式*/
.box ul li.item1 a:link{ color: #666;
}
/*访问过后的a标签的样式*/
.box ul li.item2 a:visited{ color: yellow;
}
/*鼠标悬停时a标签的样式*/
.box ul li.item3 a:hover{ color: green;
}
/*鼠标摁住的时候a标签的样式*/
.box ul li.item4 a:active{ color: yellowgreen;
}
3.伪元素选择器:
/*设置第一个首字母的样式*/
p:first-letter{
color: red;
font-size: 30px; } /* 在....之前 添加内容 这个属性使用不是很频繁 了解 使用此伪元素选择器一定要结合content属性*/
p:before{
content:'alex';
} /*在....之后 添加内容,使用非常频繁 通常与咱们后面要讲到布局 有很大的关联(清除浮动)*/
p:after{
content:'&';
color: red;
font-size: 40px;
}
CSS之选择器相关的更多相关文章
- CSS.01 -- 选择器及相关的属性文本、文字、字体、颜色、
与html相比,Css支持更丰富的文档外观,Css可以为任何元素的文本和背景设置颜色:允许在任何元素外围设置边框:允许改变文本的大小,装饰(如下划线),间隔,甚至可以确定是否显示文本. 什么是CSS? ...
- css基础-css选择器和css文本样式相关
css基础-css选择器和css文本样式相关: 使用link链入外部样式,页面加载时会同时加载样式 @import url(“*.css”);使用导入式,页面加载完后,才会加载样式 链接伪类的顺序 : ...
- CSS 派生选择器
派生选择器 通过依据元素在其位置的上下文关系来定义样式,你可以使标记更加简洁. 在 CSS1 中,通过这种方式来应用规则的选择器被称为上下文选择器 (contextual selectors),这是由 ...
- css节点选择器
基础选择器 基础选择器是选择器的所有选择器的基本组成元素,也最简单,包含如下5个类别: ID选择器 标签选择器 类选择器 属性选择器:类选择器算是一个特殊的属性选择器,通用的属性选择器举例如下: #c ...
- CSS基础选择器(选择器的优先级),CSS样式块( 长度/颜色/显示方式/文本样式),盒模型组成,盒模型-block,盒模型布局
CSS基础选择器 (1)id选择器: # => 标签拥有 id="user" 属性 <style> #user { width: 200px; ...
- css 元素选择器实例
一个完整的HTML页面是有很多不同的标签组成,而标签选择器,则是决定哪些标签采用相应的CSS样式.本文章向码农介绍css 标签/元素选择器以及其实例,需要的码农可以参考一下. [标签选择器] 一个完整 ...
- python 46 css组合选择器 及优先级 、属性选择器
一:css组合选择器 特性:每个选择器位可以为任意基本选择器或选择器组合 选择器分为以下几类: 群组选择器,子代(后代)选择器,相邻(兄弟)选择器,交集选择器,多类名选择器 1.群组选择器: d ...
- Python 45 长度及颜色单位 、字体样式 、文本样式 、背景样式 、css基础选择器
一:长度及颜色单位 长度单位 px(像素) in(英寸) pt(点),一个标准的长度单位,1pt = 1/72in mm(毫米) cm ...
- CSS符合选择器
CSS复合选择器 后代选择器 后代选择器又称为包含选择器,可以选择父元素里面的子元素.其写法就是把外层标签写在前面,内层标签写在后面,中间用空格分隔,当标签发生嵌套时,内层标签就成为外层标签的后代 元 ...
随机推荐
- 一秒解决--------No compiler is provided in this environment. Perhaps you are running on a JRE rather than a JDK?
在打war包时候遇到错误: Failed to execute goal org.apache.maven.plugins:maven-compiler-plugin:3.6.0:compile (d ...
- SqlServer触发器常用语法AFTER、INSTEAD OF及其详解
先创建一个简单的触发器 CREATE TRIGGER trigger_name ON table_name [WITH ENCRYPTION] FOR | AFTER | INSTEAD OF [DE ...
- 【 Linux 】Systemd 配置文件说明及编写(2)
1. 开机启动 对于支持 systemd 的软件,如果想要设置开机启动,就执行如下命令(以 http 为例): systemctl enable httpd 上面的命令相当于在 /etc/system ...
- git 操作说明
第一步:代码提交到本地仓库 第二步:更新远程服务器代码到本地,如果有冲突需要优先解决,解决冲突后执行第一步操作 第三步:推送本地代码到远程服务器,可以使用source Tree 或者工具自带的配置gi ...
- 常见问题:计算机网络/运输层/UDP
几乎不对IP增加其他东西,无连接. 优势 速度快.适合实时. 无连接建立,没有连接时延. 无连接状态. 分组首部开销小.TCP需20字节,UDP仅需8字节. 使用UDP的协议 DNS SNMP RIP ...
- nohup保证程序后台运行
前言 我们运行某些命令的时候,它会默认在前台执行.如果要进行其他操作,则需要先停掉此程序.然后就蛋疼了. 解决 碰到这种情况,我们可以使用"nohup"命令和"&am ...
- SpringBoot部署到Linux上AppserverApplication,访问不到控制层
放在本地是好好的,可以请求到,放到Linux上去的话就直接404, 解决办法: SpringBoot有个加载类叫AppserverApplication.这个大家应该都知道,我们平常都是如下写: @S ...
- [转帖]Linux运维工程师的十个基本技能点
Linux运维工程师的十个基本技能点 https://cloud.tencent.com/developer/article/1115068 本人是Linux运维工程师,对这方面有点心得,现在我说 ...
- Prometheus入门到放弃(2)之Node_export安装部署
1.下载安装 node_exporter服务需要在三台机器都安装,这里我们以一台机器为例: 地址:https://prometheus.io/download/ ### 另外两个节点部署时,需要先创建 ...
- 关于使用 symfony 3.4.32中Luckynumber 页面的 route 书写
关于symfony 3.4.32的安装与配置及第一个页面Luckynumber 的route书写 1.symfony 的安装与配置 symfony官网文档:https://symfony.com/do ...