CSS选择器

元素选择器

p{color:red;}

ID选择器

#li{
background-color:red;
}

类选择器

.c1{
font-size:15px;
}

注意:

样式类名不要用数字开头(有的浏览器不认)

标签中的class属性如果有多个,要用空格隔开。

通用选择器:

*{
color:red;
}

组合选择器

后代选择器

/*li内部的标签设置字体颜色*/
li a{
color:red;
}

儿子选择器

/*选择所有父级是<div>元素的<p>元素*/
div>p{
font-family:"Arial Black,arial-black,cursive";
}

毗邻选择器

/*选择所有紧接着<div>元素之后的<p>元素*/
div+p{
margin:15px;
color:red;
}

弟弟选择器

/*li后面所有的兄弟P标签*/
#li~p{
border:2px solid royalblue;
}

                                                    属性选择器

/*用于选取带有指定属性的元素*/
p[title]{
color;red
}
/*用于选取带有指定属性和值的元素*/
p[title="123"]{
color:green;
}

不怎么常用的属性选择器

/*找到所有title属性以hello开头的元素*/
[title^="hello"]{
color:red;
}

/*找到所有title属性以hello结束的元素*/[title$="hello"]{color:red;}

/*找到所有title属性中包含(字符串包含)hello的元素*/[title*=“hello”]{color:red;}/*找到所有title属性以hello结尾的元素*/[title*="hello"]{color:red;}

/*找到所有title属性(有多个值或值以空格分隔)中有一个值为hello的元素*/[title~="hello"]{color:red;}

                                                             分组和嵌套

分组

当多个元素的样式相同的时候,我们没有必要重复地为每个元素都设置样式,我们可以通过多个选择器之间使用逗号分组选择器来统一设置元素样式。

例如:

div,p{
color:red;
}

上面的代码为div标签和p标签统一设置字体为红色。

通常,我们会分两行来写,更清晰:

div,
p{
color:red;
}

嵌套

多种选择器可以混合起来使用,比如:c1类内部所有p标签设置字体颜色为红色。

.c1 p{
color:red;
}

                                                          伪类选择器

/*未访问的链接*/
a:link{
color:red;
}

/*已访问的链接*/
a:visited{
color:blue;
}

/*把鼠标移动到链接上*/
a:hover{
color:green;
}

/*选定的链接*/
a:active{
color:black;
}

/*input输入框获取焦点时样式*/
input:focus{
outline:none;
backgroune-color:#eee;
}

                                                   伪元素选择器

first-letter

常用的给首字母设置特殊样式:

p:first-letter{
font-size:50px;
color:red;
}

before

/*在每一个<p>元素之前插入内容*/
p:before{
content:"*"
color:red:
}

after

/*在每个<p>元素之后插入内容*/
p:after{
content:"[?]";
color:blue;
}

 before和after多数用来清除浮动。

选择器的优先级

css继承

继承是css的一个特征,它是依赖于祖先~后代的关系的。继承是一种机制它允许不仅可以应用于某个特定的元素。还可以应用于它的后代。例如一个body定义了的字体颜色也会应用到段落的文本中。

body{
color:red;
}

此时页面上所有标签都会继承body的字体颜色。然而caa继承的权重是非常低的,是比普通的权重还要低的0。我们只要给对应的标签设置字体颜色就可以覆盖它继承的样式。

p{
color:green;
}

 

 

