CSS3--选择器

来源：互联网发布：java中类的实例化编辑：程序博客网时间：2024/06/06 07:34

选择器

1、:target选择器

结构性伪类选择器
当指定的锚被点击后，选择到id与之对应的元素，并应用样式。必须要在点击后才能生效。

#box1:target {    display: none;}<a href="#box1">Click me</a><p id="box1">此处省略一万字</p><p id="box2">此处省略一万字</p>//当a标签被点击的时候，被target伪类选中的id为box1的p元素就会被隐藏当然，如果p元素下还有其他嵌套也可以这样写<p id="box1">此处省略<span>一万字</span></p>#box1:target span{    color:red;}

2、属性选择器

div[att^="val"] //选择div元素，且div元素有att属性，且属性值以val开头；div[att$="val"] //选择div元素，且div元素有att属性，且属性值以val结尾；div[att*="val"] //选择div元素，且div元素有att属性，且属性值包含val；

CSS2中有属性选择器div[att]、div[att="val"]

3、根选择器

结构性伪类选择器

:root  //选择元素所在文档的根元素，在HTML文档中，根元素始终是<html>

4、否定选择器

结构性伪类选择器

:not //选择除某些元素之外的所有元素例：div:not([class="box"]) //选择div元素，除去有box类的

5、空选择器

结构性伪类选择器

:empty //选择不含有任何子元素的元素，子元素包括空格<div><a></a><div><div>哈哈</div><div> </div><div></div>div:empty //这里只能选择到最后一个

6、子元素选择器

结构性伪类选择器

:first-child  //父元素的第一个子元素如：ul>li:firt-child

:last-child //父元素的最后一个子元素

:nth-child(n) //父元素的某一个子元素这里的n可以是整数（0，1，2，3...)表示具体某一个，也可以使用表达式，如2n+1表示奇数，2n表示偶数

:last-nth-child(n)  //父元素的倒数某个元素

:first-of-type  //父元素的第一个指定类型的元素:nth-of-type(n) //父元素的第n个指定类型的元素:last-of-type:nth-last-of-type(n)

:only-child //选择父元素中只有一个子元素的父元素的那个子元素<div>    <p>1</p>    <p>2</p></div><div>    <p>3</p></div>div>p:only-child //只能选择到第二个div的p

:only-of-type //选择父元素只含有唯一的某一类型的元素，可以含有其他元素，但这种类型只有唯一一个，选择到这个唯一的指定类型的元素

7、表单相关选择器

:enabled //选择可用的表单:disabled  //选择被禁用的表单:checked  //选择复选或者单选按钮中被选中的

8、突出显示文本选择器

突出显示文本：指被鼠标选中的文本

::selection  //选择突出显示的文本

兼容性：
1、IE9+、Opera、Google Chrome 以及 Safari 中支持 ::selection 选择器。

2、Firefox 支持替代的 ::-moz-selection。

9、读写状态选择器

只读元素：元素中设置了readonly="readonly"属性的元素。它与disabled的区别在于，disable在GET或者POST提交时不会随之提交，而只读元素会一起提交。

:only-read //选择处于只读状态的元素:read-write //选择处理非只读状态的元素

10、伪元素选择器

用于在元素之前和之后添加元素。

::before  //元素之前::after  //元素之后

用法

.box::after {    content:'';    position:absolute;    top:50%;    left:50%;    ...}

阅读全文

0 0

CSS3--选择器

选择器

1、:target选择器

2、属性选择器

3、根选择器

4、否定选择器

5、空选择器

6、子元素选择器

7、表单相关选择器

8、突出显示文本选择器

9、读写状态选择器

10、伪元素选择器

2、属性选择器

3、根选择器

4、否定选择器

5、空选择器

6、子元素选择器

7、表单相关选择器

8、突出显示文本选择器

9、读写状态选择器

10、伪元素选择器