前端----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 ...
随机推荐
- 转---redshift database ---学习
摘自他人 前沿 根据最近一段时间对redshift的研究,发现一些特性比较适合我们当前的业务. 1 比如它的快速恢复能力,因为这一点,我们可以尽量在redshit里面存放一定生命周期的数据,对过期的数 ...
- vue-router 编程式路由
$route -> 使用它的属性 $router-> 使用它的方法 编程式的导航,即js控制跳转 //声明式:<router-link :to="..."> ...
- [Android] Android ViewPager 中加载 Fragment的两种方式 方式(二)
接上文: https://www.cnblogs.com/wukong1688/p/10693338.html Android ViewPager 中加载 Fragmenet的两种方式 方式(一) 二 ...
- Ext.net获取选中行数据
两种方法 1.直接返回对象列表 <DirectEvents> <Click> <ExtraParams> <ext:Prameter Name="V ...
- AutoPostBack
AutoPostBack 属性用于设置或返回当用户在 TextBox 控件中按 Enter 或 Tab 键时,是否发生自动回传到服务器的操作. 如果把该属性设置为 TRUE,则启用自动回传,否则为 F ...
- spring注解第03课 按条件加载Bean @Conditional
package com.atguigu.config; import org.springframework.context.annotation.Bean; import org.springfra ...
- 【LeetCode】108. Convert Sorted Array to Binary Search Tree
Problem: Given an array where elements are sorted in ascending order, convert it to a height balance ...
- 【SRM-07 D】天才麻将少女KPM
Description 天才麻将少女KPM立志要在日麻界闯出一番名堂.KPM上周叒打了n场麻将,但她这次又没控分,而且因为是全市参与的麻将大赛,所以她的名次范围是0..10^5.名次可能等于0是因为K ...
- 【bzoj 1492】[NOI2007]货币兑换Cash
Description 小Y最近在一家金券交易所工作.该金券交易所只发行交易两种金券:A纪念券(以下简称A券)和 B纪念券(以下简称B券).每个持有金券的顾客都有一个自己的帐户.金券的数目可以是一个实 ...
- 【SRM-09 B】撕书II
Description 琉璃手头有一黑一白两本魔法书,一本是<缟玛瑙的不在证明>,另一本是<白色相簿1.5>.传说同时打开这两本书会有奇怪的事情发生.琉璃打开一看,果然非常奇怪 ...