前言
在介绍css选择符之前,先科普一下css选择符的意义,它是用于指出规则所要选择的元素,换句话就是定位特定元素,例如p,li,定位到p元素或者li元素上面,而选择符分为上下文选择符,ID和类选择符,属性选择符。
内容
上下文选择符 ——基于祖先和同胞中选择一个元素
html代码:
<html>
<head>
<meta charset="utf-8" />
<title>上下文选择符</title>
<link rel="stylesheet" href="css/style.css" />
</head>
<body>
<section>
<h2>An H2 Heading</h2>
<p>This is paragraph 1</p>
<p>Paragraph 2 has <a href="#">a link</a> in it.</p>
<a href="#">Link</a>
</section>
</body>
</html>
/*
作者:cyl
时间:2018-02-02
描述:上下文选择符
@charset "utf-8";
**/
/*1.css样式:实现section下的p元素颜色为绿色>*/
section p{
color:green
}
/*等价方式*/
section>p{
color:green
}
/*2.将h2紧邻的p元素改变字体的颜色为红色*/
h2+p{
color:red
}
/*3.将h2后面的p元素的字体全部改变为红色*/
h2~p{
color:red
}
/*4.将所有元素的字体全部改红色*/
*{
color:red
}
总结归纳起来上下文选择符其实分为三种,一种是普通的父与子的关系,一种同胞的关系,最后一种比较特殊那就是上下没有关系,用*表示:
ID和类选择符
什么时候使用ID,什么时候使用类?
ID的用途在页面上唯一标识一个元素,类的目的是为了唯一标识相同特征的元素。
类和ID选择符使用非常广泛,小编这次着力介绍一种伪类,放在这里讲解一下:
伪类主要UI和结构化伪类,UI会在html中处于某一种状态,为该元素应用css样式,结构化伪类在标记中存在某种结构上的关系,比如为某一个元素是一组元素的一个或者最后一个。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>伪类</title>
<link rel="stylesheet" href="css/style.css" />
</head>
<body>
<p class="age">25</p>
<ol class="results">
<li>my name</li>
<li>my age</li>
<li>my college</li>
</ol>
<a href="#more_info">你来点我啊</a>
<h2 id="more_info">this is the infomation you are looking for</h2>
<input type="text" />
</body>
</html>
/*
作者:cyl
时间:2018-02-02
描述:伪元素,结构化伪类,伪类
* ::before::after*/
@charset "utf-8";
/*在age类前加内容"age"和"years:"*/
p.age::before{
content: "Age:";
}
p.age::after{
content: "years.";
}
/*将age类的第一个字母放大3倍*/
p.age::first-letter{
font-size: 300%;
}
/*将age类段落的第一行设为小型大写字母*/
p.age::first-line{
font-variant: small-caps;
}
/*结构化伪类:first-child :last-child :nth-child(?)*/
ol.results li:first-child{
color:red;
}
ol.results li:last-child{
color: green;
}
ol.results li:nth-child(2){
color: peachpuff;
}
/*等待用户点击时字体为黑色*/
a:link{
color: black;
}
/*当访问过链接后字体编程灰色*/
a:visited{
color: gray;
}
/*当鼠标悬浮在链接上时去掉下划线*/
a:hover{
text-decoration: none;
}
/*正在被点击时字体为红色*/
a:active{
color: red;
}
/*target为页面中另一个元素的目标元素*/
#more_info:target{
background: #eee;
}
/*input框获取焦点时设置框边界大小为1px 实线,颜色为蓝色*/
input:focus{
border: 1px solid blue;
}
属性选择符
属性选择符结构如下:
标签名[属性名]或者 标签名[属性名=值]
<img src="images/yellow_flower.jpg" title="yellow flower" alt="yellow flower" />
/*带有title属性的html元素显示2像素的蓝色边框*/
img[title] {border:2px solid blue;}
/*更加明确的方式*/
img[title="red flower"] {border:2px solid green;}
介绍完这些选择符之后,在我们实践却又一些样式没有达到我们预想的结果,原因可能是因为我们没有搞清楚层叠样式规则:
找
1 找到应用给每一个元素和属性的所有声明
2 按照顺序和权重排序
权重可以声明:
/**空格 !important 分号( ; )用于加重声明的权重。*/
p {color:green !important; font-size:12pt;}
3 按照特指度排序
层叠样式优先级可以通过计算特指度来达到:
I(指id值)-C(指类值)-E(指标签值)
ICE并非真正的三位数,只不过大多情况下看成一个三位数没有问题,三位数最大的胜出。
选择符中有一个id,在I的位置上+1,有一个class,在C的位置上加1,有一个标签名,在E的位置上加1。
4 顺序决定权重
总结
系统的学习一下css基础知识对于更加快速得到自己想要的页面效果具有很大的作用,希望对你有帮助!