标签：htm 通配 鼠标 utf-8 优先级 black site 语法 :link
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
/*
为span后的一个p元素设置一个背景颜色为黄色
后一个兄弟元素选择器
作用：可以选中一个元素后紧挨着的指定的兄弟元素
语法：前一个 + 后一个
*/
/* span + p{
background-color: aqua;
} */
/* 选中后边所有的兄弟元素 */
span ~ p{
background-color: black;
}
</style>
</head>
<body>
<p>我是一个p标签</p>
<p>我是一个p标签</p>
<p>我是一个p标签</p>
<span>我是一个span</span>
<p>我是一个p标签</p>
<p>我是一个p标签</p>
<p>我是一个p标签</p>
<p>我是一个p标签</p>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
/*
为所有的p元素设置一个背景颜色为黄色，出来class值为hello的
否定伪类：
作用：可以从已经选中的元素中剔除某些元素
语法：
:not(选择器)
*/
p:not(.hello){
background-color: blue;
}
/* 剔除id为p1 */
p:not(#p1){
background-color: blue;
}
</style>
</head>
<body>
<p>我是一个p标签</p>
<p>我是一个p标签</p>
<p>我是一个p标签</p>
<p class="hello">我是一个p标签</p>
<p>我是一个p标签</p>
<p>我是一个p标签</p>
<p>我是一个p标签</p>
<p>我是一个p标签</p>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
</style>
</head>
<body>
<!--
像儿子可以继承父亲的遗产一样，在CSS中，祖先元素上的样式，也会被他的后代元素所继承
利用继承，可以经一些基本的样式设置给祖先元素，这样所有的后代元素将会自动继承这些样式
并不是所有的样式都会被子元素所继承，比如：背景相关的样式都不会被继承
-->
<p style="font-size: 30px;">
我是p标签中的文字<br>
<span>我是span中的文字</span>
</p>
<span>我是p标签外的文字</span>
<p style="background-color: yellow;">
我是p标签中的文字<br>
<span>我是span中的文字</span>
</p>
<span>我是p标签外的文字</span>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=p, initial-scale=1.0">
<title>Document</title>
<style type="text/css">
/*
当使用不同的选择器，选中同一个元素时并且设置相同的样式时，
这时样式之间产生冲突，最终到底采用哪个选择器定义的样式，由选择器的优先级（权重）决定
优先级高的优先显示
优先级规则
内联样式，优先级1000
id选择器，优先级100
类和伪类，优先级10
元素选择器，优先级1
通配*，优先级0
继承的样式，没有优先级
*/
/* .p1{
background-color: yellow;
}
p{
background-color: violet;
}
#p2{
background-color: tomato;
} */
*{
font-size: 50px;
}
p{
font-size: 30px;
}
</style>
</head>
<body>
<p class="p1" id="p2" style="background-color: blue;">
我是一个p标签<br>
<span>我是p标签中的span</span>
</p>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=p, initial-scale=1.0">
<title>Document</title>
<style type="text/css">
/*
当使用不同的选择器，选中同一个元素时并且设置相同的样式时，
这时样式之间产生冲突，最终到底采用哪个选择器定义的样式，由选择器的优先级（权重）决定
优先级高的优先显示
优先级规则
内联样式，优先级1000
id选择器，优先级100
类和伪类，优先级10
元素选择器，优先级1
通配*，优先级0
继承的样式，没有优先级
当选择器中包含多种选择器时，需要将多种选择器的优先级相加然后再比较，
但是注意，选择器的优先级计算不会超过他的最大的数量级,如果选择器的优先级一样，则使用靠后的样式
并集选择器的优先级是单独计算
div,p,#p1,.hello{}
可以在样式的最后，添加一个!important,则此时该样式将会获得一个最高的优先级，
将会优先于所有的样式显示甚至超过内联样式，但是在开发中尽量避免使用!important
不方便后期的维护
*/
#p2{
background-color: blue !important;
}
p#p2{
background-color: red;
}
.p1{
background-color: rosybrown;
}
.p3{
background-color: slateblue;
}
</style>
</head>
<body>
<p class="p1" id="p2" ">
我是一个p标签<br>
<span>我是p标签中的span</span>
</p>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style type="text/css">
/*
涉及到a的伪类一共有四个
:link
:visited
:hover
:active
而这四个优先级选择器的优先级是一样的
:link和:visited之间没有顺序，可以颠倒顺序
:hover和:active之间有顺序，不能颠倒顺序
:link和:visited要放在:hover和:active之前才有效
*/
a:link{
color: slateblue;
}
a:visited{
color: slategray;
}
/* 鼠标移入 */
a:hover{
color: springgreen;
}
/* 正在被点击 */
a:active{
color: tomato;
}
</style>
</head>
<body>
<a href="http://www.baidu.com">访问过的链接</a>
<br>
<a href="http://www.baidu12344444444.com">未访问过的链接</a>
</body>
</html>
标签：htm 通配 鼠标 utf-8 优先级 black site 语法 :link
原文地址：https://www.cnblogs.com/syy1757528181/p/12945646.html
