当前位置：首页 > wzjs >正文

上海平台网站建设报中国建设网官方网站

wzjs 2025/8/11 2:16:04

上海平台网站建设报,中国建设网官方网站,网站开发员属于,一号网站建设作用：选中特殊状态的元素一、动态伪类 1. :link 超链接未被访问的状态。 2. :visited 超链接访问过的状态。 3. :hover 鼠标悬停在元素上的状态。 4. :active 元素激活的状态。什么是激活？ —— 按下鼠标不松开。注意点&#xf…

作用：选中特殊状态的元素

一、动态伪类

1. :link 超链接 未被访问 的状态。

2. :visited 超链接 访问过 的状态。

3. :hover 鼠标悬停在元素上的状态。

4. :active 元素激活的状态。

什么是激活？ —— 按下鼠标不松开。

注意点：遵循 LVHA 的顺序，即： link 、 visited 、 hover 、 active 。

5. :focus 获取焦点的元素

表单类元素才能使用 :focus 伪类。

当用户：点击元素、触摸元素、或通过键盘的 “ tab ” 键等方式，选择元素时，就是获

得焦点。

<!DOCTYPE html>
<html lang="zh-cn"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>伪类选择器动态伪类</title><style>/* 选中的是没有访问过的a元素 */a:link {color: green;}/* 选中的是访问过的a元素 */a:visited {color: red;}/* :hover 鼠标悬停在元素上的状态。 */a:hover {color: blue;}/* 4. :active 元素激活（按下鼠标不松开。）的状态  */a:active {color: chocolate;}/* 5. :focus 获取焦点的元素。 当用户：点击元素、触摸元素、或通过键盘的 “ tab ” 键等方式，选择元素时，就是获
得焦点。 */input:focus,select:focus  {background-color: aqua;color: red;}</style></head><body><a href="https://www.baidu.com">去百度</a><a href="https://www.jd.com">去京东</a><input type="text"><select ><option value="beijing">北京</option><option value="shanghai">上海</option><option value="sz">深圳</option></select></body></html>

二、结构伪类

常用的：

1. :first-child 所有兄弟元素中的第一个。

2. :last-child 所有兄弟元素中的最后一个。

3. :nth-child(n) 所有兄弟元素中的第 n 个。

4. :first-of-type 所有同类型兄弟元素中的第一个。

5. :last-of-type 所有同类型兄弟元素中的最后一个。

6. :nth-of-type(n) 所有同类型兄弟元素中的第n个。

关于 n 的值：

1. 0 或不写：什么都选不中 —— 几乎不用。

2. n ：选中所有子元素 —— 几乎不用。

3. 1~正无穷的整数：选中对应序号的子元素。

4. 2n 或 even ：选中序号为偶数的子元素。

5. 2n+1 或 odd ：选中序号为奇数的子元素。

6. -n+3 ：选中的是前 3 个。

/* 选中的是div的第一个儿子p元素（按照所有兄弟计算的）*/div >p:first-child{color: red;}<div><p>张三：98分</p><p>李四：88分</p><p>王五：78分</p><p>赵六：68分</p></div>

 /* 选中的是div的第一个儿子p元素（按照所有兄弟计算的）因为div下的儿子符合条件的是李四但是 第一个儿子选中的范围是第一个张三，张三没有p标签所以无效div>p:first-child {color: red;}<div><span>张三：98分</span><p>李四：88分</p><p>王五：78分</p><p>赵六：68分</p></div>

 /* 选中的是div的后代p元素，且p的父亲是谁无所谓，但p必须是其父亲的第一个儿子（按照所有兄弟计算的） —— 看结构3 */div p:first-child {color: red;}<!-- 结构3 --><p>测试1</p><div><p>测试2</p><marquee><p>测试3</p><p>张三：98分</p></marquee><p>李四：88分</p><p>王五：78分</p><p>赵六：68分</p></div>

 /* 选中的是其父亲的第一个儿子的 */  
p:first-child {color: red;}<p>测试1</p><div><p>测试2</p><marquee><p>测试3</p><p>张三：98分</p></marquee><p>李四：88分</p><p>王五：78分</p><p>赵六：68分</p></div>

