阳江网站制作公司,今天重大新闻2021,做婚恋网站多少钱,深圳网站制作网络建设公司一、伪类选择器
1、什么是伪类选择器
伪类选择器#xff0c;顾名思义#xff0c;是一种特殊的选择器#xff0c;它用来选择DOM元素在特定状态下的样式。这些特定状态并不是由文档结构决定的#xff0c;而是由用户行为#xff08;如点击、悬停#xff09;或元素的状态顾名思义是一种特殊的选择器它用来选择DOM元素在特定状态下的样式。这些特定状态并不是由文档结构决定的而是由用户行为如点击、悬停或元素的状态如被访问、被禁用来定义的。
例如我们可以用伪类选择器来改变链接在不同状态下的颜色从而给用户以视觉反馈。 2、伪类选择器的语法 selector:pseudo-class {property: value;
}a:link {color: #FF0000;
}input:focus {background-color: yellow;
}
注意伪类名称对大小写不敏感
3、常用的伪类选择器
下面分别介绍一下比较常用几类伪类选择器
3.1 动态伪类选择器
这类选择器主要用于描述用户与元素的交互状态。例如
1:hover当鼠标悬停在元素上时的样式。
代码示例将链接的文本颜色改为红色
a:hover {color: red;
} 2:active当元素被用户激活如点击时的样式。
代码示例将按钮的背景色改为蓝色
button:active {background-color: blue;
} 3:focus当元素获得焦点如输入框被点击时的样式。
代码示例将输入框的边框颜色改为绿色
input:focus {border-color: green;
} 4:visited用于设置已访问链接的样式通常与:link一起使用来区分未访问和已访问的链接。
代码示例将已访问链接的颜色改为紫色
a:visited {color: purple;
}
3.2 UI元素状态伪类选择器
这类选择器用于描述元素在用户界面中的状态。例如
1:enabled和:disabled用于表单元素表示元素是否可用。
示例将禁用的输入框的边框颜色改为灰色
input:disabled {border-color: gray;
} 2:checked用于单选框或复选框表示元素是否被选中。
示例将选中的单选框的背景色改为黄色
input[typeradio]:checked {background-color: yellow;
}
3.3 结构伪类选择器
这类选择器用于根据元素在文档结构中的位置来选择元素。例如
1:first-child选取父元素的第一个子元素。
示例将列表中的第一个项目的背景色改为绿色
li:first-child {background-color: green;
} 2:last-child选取父元素的最后一个子元素。
示例将列表中的最后一个项目的背景色改为红色
li:last-child {background-color: red;
} 3:nth-child(n)选取父元素中第n个子元素。
示例将列表中的奇数位置的项目的背景色改为蓝色
li:nth-child(odd) {background-color: blue;
} 3.4 否定伪类选择器
这类选择器用于排除符合特定条件的元素。例如
:not(selector)选取不符合括号内选择器的所有元素。
示例将不是段落的元素的背景色改为灰色
*:not(p) {background-color: gray;
} 4、常见应用 设置鼠标悬停在元素上时的样式为已访问和未访问链接设置不同的样式设置元素获得焦点时的样式
// 示例a 标签的四种状态分别对应 4 种伪类/* 未访问的链接 */
a:link {color: blue;
}/* 已访问的链接 */
a:visited {color: red;
}/* 鼠标悬停链接 */
a:hover {color: orange;
}/* 已选择的链接鼠标点击但不放开时 */
a:active {color: #0000FF;
}
注意
a 标签的 4 个伪类(4种状态)必须按照一定顺序书写否则将会失效a:hover 必须在 CSS 定义中的 a:link 和 a:visited 之后才能生效a:active 必须在 CSS 定义中的 a:hover 之后才能生效书写顺序为a:link、a:visited、a:hover、a:active记忆方法love hate - “爱恨准则”
二、伪元素选择器
1、什么是伪元素选择器
与伪类选择器不同伪元素选择器是用来选择DOM元素的特定部分而不是整个元素。它们通常用于处理那些不是由HTML标签直接表示的内容比如首行文字、首字母或者生成的内容如内容前面的编号。
伪元素选择器允许我们对页面上的某些部分进行精确的样式控制而这些部分在HTML结构中并不存在。
想要快速入门前端开发吗推荐一个前端开发基础课程这个老师讲的特别好零基础学习无压力知识点结合代码边学边练可以免费试看试学还有各种 辅助工具和资料非常适合新手 点这里前往学习哦 2、伪元素选择器语法
selector::pseudo-element {property: value;
}p::first-line {color: #ff0000;
}h1::before {content: ♥;
}
3、常用伪元素选择器
伪元素选择器并不是针对真正的元素使用的选择器而是针对CSS中已经定义好的伪元素使用的选择器CSS中有如下四种常用伪元素选择器first-line、 first-letter、 before、after。
3.1 ::first-line
::first-line表示第一行第一行内容根据屏幕大小来决定显示多少字例如 p::first-line{}。
代码示例 stylep::first-line{color: blue;}/style 3.2 ::first-letter
::first-letter表示第一个字母例如p::first-letter{}。
代码示例 stylep::first-letter{font-size: 30px;color: blueviolet;}
/style 3.3 ::before和::after
::before表示元素的开始::after表示元素的最后before和after必须结合content属性来使用。
代码示例 stylep::after{content: hahaha;color: red;}p::before{content: hehehe;color: coral;}
/style 注意
before和after创建一个元素但是属于行内元素。新创建的这个元素在文档中是找不到的所以我们称为伪元素。before在父元素内容的前面创建元素after在父元素内容的后面插入元素。伪元素选择器和标签选择器一样权重为1。
三、伪类与伪元素选择器的区别
CSS中的伪类选择器和伪元素选择器都是用来选取DOM中特定元素的选择器。具体区别如下
伪类的操作对象是文档树中已有的元素而伪元素则创建了一个文档数外的元素。因此伪类与伪元素的区别在于有没有创建一个文档树之外的元素伪类本质上是为了弥补常规CSS选择器的不足以便获取到更多信息伪元素本质上是创建了一个有内容的虚拟容器CSS3 中伪类和伪元素的语法不同在 CSS3 中已经明确规定了伪类用一个冒号来表示而伪元素则用两个冒号来表示可以同时使用多个伪类而只能同时使用一个伪元素。
总的来说伪类选择器关注的是元素在特定状态下的样式变化而伪元素选择器则是通过创建新的元素来实现特定的样式效果。两者都是CSS中非常强大的工具可以帮助开发者实现复杂的页面布局和动态效果。
伪类选择器和伪元素选择器虽然不是真正的元素但它们在CSS中扮演着极其重要的角色。了解并熟练运用它们可以让你的网页更加生动、互动性更强同时也能更好地控制页面的布局和内容的表现。
