CSS学习笔记--选择器
程序员文章站
2024-01-26 15:13:10
...
1.统配选择器
作用：给所有元素引用样式
语法：
*{ … }
运行结果：
2.id选择器（唯一不重复）
语法：
#i1{
…
}
3.class选择器
-可以同时为一个元素设置多个class属性值，多个属性值之间用空格隔开
语法：
.名称{
…}
4.标签选择器
作用：可以选择页面中的所有指定元素
语法：
元素类型{
…
}
5.-层级选择器(空格隔开)
语法：
div span{…}
6.组合选择器(逗号隔开)
可以同时选中多个选择器对应的元素
语法：
选择器1，选择器2，选择器N
#c1,.c2,div{
…
}（并集）
7.伪类选择器
专门用来表示元素的一种特殊状态
比如：访问过的超链接，普通股的超链接，获取焦点的文本框
普通链接
<style>
a:link{
color: red;
}
</style>
</head>
<body>
<h1>悯农</h1>
<a href="http://www.baidu.com">我是一个超链接</a>
<br/><br/>
<a href="http://www.mvcat.com">我是一个超链接2</a>
访问过的链接（由于涉及用户隐私，只能设置颜色）
a:visited{
color: red;
}
</style>
</head>
<body>
<h1>悯农</h1>
<a href="http://www.baidu.com">我是一个超链接</a>
<br/><br/>
<a href="http://www.google.com">我是一个超链接2</a>
表示鼠标移入的状态
a:hover{
background-color: orangered;
}
</style>
</head>
<body>
<h1>悯农</h1>
<a href="http://www.baidu.com">我是一个超链接</a>
<br/><br/>
<a href="http://www.google.com">我是一个超链接2</a>
超链接被点击的状态
<style>
a:active{
background-color: orangered;
}
</style>
</head>
<body>
<h1>悯农</h1>
<a href="http://www.baidu.com">我是一个超链接</a>
<br/><br/>
<a href="http://www.google.com">我是一个超链接2</a>
</body>
PS:
-优先级，标签上style优先，编写顺序，就近原则
上一篇： MySQL存储引擎
下一篇： docker 发布镜像