CSS 的其它选择器

来源：互联网发布：手机解锁的软件编辑：程序博客网时间：2024/05/16 08:03

首先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 匹配没有任何子元素（并且不包括空格、回车）的元素Ep: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 颜色为红色，因为选中状态会变，所以看着像动态的

伪对象选择器

伪对象也叫伪元素，在过去，伪类和伪元素都被书写成前面只加一个冒号，实际上伪对象应该用两个冒号来定义。
伪类和伪对象（元素）的区别
伪类一般反映无法在CSS 中轻松或者可靠检测到的某个元素的状态或者属性；
伪元素表示DOM 外部的某种文档结构

常用伪元素
1.E:before/E::before
2.E:after/E::after

伪元素是在元素内容的前面或后面定义的，必须要添加content:””这个属性，不然伪元素无法定义成功。
p::after{ content:”在P 标签元素内容前加了内容”; color: red;}

阅读全文

0 0