web前端之css基础的更多相关文章

  1. WEB前端开发CSS基础样式全面总结

    Web前端开发css基础样式全面总结 颜色和单位的使用 颜色 用颜色的名字表示颜色,比如:red 用16进制表示演示 比如:#FF0000 用rgb数值表示颜色,rgb(红,绿,蓝),每个值都在0-2 ...

  2. Web前端温故知新-CSS基础

    一.CSS定义与编写CSS 1.1 CSS的定义 全名:Cascading Style Sheets -> 层叠样式表 定义:CSS成为层叠样式表,它主要用于设置HTML页面中的文本内容(字体. ...

  3. 好程序员web前端分享CSS基础篇

    学习目标 1.CSS简介 2.CSS语法 3.样式的创建 4.两种引入外部样式表的区别 5.样式表的优先级和作用域 6.CSS选择器 7.选择器的权重 8.浮动属性的简单应用 9.HTML.CSS注释 ...

  4. Web前端开发CSS基础

    CSS 层叠样式表(英文全称:Cascading Style Sheets),是一种用来表现HTML(标准通用标记语言的一个应用)或XML(标准通用标记语言的一个子集)等文件样式的计算机语言.CSS不 ...

  5. Web前端开发css基础样式总结

    颜色和单位的使用    颜色        用颜色的名字表示颜色,比如:red        用16进制表示演示 比如:#FF0000        用rgb数值表示颜色,rgb(红,绿,蓝),每个值 ...

  6. 好程序员web前端分享HTML基础篇

    好程序员web前端分享HTML基础篇,最近遇到很多新手,都会问,如果要学web前端开发,需要学什么?难不难学啊?多久能入门之类的问题?那么今天好程序员就先来给大家分享一下web前端学习路线:HTML基 ...

  7. 好程序员web前端分享css常用属性缩写

    好程序员web前端分享css常用属性缩写,使用缩写可以帮助减少你CSS文件的大小,更加容易阅读.css缩写的主要规则如下: 颜色 16进制的色彩值,如果每两位的值相同,可以缩写一半,例如: #0000 ...

  8. Python web前端 02 CSS

    Python web前端 02 CSS 一.选择器 1.CSS的几种样式(CSS用来修饰.美化网页的) #建立模板 复制内容--->SETTING---> Editor -----> ...

  9. Python web前端 03 CSS属性

    Python web前端 03 CSS属性 一.文字.文本属性 1.文字属性 font-family #字体类型浏览器默认的字体是微软雅黑,字体中有多个字体的时候,如果前面的字体没有就使用后面的字体 ...

随机推荐

  1. 虚拟机--python环境配置

    1.安装VMware 2.安装Ubantu (1)打开VMware,打开编辑-->首选项,更改虚拟机存储的位置. (2)创建新的虚拟机(自定义): (3)编辑虚拟机--点击CD/VCD--更改成 ...

  2. 针对工程实践项目的用例建模Use Case Modeling

    一.什么是用例建模(Use Case Modeling) 1.用例(Use Case) (1)概念:用例是软件工程或系统工程中对系统如何反应外界请求的描述,是一种通过用户的使用场景来获取需求的技术. ...

  3. ubuntu12.04 添加程序启动器

    方法: 1. 在/usr/share/applications目录下创建eclipse启动器配置文件 cd /usr/share/applications vim eclipse.desktop 2. ...

  4. R.Swift优雅加载资源文件

    在新的项目中,接触到了一个很不错的框架R.swift,可以帮助更方便安全的使用资源文件,相信已经使用过的或者还没有接触过的,一旦使用过了解过它,会爱上这个框架工具! 一.R.swift特点 当项目bu ...

  5. Python enumerate() 函数笔记

    enumerate函数说明: 函数原型:enumerate(sequence, [start=0])  #第二个参数为指定索引 功能:将可循环序列sequence以start开始分别列出序列数据和数据 ...

  6. 关于RocketMQ消息消费与重平衡的一些问题探讨

    其实最好的学习方式就是互相交流,最近也有跟网友讨论了一些关于 RocketMQ 消息拉取与重平衡的问题,我姑且在这里写下我的一些总结. ## 关于 push 模式下的消息循环拉取问题 之前发表了一篇关 ...

  7. 从一个简单的例子看spring ApplicationContext上下文隔离

    前言 某天,浏览博客园的时候,对首页上面的一篇文章,标题为:<<一个普通类就能干趴你的springboot,你信吗?>>,文章链接:https://www.cnblogs.co ...

  8. Git学习以及使用

    最近学习了下git的使用,不得不感叹真的是甩了svn几条街 官网下载实在太慢,附加一个网站方便大家下载https://github.com/waylau/git-for-win 安装好后打开Git B ...

  9. 学习笔记12JS异步请求

    *一般用JS来监听按钮事件,都应该先监听页面OnLoad事件. *Js写在哪里,就会在页面解析到哪里执行. 异步请求:所谓异步请求,就是使用JS来监听按钮点击事件,并且发送请求,等到回复后,再使用JS ...

  10. 模板(ac):启发式合并

    首先说明一点:线段树合并不是启发式合并. 启发式合并的大概内容就是:把小的数据结构按照这个数据结构的正常插入方法,一个一个地暴力塞进去. 而线段树合并显然不是这个东西. 这道题的题解太烂了,所以耽误了 ...