标签选择器

样式的名称和标签的名称相同,如示例中的p标签,则对应名称为p的样式,若页面中有多个p标签,则这些p标签共同享用该样式

p{
  color:blue;
}
<p>标签选择器</p>

CSS最常用的三种选择器-LMLPHP

class选择器

1.使用方式如下所示,一个c1样式可以被多次使用

.c1{
color:red;
}
<p class="c1">class选择器</p>

CSS最常用的三种选择器-LMLPHP

2.一个class中可以有多个样式

.c1{
color:red;
}
.c2{
font-size:20px;
}
<p class="c1 c2">class选择器</p>

CSS最常用的三种选择器-LMLPHP

id选择器

一个页面中不能在多个标签中出现样的id名称,即id选择器不像class选择器一样可以被多次使用,它只能在同一个页面中被使用一次

CSS最常用的三种选择器-LMLPHP

优先级

id选择器>class选择器>标签选择器

补充

逗号的含义

逗号表示:什么和什么

.c1,.c2{                --以逗号分隔
color:green;
}

CSS最常用的三种选择器-LMLPHP

*的含义

表示页面中所有的标签都可以享受该样式

*{
color:red;
}

+的含义

表示与class为c1的标签同级的,下一个p标签

.c1+p{
color:red;
}

CSS最常用的三种选择器-LMLPHP

~的含义

表示与class为c1的标签同级的,后面的所有p标签

.c1~p{
color:red;
}

CSS最常用的三种选择器-LMLPHP

>的含义

div标签下级所有的p标签,与空格的区别是,空格是div标签下面所有的p标签,也就是,示例中4个p标签都应该有样式

div>p{
color:red;
}

CSS最常用的三种选择器-LMLPHP

空格的含义

与>符号对比来看,空格表示div标签下面的,所有的p标签

div p{
color:red;
}

CSS最常用的三种选择器-LMLPHP

其他

1.a[title]:设置了title属性的a标签

2.a[href='www.baidu.com']:设置了属性href=‘www.baidu.com’的a标签

3.a[href^='http']:设置了属性href值以‘http’开头的a标签

4.a[href$='doc']:设置了属性href值以‘doc’结尾的a标签

5.a[href*='www']:设置了属性href值包含'www'的a标签


说明:本文为原创作品,若有参考会在文中提及,如有遗漏,涉及侵权,请联系本人,将立即修正。

05-28 19:16