css选择器

除了常用的通用选择器(*),ID选择器,class选择器,标签选择器之外,以下主要总结一下自己不常用但是却很重要的一些选择器:

注意:多类选择器,就是类似于.A.B,.C#D......这样的选择器,选择的是所有既包含类名A又包含类名B的元素,同理其他的就好解释了,

属性选择器中可以可以连着来比如.a[attr][attr1],表示选择所有类名为a而且也包含属性attr又包含属性attr1的元素

伪类选择器:

:visited  当链接被访问过后的时设置的样式(多用于链接);

:hover 当鼠标悬浮在元素上的时候定义的样式(一般任何元素均可);

:link  链接处于平常状态的样式(多用于链接);

:active 当链接访问的那一瞬间定义的样式;

:focus 当鼠标聚焦的时候定义的样式(一般用在 input元素上);

:before 在元素内部最前面插入生成的内容;

:after 在元素内部最后插入生成的内容;

注意:这些伪类可以混合叠加使用哦!

高级的选择器:

D>E(子选择器)选择D元素下面所有的直接子元素E
D+E(紧兄弟选择器)选择在D元素之后并且紧挨着D元素的兄弟元素E
div[attribute](属性)选择带有属性attribute的所有的div元素
div[attr = val](属性值)选择含有属性attr 并且属性值为val的所有的div元素
D~E(兄弟选择器)选择位于D元素之后所有的E元素(兄弟元素)
D[attr~=val]选择所有attr属性有多个值,其中一个值为val的所有D的元素
D[attr|= val]选择attr属性值有多个连字符号分割,其中一个以val开头的D元素
  
  
  

注:1.css为啥叫层叠样式表,可能就是因为不同的选择器之间有层级和权重的分别吧!

2.恰当的使用继承可以简化css结构,减少代码的冗余度。

CSS3新增的选择器:

新增属性选择器:

 D[attr ^= "val"]     匹配所有含有属性attr,而且属性值以val开头的D元素;

 D[attr $= "val"]     匹配所有含有属性attr,而且属性值以val结尾的D元素;

 D[attr ^= "val"]     匹配所有含有属性attr,而且属性值包含val字符串的D元素;

表单相关:

D:enabled  匹配表单中激活的元素;

D:disabled  匹配表单中禁用的元素;

D:checked  匹配表单中被选中的单选框或者复选框的元素;

D::selection  匹配表单中被选中的元素;

反选选择器:

D:not(s) 匹配所有不符合当前选择器的元素;

例如:p:not([class]){color:red;} // 没有class属性的p元素都设置为红色;

特殊:

D:target 一般用于锚链接,其效果是这样的:

当浏览器地址里的hash(地址里#号后面的部分)和:target 伪选择器指定的ID匹配上时,它的样式就会在这个ID元素上生效。

例如:

<h2 id="section2">Section 2</h2>
<h2 id="section1">Section 1</h2>
:target {
	color: #000;
}
/* applies to H2's */
h2:target {
	color: #f00;
}
当hash值为h2元素所对应的id值的时候触发对应的样式;

结构伪类选择器:




评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值