《第3章使用CSS3选择器》_css 判断是否存在元素-优快云博客

本文链接：https://blog.youkuaiyun.com/TrashMaker/article/details/123754687

本文详细介绍了CSS3的选择器，包括基本选择器、组合选择器、属性选择器、伪类选择器，涵盖标签选择器、类选择器、ID选择器、通配选择器，以及动态伪类、结构伪类、否定伪类、状态伪类和目标伪类等，帮助理解CSS3更精准的样式控制。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

3.2基本选择器
一、标签选择器
二、类选择器（以“.”作为前缀）
三、ID选择器（以“#”作为前缀）
四、通配选择器（“*”表示）

*{
margin:0;
padding:0;
}

3.3组合选择器
一、包含选择器（空格作为标识符）
二、子选择器（“>”作为标识符）
三、相邻选择器("+“作为标识符)
1.筛选出前置选择符后紧跟着的后置选择符元素
四、兄弟选择器（”~"作为标识符）
1.筛选出前置选择符后的所有同级后置选择符元素
五、组合选择器（“,”作为标识符）

3.4属性选择器
一、E[attr]：筛选出包含attr属性的元素
二、E[attr=“value”]：筛选出attr属性的值为value的元素
三、E[attr^=“value”]：筛选出attr属性的值是以value开头的元素
四、E[attr$=“value”]：筛选出attr属性的值是以value结尾的元素
五、E[attr~=“value”]：筛选出attr属性值是一个词组，且这个词组包含value的元素
六、E[attr|=“value”]：筛选出attr属性值等于value或者以value开头的元素
七、E[attr*=“value”]：筛选出attr属性值包含value的元素

3.5伪类选择器
1.伪选择器包括伪类选择器和伪对象选择器
2.伪选择器以冒号（：）作为前缀标识符
3.冒号前是选择符，限定伪类应用范围，冒号后是伪类和伪对象名，冒号前后没有空格
4.css3的伪类选择器包括4种：动态伪类、结构伪类、否定伪类、状态伪类

一、动态伪类
1.动态伪类只有当用户与页面交互时才能体现出来
2.常见5种动态伪类：
①：link
链接没有被访问时
②：hover
鼠标悬浮在连接上时
③：active
鼠标左键集中激活时
④：visited
链接被访问过后
⑤：focus
元素称为焦点时
3.其他伪类
:before
向选定的元素前插入内容
②:after
向选定的元素后插入内容
content属性指定插入的内容

二、结构伪类
1.结构伪类利用文档结构树实现元素过滤
2.first-child
选择某个元素的第一个子元素
3.last-child
选择某个元素的最后一个子元素
4.:nth-child()
/length表示具体的非负整数，n表示从0开始的自然数，参数可以是具体的数，也可以是表达式/
选择某个元素包含的一个或者多个特定的子元素
①:nth-child(length)
②:nth-child(nlength)
③:nth-child(n+length)/选择大于等于length的元素/
④:nth-child(-n+length)/选择小于等于length的元素/
⑤:nth-child(nlength+1)/表示隔几选一/
⑥:nth-child(n)/n=0时，表示没有选中元素/

ul li:nth-child(2){
    background-position: 2px -31px;
}
/*解读：通过子元素li找到父元素ul,当其第2个子元素为li时，符合条件*/

5.:nth-last-child()
从最后一个元素开始计算，选择指定的那个元素；
和:nth-child()用法一样，只不过是从最后一个元素开始计算；
①:nth-last-child(length)
②:nth-last-child(nlength)
③:nth-last-child(n+length)
④:nth-last-child(-n+length)
⑤:nth-last-child(nlength+1)
⑥:nth-last-child(n)

6.:first-of-type
7.:last-of-type
8.:nth-of-type()

#wrap li:nth-of-type(2){
    background-position: 2px -31px;
}
/*nth-child：核对第n个子元素是否是目标子元素，如果不是，则无效；
nth-of-type:将指定的子元素从父元素中筛选出来，选中第n个子元素*/

9.:nth-last-of-type()
10.only-child和only-of-type
only-child表示一个元素是它父元素的唯一一个子元素，就可以选中这个元素；
而only-of-type表示一个元素的父元素可以有多种子元素，但是该种子元素只有这一个，则选中该元素。

11.:empty
选择没有内容的元素

三、否定伪类
:not（）表示否定选择器，过滤掉符合条件的元素

四、状态伪类
1.状态伪类主要针对表单进行设计的
2.:enabled表示匹配指定范围内所有可用UI元素
3.:disabled表示匹配指定范围内所有不可用UI元素
4.:checked表示匹配指定范围内所有checked属性等于“checked”的元素

五、目标伪类
1.形式E:target，它表示选择匹配E的所有元素，且匹配元素被相关url指向

    <style type="text/css">
    div:target{background: red;}
    </style>
    <body>
    <div id="red">盒子1</div>
    <div id="blue">盒子2</div>                                                                               
</body> 
<!--挡在浏览器地址栏中输入URL，并附加#red-->