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. webpack知识分享

    webpack 4 webpack 四大核心概念: 入口(entry) // 打包入口 输出(output) : 打包后输出的位置配置 loader  : loader 让 webpack 能够去处理 ...

  2. (一)django创建

    1.打开终端,安装django:输入pip install django 2.创建django项目:django-admin startproject myweb 3.启动项目:进入到myweb,输入 ...

  3. Java自动化测试框架-06 - 来给你的测试报告化个妆整个形 - (下)(详细教程)

    简介 经过上一次的化妆和整形,有客户提出需求能不能将那个普通会员的套餐再升级一下,再漂亮一点.所以这次咱们就来看看从哪里下刀可以使它变得再漂亮一点点. 上一篇文章修改了一些基本的ReportNG信息, ...

  4. zabbix清理监控历史mysql数据

    问题描述: 今天同事说有个zabbix监控数据库历史数据越来越多了, 让我帮忙清一下,顺便熟悉练练手,做个笔记 zabbix监控运行一段时间以后,会留下大量的历史监控数据 zabbix数据库一直在增大 ...

  5. 【排列组合】给定一个M*N的格子或棋盘,从左下角走到右上角的走法总数(每次只能向右或向上移动一个方格边长的距离)

    版权声明:本文为CSDN博主「梵解君」的原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接及本声明. 原文链接:https://blog.csdn.net/hadeso/art ...

  6. Nexus 上传项目到私服

    1. maven setting配置 <?xml version="1.0" encoding="UTF-8"?> <!-- Licensed ...

  7. 定制linux镜像并自动化安装

    最近碰到个需求:要在内网环境安装centos6.5系统并搭建服务,但由于自动部署脚本里安装依赖包使用的是yum安装,而服务器无法连接外网,实施人员也不会本地yum源搭建….. 本来想法是打算把需要的依 ...

  8. python items和setdefault函数

    items() dict = {'runoob': '菜鸟教程', 'google': 'Google 搜索'} print("Value : %s" % dict.setdefa ...

  9. 「刷题」JZPKIL

    这道反演题,真牛逼. 以下用$B$代表伯努利数,$l*g=f$代表狄利克雷卷积,先推式子. 对于给出的$n,x,y$求一百组数据的$ans$ $\begin{array}{rcl} ans & ...

  10. JavaScript 域名学习及对象的继承实现

    1.定义命名空间 var Namespace = new Object();   Namespace.register = function(path){     var arr = path.spl ...