css选择器

css3选择器有多种,常见的有元素选择器,ID选择器,类选择器和属性选择器,属性选择器里还有属性和值选择器。最常见的就是元素选择器,文档的元素就是最基本的选择器。还有通配符*,设置通配符所有没有单独设置的样式都会默认为通配符的样式设置。
ID选择器为#加上ID名称,类选择器为.加上类名称,且他们的派生选择器都是空一格加上内部标签,属性选择器写法略有不同,比如如果希望把所有包含title的元素都变成红色字,就可以写成
*[title]{color:red;}
而html里就可以这样写
<p title>ceshi</p>
如果写法是
[title]{color:red;}
则一定要给标签里的属性赋值,否则不会生效
<p title=“t”>ceshi</p>
如果css里将属性选择器赋予指定的值,那么就会对指定的赋值有效果,比如
[title=sp]{color:red;}
那么下面两个p标签只有第二个会生效。
<p title=“t”>ceshi</p>
<p title=“sp”>ceshi</p>
还有可以根据部分属性值来选择,比如
[title~=“ceshi”]{
font-size:25px;
}

那么无论是titl=“ceshi”,还是title="ceshi neirong"都会生效,这个~=就是比较模糊的一个等于。
还有后代选择器,如下:
h1 p{
color:red;
}

就是h1标签里的p元素内容文字变为红色,这种选择器比起直接使用ID选择器和类选择器要快很多,所以实际使用还是蛮常见的,而且不仅限于一层,比如h1元素内包裹的p元素,p元素再包裹a元素也是可以通过h1 a{}来直接调用的。

相比与后代选择器,子元素选择器是通过>将元素链接到一起的,且根据上述例子,只能用h1>p>a{}才能对a生效,并不能直接h1>a{}。

接下来是相邻兄弟选择器,可以选择紧接在另一个元素后的元素,且二者拥有相同的父元素。

顺便说明一下选择器的优先级,其css选择器优先级是根据加权计算的,举个例子,256个类名选择器优先级要比一个ID选择器要高,所有的类名(classes)都是以8字节字符串存储的。8字节所能hold的最大值就是255. 当同时出现256个class, 势必会越过其边缘,溢出到id区域。
具体优先级
important > 内联 > ID > 类 > 标签 | 伪类 | 属性选择 > 伪对象 >通配符 > 继承
选择器的分组
如果想让多个选择器的样式相同,可以使用逗号来对选择器进行分组,比如
h1,h2{
color:red;
}

而在类选择器中,还有比较特殊的多类选择器,就是可以将多个类选择器直接放到一起来对某些多个类的选择器的元素产生效果:
<p class=“p1”>测试</p>
<p class=“p2”>测试</p>
<p class=“p1 p2”>测试</p>

而css就可以这样写
.p1{
color:red;
}
.p2{
font-size:12px;
}
.p1.p2{
font-weight:bold;
}

类选择器和ID选择器的区别
ID选择器只能使用一次,而类选择器可以多次使用
ID选择器不能结合使用
使用JS的时候也会使用到ID

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值