CSS 的其它选择器

最新推荐文章于 2022-11-21 19:20:49 发布

发疯的man

最新推荐文章于 2022-11-21 19:20:49 发布

阅读量437

点赞数

分类专栏： CSS 文章标签： css color c语言 pc

本文链接：https://blog.csdn.net/lzh657083979/article/details/78437746

版权

CSS 专栏收录该内容

6 篇文章 0 订阅

订阅专栏

首先CSS 选择器分这么几大类：基础选择器、关系选择器、属性选择器、伪类选择器、伪对象选择器。

关系选择器

1.包含选择符(E F)
选择所有被E 元素包含的F 元素，中间用空格隔开ul li{ color:red; }
1.子选择符(E > F)
选择所有作为E 元素的直接子元素F，对更深一层的元素不起作用，用大于号表示。
2.相邻选择符(E+F)
选择紧贴在E 元素之后F 元素，用加号表示，选择相邻的第一个兄弟元素。
3.兄弟选择符(E~F)
选择E 元素之后的所有兄弟元素F，作用于多个元素，用~号隔开。

属性选择器

属性选择器通过[ ] 进行定义。

1.E[att] 选择具有attr 属性的E 元素
option[disabled]{ color: red;} //选择带有display 属性的option 标签

2 E[att="val"] 选择具有att 属性且属性值等于val 的E 元素。
input [type="text"] { ... }
input [type="submit"] { ... }

3 E[att$=”val"] 选择具有att 属性且属性值为以val 结尾的字符串的E 元素
p[class$="1"]{ color:red;} //选择p 元素中class 属性值以p 结尾的元素
q<p class="p1 paragraph p11p">这是个段落</p>
<p class="p1 paragraph p11p">这是个段落</p>
<p class="p1paragraph p11">这是个段落</p>  //变红
<p class="p1">这是个段落</p>               //变红

4 E[att^=“val"] 选择E 元素中有att 属性，且以”val”开头的元素
p[class^="p"]{ color:red;} //选择带有class 属性，属性值以p 开头的元素
<p class="a1">这是个段落</p>
<p class="naragraph p11">这是个段落</p>
<p class="p11">这是个段落</p>

5 E[att*=”val"] 选择具有att 属性且属性值包含val 的字符串的E 元素。
a[href*="www"]{font-weight: bold;} //选择a 标签中href 属性值包含baidu 的元素
<a href="http://www.baidu.com">百度</a>
<a href="#">空的超链接</a>
<a href="http://www.youdao.com">有道</a>

6 E[att~="val"] 选择有att 属性的元素，且属性值列表中有一个符合val 的元素
p[class~="p1"]{ color:red;} //选中p 元素下class 值包含p1 的元素
<p class="p1 paragraph p11">这是个段落</p>
<p class="paragraph p11">这是个段落</p>
<p class="p">这是个段落</p>

伪类选择器

一般通过冒号进行定义

1.E:link 设置超链接a 在未被访问前的样式（特指a 标签）
2.E:visited 设置超链接a 在其链接地址已被访问过时的样式（特指a 标签）
3.E:hover 设置鼠标悬停在元素上时的样式。不限于a 标签，p、li 也可以使用
4.E:active 设置元素在鼠标按下时的样式（不限于a 标签）
5.E:not(s) 匹配不含有s 选择器的元素E。
p:not(.p1){ color:red;}
<p class=”p1”></p>
<p></p>
<p></p>

6.E:first-child 父元素的第一个子元素E。
满足两个条件a.必须有父元素b.它是父元素的第一个子元素

7.E:last-child 父元素的最后一个子元素E
条件同上

8.E:only-child E 元素是唯一的子元素时被匹配
<body>
<p>段落</p> 此时body 中只有这一个元素，所以p:only-child{ color: deepskyblue;} 会生效
</body>

9.E:empty 匹配没有任何子元素（并且不包括空格、回车）的元素E
p:empty{ border:1px solid red;padding:10px;}
<p></p>
<p> </p> //不会被选中
<div></div> //空，但不是P 元素
<p>我是一个p 元素</p> //有text 文本节点
<p><a href="#">百度</a></p> //有子元素

10.E:checked 匹配用户界面上处于选中状态的元素E。(用于input type 为radio 与checkbox 时)
input:checked+span{color:red;}
<input type="radio" name="gender" /><span>男生</span>
<input type="radio" name="gender" checked="checked" /><span>女生</span>
*input 下被选中的元素紧挨着的span 颜色为红色，因为选中状态会变，所以看着像动态的