您现在的位置是：主页 > news > 广东在线网站建设/北京网络营销
广东在线网站建设/北京网络营销
admin2025/5/18 20:26:11【news】
简介广东在线网站建设,北京网络营销,dede做的网站打不开,天津做小程序公司一、CSS选择器常见的有几种?常见的有1、id选择器见自己编写的如下代码：Document#licai {background-color: red;font-size: 60px;}这是id选择器这不是id选择器2、class选择器Document.licai {background-color: red;font-size: 60px;}这是class选择器这不是class选…
一、CSS选择器常见的有几种?
常见的有
1、id选择器
见自己编写的如下代码：
Document#licai {
background-color: red;
font-size: 60px;
}
这是id选择器
这不是id选择器
2、class选择器
Document.licai {
background-color: red;
font-size: 60px;
}
这是class选择器
这不是class选择器
3、属性选择器
3.1 属性名加属性值型
Documentinput[type="password"]
{
margin: 10px;
width: 200px;
}
用户名
密码
3.2纯属性名型
Documentimg[title]
{
border: 2px solid red;
}
4、分组选择器
用“,”隔开，表示该组元素属性都会作用
Document.fenzu,p
{
border: 2px solid red;
}
这是h1标题
这也是h1标题
这是div里的h1
这是div里的p
5、派生选择器
Document.paisheng h1
{
background-color: #999;
}
这是h1标题
这是div里的h1
这也是div里的h1标题
这是div里的p
6、伪类选择器
比如.hover、::selection、.action、:first-child、:last-child、:first-of-type、:last-of-type、:nth-of-type(n)、:nth-of-last-type(n)等
Document#weilei
{
width: 200px;
color: #999;
background-color:red;
transition-property:width;
transition-duration:3s;
}
#weilei:hover
{
width: 400px;
}
这是伪类选择器
又例如：
Documenth1::selection
/*
1、::selection只支持color/background/cursor/outline四种属性；
2、firefox支持替代::-moz-selection;
*/
{
color: red;
background: blue;
}
选中后字体变红色背景变蓝色
选中后不变色
7、伪元素选择器
:after、:before等
Documentul,li
{
list-style:none;
}
li:before
{
content: "这是前置字 ";
color: red;
background-color: green;
}
li:after
{
content: " 这是后置字 ";
color: yellow;
background: blue;
font-weight: bold;
}
- 我的前面需要增加“这是前置字”，我的后面需要增加“这是后置字”
- 我的前面需要增加“这是前置字”，我的后面需要增加“这是后置字”
- 我的前面需要增加“这是前置字”，我的后面需要增加“这是后置字”
- 我的前面需要增加“这是前置字”，我的后面需要增加“这是后置字”
8、组合选择器
比如E,F/E F(后代选择器)/E>F(子元素选择器)/E+F(直接相邻元素选择器----匹配之后的相邻同级元素)/E~F(普通相邻元素选择器----匹配之后的同级元素)
Document.inside+h1
{
background: red;
}
这是外层DIV
这是h1大标题
这是外层DIV里的div
这是中层div的h1标题1
这是中层div里的段落
这是中层div的h1标题2
这是内层div的h1标题
这也是h1大标题
这还是h1大标题
二、选择器的优先级是怎样的?
选择器优先级由高到低分别为：
!important > 作为style属性写在元素标签上的内联样式 >id选择器>类选择器>伪类选择器>属性选择器>标签选择器> 通配符选择器(* 应少用)>浏览器自定义；
当比较多个相同级别的CSS选择器优先级时，它们定义的位置将决定一切。下面从位置上将CSS优先级由高到低分为六级：
1、位于
