css3选择器

1. 元素选择符

元素选择符包括:通配符选择器(*)、标签选择器(element)、id 选择器(#)、 class 选择器(.)

2.关系选择符

1. 后代选择器(E F)
li a {
	text-decoration: none;
}	
	li 下所有a元素,无视层级,子子孙孙都能选中
	
2. 直接子元素选择器(E>F)
li a {
	text-decoration: none;
}
3. 相邻选择器(E+F)相邻元素, 紧跟着的
4. 兄弟选择器(E~F)兄弟元素,同一个父亲,所有兄弟
5. 并列选择器(E, F)并列选择, 既选中E 又选中F
6. 

3.属性选择器

	<div class="first_circle" title="name"></div>
    div[title^="name"] {}  // 有title属性,且属性值以name开头
    div[title$="name"] {}  // 有title属性,且属性值以name结尾
    div[title*="name"] {}  // 有title属性,且属性值包含name
    []

4.伪类选择器

1.  :root 跟标签选择器      相当于<html>
2.  :not 否定选择器        排除某些
	div:not([class=“demo”]) {}   选中除了class = demo 外的所有div
3. :empty      空标签选择器  
	用来选择没有内容的元素、不在文档树中的元素,这里的没有内容指的是一点内容都没有,哪怕是一个空格。
4. :first-child   
	:last-child
	:nth-child(n){}  第n个子元素,n代表变量自然数
	:nth-last-child(){}  从后往前数
	以上四个选择器均有弊端,即如果当前位置元素不是前面所修饰的元素,那么无效.
    注:其父元素的第 N 个子元素,不论元素的类型。
    比如:ul li:nth-child(2){color: red;}  找ul下的第二个子元素,如果这个子元素不是li,那就选不中
    
5. :first-of-type 第一个子元素
	:last-of-type 最后一个子元素
	:nth-of-type(){} 第xxx个子元素,n代表变量自然数
	:nth-last-of-type(){}  从后往前数

此种选择器,限制了类型,即在所修饰元素的类型下选择特定位置的元素。
ul li:nth-of-type(2){}     找ul 下的第二个li子元素

6.:only-child  唯一子元素选择器
选择是独生子的子元素,即该子元素不能有兄弟元素,它的父元素只有他一个直接子元素。

注意:选择的元素是独生子子元素,而非有唯一子元素的父元素。

:only-of-type
如果要选择第某类特定的子元素(p) 在兄弟节点中是此类元素唯一个的话 就需要用到这个属性了

7. :enabled  可用的元素
	:disabled 不可用的元素
在web的表单中,有些表单元素有可用(“enabled”)和不可用(“disabled”)状态,比如输入框,密码框,复选框等。在默认情况下,这些表单元素都处在可用状态。那么我们可以通过伪类选择器 enabled 进行选择,disabled则相反。

:checked
选择框的被选中状态
注:checkbox, radio 的一些默认状态不可用属性进行改变,如边框颜色。

8.:read-only  选中只读的元素
eg:<input type=“text” readonly=“readonly”/>

:read-write 选中非只读的元素
eg:<input type=“text”/>

9.

5.伪元素选择器:

伪元素的效果是需要通过添加一个实际的元素才能达到的

CSS3对伪元素进行了一定的调整,在以前的基础上增加了一个:也就是现在变成了::first-letter,::first-line,::before,::after
另外还增加了一个::selection
1.::selection
::selection” 选择器是用来匹配突出显示的文本(用鼠标选择文本的时候)。浏览器默认情况下,用鼠标选择网页文本是以“蓝色的背景,白色的字体”显示的。
属性:user-select: none;

注:火狐下必须加-moz-
-moz-::selection
  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值