CSS3--选择器

最新推荐文章于 2020-01-16 11:43:59 发布

「已注销」

最新推荐文章于 2020-01-16 11:43:59 发布

阅读量424

点赞数

分类专栏： css 文章标签： css3

本文链接：https://blog.csdn.net/mpdemp/article/details/72566842

版权

css 专栏收录该内容

31 篇文章 1 订阅

订阅专栏

选择器

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

收藏

觉得还不错? 一键收藏
0
评论
CSS3--选择器

选择器1、:target选择器结构性伪类选择器当指定的锚被点击后，选择到id与之对应的元素，并应用样式。必须要在点击后才能生效。#box1:target { display: none;}<a href="#box1">Click me</a><p id="box1">此处省略一万字</p><p id="box2">此处省略一万字</p>//当a标签被点击的时候，被target
复制链接

扫一扫

专栏目录