css三种选择器的特点

Posted

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了css三种选择器的特点相关的知识,希望对你有一定的参考价值。

参考技术A
CSS
中,选择器是一种模式,用于选择需要添加样式的元素。
"CSS"
列指示该属性是在哪个
CSS
版本中定义的。(CSS1、CSS2
还是
CSS3。)
  .class
.intro
选择
class="intro"
的所有元素。
1
  #id
#firstname
选择
id="firstname"
的所有元素。
1
  *
*
选择所有元素。
2
  element
p
选择所有
<p>
元素。
1
  element,element
div,p
选择所有
<div>
元素和所有
<p>
元素。
1
  element
element
div
p
选择
<div>
元素内部的所有
<p>
元素。
1
  element>element
div>p
选择父元素为
<div>
元素的所有
<p>
元素。
2
  element+element
div+p
选择紧接在
<div>
元素之后的所有
<p>
元素。
2
  [attribute]
[target]
选择带有
target
属性所有元素。
2
  [attribute=value]
[target=_blank]
选择
target="_blank"
的所有元素。
2
  [attribute~=value]
[title~=flower]
选择
title
属性包含单词
"flower"
的所有元素。
2
  [attribute|=value]
[lang|=en]
选择
lang
属性值以
"en"
开头的所有元素。
2
  :link
a:link
选择所有未被访问的链接。
1
  :visited
a:visited
选择所有已被访问的链接。
1
  :active
a:active
选择活动链接。
1
  :hover
a:hover
选择鼠标指针位于其上的链接。
1
  :focus
input:focus
选择获得焦点的
input
元素。
2
  :first-letter
p:first-letter
选择每个
<p>
元素的首字母。
1
  :first-line
p:first-line
选择每个
<p>
元素的首行。
1
  :first-child
p:first-child
选择属于父元素的第一个子元素的每个
<p>
元素。
2
  :before
p:before
在每个
<p>
元素的内容之前插入内容。
2
  :after
p:after
在每个
<p>
元素的内容之后插入内容。
2
  :lang(language)
p:lang(it)
选择带有以
"it"
开头的
lang
属性值的每个
<p>
元素。
2
  element1~element2
p~ul
选择前面有
<p>
元素的每个
<ul>
元素。
3
  [attribute^=value]
a[src^="https"]
选择其
src
属性值以
"https"
开头的每个
<a>
元素。
3
  [attribute$=value]
a[src$=".pdf"]
选择其
src
属性以
".pdf"
结尾的所有
<a>
元素。
3
  [attribute*=value]
a[src*="abc"]
选择其
src
属性中包含
"abc"
子串的每个
<a>
元素。
3
  :first-of-type
p:first-of-type
选择属于其父元素的首个
<p>
元素的每个
<p>
元素。
3
  :last-of-type
p:last-of-type
选择属于其父元素的最后
<p>
元素的每个
<p>
元素。
3
  :only-of-type
p:only-of-type
选择属于其父元素唯一的
<p>
元素的每个
<p>
元素。
3
  :only-child
p:only-child
选择属于其父元素的唯一子元素的每个
<p>
元素。
3
  :nth-child(n)
p:nth-child(2)
选择属于其父元素的第二个子元素的每个
<p>
元素。
3
  :nth-last-child(n)
p:nth-last-child(2)
同上,从最后一个子元素开始计数。
3
  :nth-of-type(n)
p:nth-of-type(2)
选择属于其父元素第二个
<p>
元素的每个
<p>
元素。
3
  :nth-last-of-type(n)
p:nth-last-of-type(2)
同上,但是从最后一个子元素开始计数。
3
  :last-child
p:last-child
选择属于其父元素最后一个子元素每个
<p>
元素。
3
  :root
:root
选择文档的根元素。
3
  :empty
p:empty
选择没有子元素的每个
<p>
元素(包括文本节点)。
3
  :target
#news:target
选择当前活动的
#news
元素。
3
  :enabled
input:enabled
选择每个启用的
<input>
元素。
3
  :disabled
input:disabled
选择每个禁用的
<input>
元素
3
  :checked
input:checked
选择每个被选中的
<input>
元素。
3
  :not(selector)
:not(p)
选择非
<p>
元素的每个元素。
3
  ::selection
::selection
选择被用户选取的元素部分。
3

求CSS3中target选择器的用法

现在有点混乱
<style>
:target p
background-color:red;
//这是第一段代码

#columnvalue:target p
background-color:red;
//这是第二段代码
</style>

<div class="columnvalue">
<a href="#columnvalue"> value</a>
<p>content for value</p>
</div>

就是一段和第二段代码有什么区别?

参考技术A 您好,:nth-child()用法
:nth-child(n) 选择器匹配属于其父元素的第 N 个子元素,不论元素的类型。
在w3c中说明的 n 可以是数字、关键词或公式。常用的有4中写法。
1.具体的数字
:nth-child(n):匹配父元素中第n个元素,例:li:nth-child(3)background:green;
2.倍数
:nth-child(an):匹配父元素中第a数倍的元素,例:li:nth-child(2n)background:red;
3.倍数分组
:nth-child(an+b)或:nth-child(an-b):先对元素进行分组,每组有a个,b为组内成员的序号,其中字母n和加号+不可缺省,位置不可调换,这是该写法的标志,其中a,b均为正整数或0。如3n+1、5n-1。
4.奇偶写法
:nth-child(odd)和:nth-child(even):分别匹配序号为奇数与偶数的元素。奇数(odd)与(2n+1)结果一样;偶数(even)与(2n+0)及(2n)结果一样。
:nth-of-type()的用法

:nth-of-type(n) 选择器匹配属于父元素的特定类型的第 N 个子元素的每个元素.这个的用法和:nth-child(n)的用法类似,不同的是:nth-child(n)所匹配的元素必须有父元素包着。但:nth-of-type(n)可以匹配特定类型元素行。
浏览器支持
所有主流浏览器均支持 :nth-child() 选择器,除了 IE8 及更早的版本。本回答被提问者和网友采纳

以上是关于css三种选择器的特点的主要内容,如果未能解决你的问题,请参考以下文章

Web前端-CSS基础与应用

Web前端-CSS基础与应用

CSS选择器,看这一篇就够了

css里关于定义class选择器的问题

css选择器执行的顺序是啥样的?

求CSS3中target选择器的用法