温馨提示×

css中选择器有哪些

沐橙
90
2021-04-25 12:52:29
栏目: 编程技术

css选择器有:1、类选择器,使用语法为:“<p class="first"></p>”,在css中的样式为“.first{样式代码;}”;2、ID选择器,通过#符号加上id名称组成,使用语法为:“<p id="polite"></p>”,在css中的样式为“#polite{样式代码;}”;3、通用选择器,为每一个页面元素设置样式,在css中的样式为“*{样式代码;}”;4、属性选择器,它主要分为“存在和值属性选择器”和“子串值属性选择器”两种;5、伪类和伪元素等等。

css中选择器有哪些

在CSS中,选择器是一种模式,用于选择需要添加样式的元素。选择器主要是用来确定html的树形结构中的DOM元素节点。

主要有以下几种:


一:类选择器

class元素可以有多个值,中间用空格隔开。一个文件中,可以有多个相同的class值。

<p class="first done"></p>

样式:

.first{

  background-color: red;

}

二:ID选择器


#(哈希)符号加上id名称组成。但是单个文件中id值要保持唯一。一个element中只设置一个id。

<p id="polite"></p>

样式:

#polite{

  text-transform: uppercase;

}

三:通用选择器


* 允许选择一个页面的所有元素。

<p></p>

样式:


* {

  text-decoration: line-through;

}

四:属性选择器


1:存在和值属性选择器(presence and value)


分为三种情况:属性名存在;属性名存在并且有对应的值;属性名存在并且包含对应的值。


[attr] 只要包含该属性即可。不论是否有值,不论值为何。

<p data-fruit></p>

样式:


[data-fruit]{

  color: green;

}

[attr=val] 包含该属性,并且值也相等。

<p data-fruit="apple"></p>

样式:

[data-fruit="apple"]{

  color: red;

}

[attr~=val] 包含该属性,并且该属性中至少有一个值为val。

<p data-fruit="apple banana"></p>

<p data-fruit="apple"></p>

样式:


[data-fruit~="apple"]{

  color: blue;

}

上面两个标签都会被匹配到。


2:子串值属性选择器(substring value 也叫伪正则)


[attr|=val] 包含attr属性,并且值为value,或者值是以val- 这样的形式开头。


[attr^=val] 包含attr属性,并且值以val开头。


[attr$=val] 包含attr属性,并且值以val结尾。


[attr*=val] 包含attr属性,并且值中包含子字符串val。


五:伪类(pseudo-class)


以:作为前缀,被添加到一个选择器末尾的关键字。当你希望样式在特定状态下才被呈现到指定的元素时,你可以往元素的选择器后面加上伪类。


比如让超链接,访问前后样式一致,同时鼠标悬停时不一致。


a:visited{

  color: blue;

}

/** 选择器上的逗号不能省略*/

a:hover,

a:active,

a:focus{

  color: red;

  text-decoration: none;

}

比如当一个列表的偶数行和奇数行的背景不同


<ul>

  <li><p>这是第一行</p></li>  

  <li>p>这是第一行</p></li>  

  <li>p>这是第一行</p></li>  

  <li>p>这是第一行</p></li>

</ul>

li:nth-of-type(2n){

  background-color: red;

}

li:nth-of-type(2n+1){

  background-color:blue;

}

这里的nth-of-type() 是匹配兄弟节点。因此不能写成p:nth-of-type。另外如果使用的是nth-child()的话,它匹配的也是兄弟节点。虽然看名字像是一个孩子节点。


六:伪元素(Pseudo-element)


通过::这样两个冒号前缀,组合关键字,添加到某个元素的后面,去选择该元素的某个部分。


<a href="http://www.moremom.com">moremom</a>

a::after{

  content:"后面追加内容";

}

或者

[href^="http"]::after{

  content:"后面追加的内容";

}

七:组合器

名称组合器选择
选择器组A,B匹配A或B的任意元素 ,或者匹配A和B
后代选择器A BB是A的后代节点,匹配B
子选择器A>BB是A的直接子节点,匹配B
相邻兄弟选择器A+BB是A的下一个兄弟节点,B紧跟A,匹配B
通用兄弟选择器A~BB是A之后的兄弟节点中的任一个,匹配B


0
免费拨打  400 100 2938 免费拨打 400 100 2938
24小时售后技术支持 24小时售后技术支持
返回顶部 返回顶部