做网站宣传语,服务器创建多个网站,asp网站制作,企业网站页头背景图CSS复合选择器#xff08;二#xff09; 伪类选择器一、动态伪类#xff1a;二、结构伪类三、否定伪类#xff1a;四、UI伪类#xff1a;五、目标伪类#xff08;了解#xff09;六、语言伪类#xff08;了解#xff09; 伪类选择器
作用#xff1a;选中特殊状态的元… CSS复合选择器二 伪类选择器一、动态伪类二、结构伪类三、否定伪类四、UI伪类五、目标伪类了解六、语言伪类了解 伪类选择器
作用选中特殊状态的元素。 如何理解“伪” ? — 虚假的不是真的。 如何理解“伪类” — 像类( class )但不是类是元素的一种特殊状态。 常用的伪类选择器
一、动态伪类
: link 超链接未被访问的状态。:visited 超链接访问过的状态。: hover 鼠标悬停在元素上的状态。:active 元素激活的状态。 什么是激活—— 按下鼠标不松开。 注意点遵循LVHA 的顺序即link 、visited 、hover 、active 。 : focus 获取焦点的元素。 表单类元素才能使用:focus 伪类。 当用户点击元素、触摸元素、或通过键盘的 “tab ” 键等方式选择元素时就是获得焦点。 代码如下
!DOCTYPE html
html langzh-CN
headmeta charsetUTF-8title伪类选择器_动态伪类/titlestyle/* 选中的是没有访问过的a元素 */a:link {color: orange;}/* 选中的是访问过的a元素 */a:visited {color: gray;}/* 选中的是鼠标悬浮状态的a元素 */a:hover {color: skyblue;}/* 选中的是激活状态的a元素 */a:active {color: green;}/* 选中的是鼠标悬浮的span元素 */span:hover {color: green;}/* 选中的是激活的span元素 */span:active {color: red;}/* 选中的是获取焦点状态的input元素、获取焦点状态的select元素 */input:focus,select:focus {color: orange;background-color: green;}/style
/head
bodya hrefhttps://www.baidu.com去百度/aa hrefhttps://www.jd.com去京东/aspan前端/spanbrinput typetextbrinput typetextbrinput typetextselectoption valuebeijing北京/optionoption valueshanghai上海/option/select
/body
/html二、结构伪类
常用的
:first-child 所有兄弟元素中的第一个。:last-child 所有兄弟元素中的最后一个。:nth-child(n) 所有兄弟元素中的第 n 个。:first-of-type 所有同类型兄弟元素中的第一个。:last-of-type 所有同类型兄弟元素中的最后一个。:nth-of-type(n) 所有同类型兄弟元素中的 第n个 。
关于n的值 0或不写什么都选不中 —— 几乎不用。n选中所有子元素 —— 几乎不用。1~正无穷的整数 选中对应序号的子元素。2n 或 even 选中序号为偶数的子元素。2 n1 或 odd 选中序号为奇数的子元素。-n3 选中的是前3个。 了解即可
:nth-last-child(n) 所有兄弟元素中的倒数第 n 个。:nth-last-of-type(n) 所有同类型兄弟元素中的 倒数第n个 。:only-child 选择没有兄弟的元素独生子女。:only-of-type 选择没有同类型兄弟的元素。: root 根元素。: empty 内容为空元素空格也算内容。
代码如下
!DOCTYPE html
html langzh-CN
headmeta charsetUTF-8title伪类选择器_结构伪类_1/titlestyle/* 选中的是div的第一个儿子p元素按照所有兄弟计算的 —— 看结构1 *//* divp:first-child {color: red;} *//* 选中的是div的第一个儿子p元素按照所有兄弟计算的 —— 看结构2 *//* divp:first-child {color: red;} *//* 选中的是div的后代p元素且p的父亲是谁无所谓但p必须是其父亲的第一个儿子按照所有兄弟计算的 —— 看结构3 *//* div p:first-child {color: red;} *//* 选中的是p元素且p的父亲是谁无所谓但p必须是其父亲的第一个儿子按照所有兄弟计算的 —— 看结构3 */p:first-child {color: red;}/style
/head
body!-- 结构1 --!-- divp张三98分/pp李四88分/pp王五78分/pp赵六68分/p/div --!-- 结构2 --!-- divspan张三98分/spanp李四88分/pp王五78分/pp赵六68分/p/div --!-- 结构3 --p测试1/pdivp测试2/pmarqueep测试3/pp张三98分/p/marqueep李四88分/pp王五78分/pp赵六68分/p/div
/body
/html!DOCTYPE html
html langzh-CN
headmeta charsetUTF-8title伪类选择器_结构伪类_2/titlestyle/* 选中的是div的第一个儿子p元素按照所有兄弟计算的—— 结构1*//* divp:first-child {color: red;} *//* 选中的是div的最后一个儿子p元素按照所有兄弟计算的—— 结构1*//* divp:last-child {color: red;} *//* 选中的是div的第n个儿子p元素按照所有兄弟计算的—— 结构1 *//* divp:nth-child(3) {color: red;} *//* 选中的是div的偶数个儿子p元素按照所有兄弟计算的—— 结构2 *//* 关于n的值 —— 结构21. 0或不写什么都选不中 —— 几乎不用。2. n 选中所有子元素 —— 几乎不用。3. 1 ~ 正无穷的整数选中对应序号的子元素。4. 2n 或 even 选中序号为偶数的子元素。5. 2n1 或 odd 选中序号为奇数的子元素。6. -n3 : 选中前三个。*//* divp:nth-child(2n) {color: red;} *//* 选中的是div的第一个儿子p元素按照所有同类型兄弟计算的—— 结构3 *//* divp:first-of-type{color: red;} *//* 选中的是div的最后一个儿子p元素按照所有同类型兄弟计算的—— 结构3 *//* divp:last-of-type{color: red;} *//* 选中的是div的第n个儿子p元素按照所有同类型兄弟计算的—— 结构3 *//* divp:nth-of-type(5) {color: red;} *//style
/head
body!-- 结构1 --!-- divp张三98分/pp李四88分/pp王五78分/pp赵六68分/pp孙七58分/pp老八48分/p/div --!-- 结构2 --!-- divp第1个/pp第2个/pp第3个/pp第4个/pp第5个/pp第6个/pp第7个/pp第8个/pp第9个/pp第10个/p/div --!-- 结构3 --!-- divspan测试1/spanp张三98分/pp李四88分/pp王五78分/pspan测试2/spanp赵六68分/pspan测试3/spanp孙七58分/pspan测试4/spanp老八48分/pspan测试5/span/div --
/body
/html!DOCTYPE html
html langzh-CN
headmeta charsetUTF-8title伪类选择器_结构伪类_3/titlestyle/* 选中div中倒数第n个的儿子p元素按照所有兄弟—— 看结构1 *//* divp:nth-last-child(3) {color: red;} *//* 选中div中倒数第n个的儿子p元素按照所有同类型的兄弟—— 看结构1 *//* divp:nth-last-of-type(2) {color: red;} *//* 选中的是没有兄弟的span元素 —— 看结构2 *//* span:only-child {color: red;} *//* 选中的是没有同类型兄弟的span元素 —— 看结构2 *//* span:only-of-type {color: red;} *//* 选中的是根元素 *//* :root {background-color: gray;} *//* 选中的是没有内容的div元素 *//* div:empty {width: 100px;height: 100px;background-color: red;} *//style
/head
body!-- 结构1 --!-- divspan测试1/spanp张三98分/pp李四88分/pp王五78分/pp赵六68分/pp孙七58分/pp老八48分/pspan测试2/span/div --!-- 结构2 --!-- divspan测试1/span/divdivspan测试2/spanp张三98分/pp李四88分/pp王五78分/pp赵六68分/pp孙七58分/pp老八48分/p/div --!-- 结构3 --div /div
/body
/html三、否定伪类 :not(选择器) 排除满足括号中条件的元素。 代码如下
!DOCTYPE html
html langzh-CN
headmeta charsetUTF-8title伪类选择器_否定伪类/titlestyle/* 选中的是div的儿子p元素但是排除类名为fail的元素 *//* divp:not(.fail) {color: red;} *//* 选中的是div的儿子p元素但是排除title属性值以“你要加油”开头的 *//* divp:not([title^你要加油]) {color: red;} *//* 选中的是div的儿子p元素但排除第一个儿子p元素 */divp:not(:first-child) {color: red;}/style
/head
bodydivp张三98分/pp李四88分/pp王五78分/pp赵六68分/pp classfail title你要加油啊孙七孙七58分/pp classfail title你要加油啊老八老八48分/p/div
/body
/html四、UI伪类
:checked 被选中的复选框或单选按钮。:enable 可用的表单元素没有 disabled 属性。:disabled 不可用的表单元素有disabled 属性。
代码如下
!DOCTYPE html
html langzh-CN
headmeta charsetUTF-8title伪类选择器_UI伪类/titlestyle/* 选中的是勾选的复选框或单选按钮 */input:checked {width: 100px;height: 100px;}/* 选中的是被禁用的input元素 */input:disabled {background-color: gray;}/* 选中的是可用的input元素 */input:enabled {background-color: green;}/style
/head
bodyinput typecheckboxinput typeradio namegenderinput typeradio namegenderinput typetextinput typetext disabled
/body
/html五、目标伪类了解 :target 选中锚点指向的元素。 代码如下
!DOCTYPE html
html langzh-CN
headmeta charsetUTF-8title伪类选择器_目标伪类/titlestylediv {background-color: gray;height: 300px;}div:target {background-color: green;}/style
/head
bodya href#one去看第1个/aa href#two去看第2个/aa href#three去看第3个/aa href#four去看第4个/aa href#five去看第5个/aa href#six去看第6个/adiv idone第1个/divbrdiv idtwo第2个/divbrdiv idthree第3个/divbrdiv idfour第4个/divbrdiv idfive第5个/divbrdiv idsix第6个/div
/body
/html六、语言伪类了解 :lang() 根据指定的语言选择元素本质是看lang 属性的值。 代码如下
!DOCTYPE html
html langzh-CN
headmeta charsetUTF-8title伪类选择器_语言伪类/titlestylediv:lang(en) {color: red;}:lang(zh-CN) {color: green;}/style
/head
bodydiv北京/divdiv langen上海/divp前端/pspan你好/span
/body
/html
