前端----css 选择器
css 为了修饰页面作用, 让页面好看
⑴ css的引入方式
1,行内样式
body里面
2,内接样式
在html里面的 style 里面
3,外接样式
两种:①链接式: <link rel="stylesheet" href="./index.css">
②导入式:<style type="text/css">
@import url('./index.css');
</style>
优先级:
行内优先级(最高) > 内接的优先级 > 外接优先级(引入)
id 的优先级 比 class 的优先级要高
⑵ 基础选择器
id 选择器:
#app
类选择器:
.app (它选择的是共性)
标签选择器:
div...
text -decoration :underline 下划线
字体大小只有偶数 没有奇数
高级选择器
高级选择器分为:后代选择器、子代选择器、并集选择器、交集选择器
后代选择器
使用空格表示后代选择器。顾名思义,父元素的后代(包括儿子,孙子,重孙子) 1 .container p{
2 color: red;
3 }
4 .container .item p{
5 color: yellow;
6 } 子代选择器
使用>表示子代选择器。比如div>p,仅仅表示的是当前div元素选中的子代(不包含孙子....)元素p。 1 .container>p{
2 color: yellowgreen;
3 } 并集选择器
多个选择器之间使用逗号隔开。表示选中的页面中的多个标签。一些共性的元素,可以使用并集选择器 1 /*并集选择器*/
2 h3,a{
3 color: #008000;
4 text-decoration: none;
5
6 } 比如像百度首页使用并集选择器。 body,h1,h2,h3,h4,h5,h6,hr,p,blockquote,dl,dt,dd,ul,ol,li,pre,form,fieldset,legend,button,input,textarea,th,td {
margin: 0;
padding: 0
}
/*使用此并集选择器选中页面中所有的标签,页面布局的时候会使用*/ 交集选择器
使用.表示交集选择器。第一个标签必须是标签选择器,第二个标签必须是类选择器 语法: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 } 它表示两者选中之后元素共有的特性。 04-属性选择器
属性选择器,字面意思就是根据标签中的属性,选中当前的标签。
语法: 1 /*根据属性查找*/
2 /*[for]{
3 color: red;
4 }*/
5
6 /*找到for属性的等于username的元素 字体颜色设为红色*/
7 /*[for='username']{
8 color: yellow;
9 }*/
10
11 /*以....开头 ^*/
12 /*[for^='user']{
13 color: #008000;
14 }*/
15
16 /*以....结尾 $*/
17 /*[for$='vvip']{
18 color: red;
19 }*/
20
21 /*包含某元素的标签*/
22 /*[for*="vip"]{
23 color: #00BFFF;
24 }*/
25
26 /**/
27
28 /*指定单词的属性*/
29 label[for~='user1']{
30 color: red;
31 }
32
33 input[type='text']{
34 background: red;
35 }
伪类选择器
伪类选择器一般会用在超链接a标签' 我们一定要遵循"爱恨准则" LoVe HAte
/*没有被访问的a标签的样式*/
.box ul li.item1 a:link{ color: #;
}
/*访问过后的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;
}
再给大家介绍一种css3的选择器nth-child()
/*选中第一个元素*/
div ul li:first-child{
font-size: 20px;
color: red;
}
/*选中最后一个元素*/
div ul li:last-child{
font-size: 20px;
color: yellow;
} /*选中当前指定的元素 数值从1开始*/
div ul li:nth-child(){
font-size: 30px;
color: purple;
} /*n表示选中所有,这里面必须是n, 从0开始的 0的时候表示没有选中*/
div ul li:nth-child(n){
font-size: 40px;
color: red;
} /*偶数*/
div ul li:nth-child(2n){
font-size: 50px;
color: gold;
}
/*奇数*/
div ul li:nth-child(2n-){
font-size: 50px;
color: yellow;
}
/*隔几换色 隔行换色
隔4换色 就是5n+1,隔3换色就是4n+1
*/ div ul li:nth-child(5n+){
font-size: 50px;
color: red;
}
伪元素选择器
废话不多说,直接上代码!!!
/*设置第一个首字母的样式*/
p:first-letter{
color: red;
font-size: 30px; } /* 在....之前 添加内容 这个属性使用不是很频繁 了解 使用此伪元素选择器一定要结合content属性*/
p:before{
content:'alex';
} /*在....之后 添加内容,使用非常频繁 通常与咱们后面要讲到布局 有很大的关联(清除浮动)*/
p:after{
content:'&';
color: red;
font-size: 40px;
前端----css 选择器的更多相关文章
- 前端——CSS选择器
目录 前端CSS CSS三种引入方式 CSS标签选择器 基本选择器 1.元素选择器 2.类选择器 3.id选择器 4.通用选择器 组合选择器 1.后代选择器 空格 2.儿子选择器 > 3.毗邻选 ...
- web前端----css选择器样式
一.css概述 CSS是Cascading Style Sheets的简称,中文称为层叠样式表,对html标签的渲染和布局 CSS 规则由两个主要的部分构成:选择器,以及一条或多条声明. 例如 二.c ...
- day042 前端CSS选择器
今日内容: 高级选择器 1.子类选择器 用 > 表示 类比于相对路径 选择的是前一级标签的子标签 2后代选择器 用空格表示 选择的是前一级标签的后代标签 3并集选择器 用,逗号表示 选择的是用逗 ...
- 前端极易被误导的css选择器权重计算及css内联样式的妙用技巧
记得大学时候,专业课的网页设计书籍里面讲过css选择器权重的计算:id是100,class是10,html标签是5等等,然后全部加起来的和进行比较... 我只想说:真是误人子弟,害人不浅! 最近,在前 ...
- {前端CSS} 语法 Css的几种引入方式 css选择器 选择器的优先级 CSS属性相关 背景属性 边框 CSS盒子模型 清除浮动 overflow溢出属性 定位(position)z-index
前端CSS CSS介绍 CSS(Cascading Style Sheet,层叠样式表)定义如何显示HTML元素,给HTML设置样式,让它更加美观. 当浏览器读到一个样式表,它就会按照这个样式表来对文 ...
- 前端css样式及选择器
标题: 1.scc概述 2.行内样式 3.内接样式 4.外接样式(链接式) 推荐使用 5.外接样式(导入式) 6.嵌套规则 7.css选择器 1.scc(Cascading Style Shee ...
- 前端03 /css简绍/css选择器
前端03 /css简绍/css选择器 目录 前端03 /css简绍/css选择器 昨日内容回顾 html标签 常用标签 table标签:表格标签 input标签 select下拉框 textarea多 ...
- 前端学习(十):CSS选择器
进击のpython ***** 前端学习--CSS选择器 每一条CSS样式声明由两部分组成: 选择器{ 样式: } 在CSS中{}之前的部分就是"选择器","选择器&qu ...
- 前端知识之CSS(1)-css语法、css选择器(属性、伪类、伪元素、分组与嵌套)、css组合器
目录 前端基础之css 1.关于css的介绍 2.css语法 3.三种编写CSS的方式 3.1.style内部直接编写css代码 3.2.link标签引入外部css文件 3.3.标签内直接书写 4.c ...
随机推荐
- Django多表操作
多表创建 创建模型 下面通过一个简单的图书管理系统,来阐述多表的创建和查询操作 在视图函数里里定义如下代码 from django.db import models class Book(models ...
- GeoGlobe Server运维
本篇博文简单记录鄙人在管理和维护GeoGlobe Server中,遇到的一些问题以及可行的解决方案 1 关于启动内存 Server默认的启动内存是256M,当服务比较多的时候,启动就会很慢.我们可以修 ...
- Mac OSX常用工具
换Mac有几个月了,刚换的那个月折腾了整整一个月,初用OSX很不适应,这是一种错觉,就好比说了十几年汉语,突然说英语肯定很别扭,适应后就会觉得英语更加实用. Life weiboX(http://we ...
- ROI Pooling层详解
目标检测typical architecture 通常可以分为两个阶段: (1)region proposal:给定一张输入image找出objects可能存在的所有位置.这一阶段的输出应该是一系列o ...
- python中的optionParser模块
Python 有两个内建的模块用于处理命令行参数:一个是 getopt,<Deep in python>一书中也有提到,只能简单处理 命令行参数:另一个是 optparse,它功能强大,而 ...
- .innerhtml 与.innertext
示例代码: <div id="test"> <span style="color:red">test1</span> tes ...
- ubuntu14.04 Samba服务无法访问 网络名不再可用的问题
参考链接 : https://blog.csdn.net/liuyixjtu/article/details/54575514
- Java的两大数据类型
Java的两大数据类型 基本数据类型 byte,short,int,long,float,double,boolean,char byte 类别 内容 类型 byte 简介 byte 数据类型是8位. ...
- Python 中的比较:is 与 ==
转载: https://www.cnblogs.com/kiko0o0/p/8135184.html 在 Python 中会用到对象之间比较,可以用 ==,也可以用 is .但是它们的区别是什么呢? ...
- IMAGENT CLASSIFICATION WITH DEEP CONVOLUTIONAL NEURAL NETWORKS(翻译)
0 - 摘要 我们训练了一个大型的.深度卷积神经网络用来将ImageNet LSVRC-2010竞赛中的120万高分辨率的图像分为1000个不同的类别.在测试集上,我们在top-1和top-5上的错 ...