三、否定伪类

:not( 选择器 ) 排除满足括号中条件的元素。

<!DOCTYPE html>
<html lang="zh-cn"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>伪类选择器否定伪类</title><style>/* :not(选择器) 排除满足括号中条件的元素。 *//* div>p:not([class="fail"]){color: blue;} *//* 选中的是div的儿子p元素，但是排除类名为fail的元素 *//* div>p:not(.fail){color: chocolate;} */div>p:not(:first-of-type){color: chartreuse;}</style></head><body><div><p>张三：98分</p><p>李四：88分</p><p>王五：78分</p><p>赵六：68分</p><p class="fail" title="你要加油啊！孙七">孙七：58分</p><p class="fail" title="你要加油啊！老八">老八：48分</p></div>
</body></html>

四、UI伪类：

1. :checked 被选中的复选框或单选按钮。

2. :enable 可用的表单元素（没有 disabled 属性）。

3. :disabled 不可用的表单元素（有 disabled 属性）。

<!DOCTYPE html>
<html lang="zh-cn"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>伪类选择器UI伪类</title><style>/* 四、UI伪类：
1. :checked 被选中的复选框或单选按钮。
2. :enable 可用的表单元素（没有 disabled 属性）。
3. :disabled 不可用的表单元素（有 disabled 属性）。 *//* 选中的是是元素选择器input  的复选框或单选按钮*/input:checked {width: 100px;height: 100px;}/* 选中的是被禁用的input元素 */input:disabled {background-color: gray;}/* 选中的是可用的input元素 */input:enabled {background-color: green;}</style></head><body><input type="checkbox"><input type="radio" name="gender"><input type="radio" name="gender"><input type="text"><input type="text" disabled>
</body></html>

五、伪元素选择器

作用：选中元素中的一些特殊位置。

常用伪元素：

::first - letter 选中元素中的 第一个文字 。

::first - line 选中元素中的 第一行文字 。

::selection 选中 被鼠标选中的 内容。

::placeholder 选中输入框的 提示文字 。

::before 在元素 最开始 的位置，创建一个子元素（必须用 content 属性指定内容）。

::after 在元素最后的位置，创建一个子元素（必须用 content 属性指定内容）。

<!DOCTYPE html>
<html lang="zh-cn"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>伪类选择器伪元素选择器</title><style>/* 常用伪元素：
::first-letter 选中元素中的第一个文字。
::first-line 选中元素中的第一行文字。
::selection 选中被鼠标选中的内容。
::placeholder 选中输入框的提示文字。
::before 在元素最开始的位置，创建一个子元素（必须用 content 属性指定内容）。
::after 在元素最后的位置，创建一个子元素（必须用 content 属性指定内容）。 *//* 什么是伪元素？ —— 很像元素，但不是元素（element），是元素中的一些特殊位置 *//* ::first-letter 选中元素中的第一个文字。 */div::first-letter {font-size: 50px;color: aqua;}/* ::first-line 选中元素中的第一行文字。 */div::first-line{background-color: greenyellow;}/* ::selection 选中被鼠标选中的内容。 */div::selection{color: red;}/* ::placeholder 选中输入框的提示文字。 */input::placeholder{background-color:gold ;}/* ::before 在元素最开始的位置，创建一个子元素（必须用 content 属性指定内容）。 */p::before{content:"￥";}p::after{content:".00";}</style></head><body><div>Lorem ipsum dolor sit amet consectetur adipisicing elit. Sunt quibusdam amet eligendi velit dolore sequi,exercitationem consequatur, quis maiores tempore accusantium ipsum aspernatur iusto fugiat fuga natus estplaceat. Accusamus maiores culpa et sunt dolorum incidunt. Ducimus in odio tempora minima provident deleniti, exvoluptatem facere, molestias unde exercitationem pariatur rem vero ut quidem quaerat aliquam, nam debitisperspiciatis. Facere?</div><br><input type="text" placeholder="请输入您的用户名"><p>199</p><p>299</p><p>399</p><p>499</p>
</body></html>