文章目录
1 CSS基本语法
1.上节课我们讲到三种向html页面插入css的方法。每种方法都对应者不同的语法
(1)内联样式:在html元素前标签上用style属性来修饰单个标签内的内容
(2)内嵌样式和外联样式,选取相应的html元素进行修饰,一次可以选择多个标签来修饰他们。
2.内嵌样式和外联样式选区元素有很多的讲究,今天就主要来看看这里面的讲究。基本的语法都是
selector
{
属性:值;
}
注意css中的值不需要引号引起来
2 selector选择器
2.1 通配符选择器*
语法:.{}
现象:所有文字被修饰成为棕色
代码:
<style>
*
{
color:sienna;
}
</style>
</head>
<body>
<h1 id="first">第一个标题</h1>
<h2 id="second">第二个标题</h2>
<h3 id="third">第三个标题</h3>
</body>
2.2 根据元素的id或class,或者元素的其他属性进行选择
2.2.1.根据元素id,一个html页面id是某个元素的唯一标识符(可以没有,但有就要唯一),可以找到特定标签。
语法:#id名{}
现象:下面只有第一行文字被修饰成为棕色
代码:
<style>
#first
{
color:sienna;
}
</style>
</head>
<body>
<h1 id="first">第一个标题</h1>
<h2 id="second">第二个标题</h2>
<h3 id="third">第三个标题</h3>
</body>
2.2.2.根据元素class,一个html页面class可以找到一组标识符(这些元素都有class属性并且class属性的值相同)
语法:。class名{}
现象:下面只有第一行文字被修饰成为棕色
代码:
<style>
.smaller_than_3
{
color:sienna;
}
</style>
<title>Title</title>
</head>
<body>
<h1 class=" smaller_than_3" id="first">第一个标题</h1>
<h2 class=" smaller_than_3" id="second">第二个标题</h2>
<h3 class=" not_smaller_than_3" id="third">第三个标题
</body>
2.2.3.根据元素的属性满足的条件进行选择
语法:
这个属性值可以是自定义的,只要能抓取到对应的元素就行了
2.2.4.根据元素的标签进行选择。只要是这种标签就选中。
语法:标签名{}
现象:下面只有第二行文字被修饰成为棕色
代码:
<style>
h2
{
color:sienna;
}
</style>
</head>
<body>
<h1 id="first">第一个标题</h1>
<h2 id="second">第二个标题</h2>
<h3 id="third">第三个标题</h3>
</body>
2.3 根据标签之间的关系进行选择
2.3.1 后代选择器
1.语法: 标签1 标签2{}
2.效果:两个链接都变红
3.代码
<style>
h1 a
{
color:#FF0000;
}
</style>
</head>
<body>
<h1>
<p>
<a href="#1">链接1</a>
</p>
<a href="#2">链接2</a>
</h1>
</body>
2.3.2 子元素选择器
1.语法:标签1>标签2{}
2.效果:只有第二个链接变红
3.代码
<style>
h1>a
{
color:#FF0000;
}
</style>
</head>
<body>
<h1>
<p>
<a href="#1">链接1</a>
</p>
<a href="#2">链接2</a>
</h1>
</body>
2.3.3临近元素选择器,标签1后面第一个标签2
1.语法:标签1+标签2{}
2.效果:第2条链接变红
3.代码、
<style>
p+a
{
color:#FF0000;
}
</style>
</head>
<body>
<h1>
<p>
<a href="#1">链接1</a>
</p>
<p></p>
<a href="#2">链接2</a>
<a href="#3">链接3</a>
</h1>
</body>
2.3.4 后面的元素,相同的父元素,标签1后面所有的标签2
1.语法:标签1~标签2{}
2.效果:第2,3条链接都变红
3.代码
<style>
p+a
{
color:#FF0000;
}
</style>
</head>
<body>
<h1>
<p>
<a href="#1">链接1</a>
</p>
<a href="#2">链接2</a>
<a href="#3">链接3</a>
</h1>
</body>
2.4 组选择器
1.语法:选择器1,选择器2,选择器3{}
多个选择器选择后的标签都用享用的方法修饰
2.5 伪类元素修饰
http://www.w3school.com.cn/css/css_pseudo_classes.asp
2.6 选择器组合
选择器之间可以相互组合选择更加精确元素,必须注意空格。
例如选择更加精确链接,h1标签下class为new的链接
<style>
h1 a.new
{
color:#FF0000;
}
</style>
</head>
<body>
<h1>
<p>
<a href="#1" class="new">链接1</a>
<a href="#1">链接1.1</a>
<a href="#1" class="new">链接1.2</a>
</p>
<a href="#2">链接2</a>
</h1>
</body>
2.7交集选择器
交集选择器:将两个选择器紧挨着写在一起,作用是选取这两个选择器的交集部分,格式有三:
a.标签选择器.类名
b.标签选择器#id名
c.标签选择器[属性名="属性值"]
3 多个css修饰的效果
1.一个选择器选择之后可以有多个修饰效果
2.同时一个html文件里也可以有多个选择器选择修饰
3.但是如果多个修饰器选择了同一个html元素,那么这个html元素应该遵从哪一个修饰效果呢?
这里就要谈到选择器的优先级了,不过我们一般在应用时 不会重复对一个标签进行设置。了
https://www.cnblogs.com/zxjwlh/p/6213239.html
3.1 权重 对于不同位置的css有不同的权重
权重表示这个修饰的有效程度,如果对于标签的某个属性有两个修饰,那么标签的最终样式取决于权重大的。
3.1.2 根据css的方式划分
1.内联样式>嵌入式和外部式
因为内联样式直接在某个标签上设置样式,因此不存在重复设置的情况,更加准确,更加有效
2.嵌入式和外部式都是通过选择器实现对标签的修饰,有可能重复,因此权重较低一些。
例如下面的文字内联样式比其他样式权重高
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
p{
color: #0000FF;
}
</style>
</head>
<body>
<p style="color: #FF0000">
这是一段文字
</p>
</body>
3.1.2 根据css选择器来划分。
标签选择器的权重为0001
class选择器的权重为0010
id选择器的权重为0100
属性选择器的权重为0010
伪类选择器的权重为0010
伪元素选择器的权重为0010
后代选择器的权重:所包含选择器的权重之和
子选择器的权重:所包含选择器的权重之和
交集选择器权重为选择器之和
继承样式的权重为0000
行内样式的权重为1000,优先级最高
---------------------
作者:Stavin Li
来源:CSDN
原文:https://blog.csdn.net/m0_37285193/article/details/81567522
版权声明:本文为博主原创文章,转载请附上博文链接!
举例
例如下面虽然都选择了p,但是 body p 的权重相加后高于p,所以前者有效。
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
body p{
color: #0000FF;
}
p{
color: #FF0000;
}
</style>
</head>
<body>
<p>
这是一段文字
</p>
</body>
</html>
3.1.3 完全相同选择器
如果有完全相同的选择器,那么谁在后面谁有效。
链接文件可以把它看作是在head里style后面的补充,与嵌入式等级相同,如果有相同的选择器,还是根据出现的顺序和权重判断。
显示红色
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
p{
color: #0000FF;
}
p{
color:#FF0000;
}
</style>
</head>
<body>
<p>
这是一段文字
</p>
</body>
3.1.4 特殊情况
无条件优先的属性只需要在属性后面使用!important。它会覆盖页面内任何位置定义的元素样式。ie6不支持该属性。
3.1.5总结
当然css是面向属性来修饰,意思就是
1.如果有多个选择器都修饰了某个属性,那么就根据权重来判断这个属性在哪个选择器中有效。
2.虽然有多个选择器选择了某个标签,但是他们修饰的不同的属性,那么他们就不会相互影响了。
3.如果搞不清权重,感觉自己设计的css样式没有表现出来,可以用浏览器打开后F11,shift+ctrl+c选择标签并且查看css样式
我们至此学完了选择器的知识
以后就是学习选择了标签之后如何对他们操作了