前端菜鸟

CSS选择器,CSS3选择器

CSS选择器

------->CSS选择器优先级

1>通配符选择器(CSS2)

  选择所有元素,所有浏览器都支持。

  

*{
   margin:0;
   padding:o;  
}

 

2>元素选择器(CSS1)

p{
    color:pink;
}

  选择所有

元素。

3>类选择器(CSS1)

选择 class="className" 的所有元素。

所有浏览器都支持类选择器,但多类选择武器(.className1 .className2)不被IE6支持。

.className{
     background-color:#dadada;   
}

4>id选择器(CSS1)

选择 id="id" 的所有元素。

所有浏览器都支持ID选择器。

#id{
    background-color:#dadada; 

——>id 和 class 的区别

  id是唯一标识符,也就是说同一个id名在一个html文件中只能出现一次,而class可以有很多个引用。在js中可以通过id来获取元素getElementById("id"),所以一般情况下需要通过js原生获取元素时才用到id,设置样式通常都用class,js原生不能直接通过class获取元素。

5>后代选择器/包含选择器(CSS1)

所有主流浏览器都支持 element element 选择器。

div p
{ 
    background-color:yellow;  //选择并设置位于 
元素内部的每个

元素的样式; }

6>子元素选择器(CSS2)

所有主流浏览器都支持 element>element 选择器。

element>element 选择器用于选取带有特定父元素的元素。

对于 IE8 及更早版本的浏览器中的 element>element,必须声明

如果元素不是父元素的直接子元素,则不会被选择。

div>p
{ 
    background-color:yellow;  //选取父元素是 
元素的每个

元素,并设置其背景色: }

 7>相邻兄弟选择器(CSS2)

所有主流浏览器都支持 element+element 选择器。

对于 IE8 及更早版本的浏览器中的 element+element,必须声明

相邻兄弟选择器,该选择器定位与元素E具有相同父元素且在标记中紧邻(不是内部)element的元素element。

div+p
{ 
    background-color:yellow;   //选择 
元素之后紧跟的每个

元素 }

8>一般兄弟选择器(CSS3)

element1~element2 选择器 element1 之后出现的所有 element2。(两种元素必须拥有相同的父元素,但是 element2 不必直接紧随 element1。)

所有主流浏览器都支持 element1~element2 选择器。

对于 IE8 中的该选择器,必须声明

p~ul
{
    background:#ff0000;    //为所有相同的父元素中位于 p 元素之后的所有 ul 元素设置背景
}

9>属性选择器

[attribute](CSS2)

用于选取带有指定属性的元素。

所有主流浏览器都支持 [attribute] 选择器。

对于 IE8 及更早版本的浏览器中的 [attribute],必须声明

a[target]
{ 
    background-color:yellow;    //为带有 target 属性的  元素设置样式
}

[attribute=value](CSS2)

用于选取带有指定属性和值的元素。

所有主流浏览器都支持 [attribute=value]选择器。

对于 IE8 及更早版本的浏览器中的 [attribute=value],必须声明

a[target=_blank]
{ 
    background-color:yellow;     //为 target="_blank" 的  元素设置样式
}

[attribute~=value] (CSS2)

用于选取属性值中包含指定词汇的元素。

所有主流浏览器都支持[attribute~=value]选择器。

对于 IE8 及更早版本的浏览器中的 [attribute~=value],必须声明

[title~=flower]
{ 
    background-color:yellow;       //选择 titile 属性包含单词 "flower" 的元素,并设置其样式
}

[attribute|=value] (CSS2)

用于选取带有以指定值开头的属性值的元素。

(该值必须是整个单词,比如 lang="en",或者后面跟着连字符,比如 lang="en-us"。)

所有主流浏览器都支持 [attribute|=value] 选择器。

对于 IE8 及更早版本的浏览器中的 [attribute|=value],必须声明

[lang|=en]
{ 
    background-color:yellow;         //选择 lang 属性值以 "en" 开头的元素,并设置其样式
}

[attribute^=value](CSS3)

匹配属性值以指定值开头的每个元素。

所有主流浏览器都支持 [attribute^=value] 选择器。

对于 IE8 及更早版本的浏览器中的 [attribute^=value],必须声明

div[class^="test"]
{
    background:#ffff00;       //设置 class 属性值以 "test" 开头的所有 div 元素的背景色
}

[attribute$=value](CSS3)

匹配属性值以指定值结尾的每个元素。

所有主流浏览器都支持 [attribute$=value] 选择器。

对于 IE8 及更早版本中的 [attribute$=value],必须声明

div[class$="test"]
{
background:#ffff00;        //设置 class 属性值以 "test" 结尾的所有 div 元素的背景色
}

[attribute*=value](CSS3)

匹配属性值包含指定值的每个元素。

所有主流浏览器都支持 [attribute*=value] 选择器。

对于 IE8 及更早版本中的 [attribute*=value],必须声明

div[class*="test"]
{
    background:#ffff00;     //设置 class 属性值包含 "test" 的所有 div 元素的背景色
}

10>伪类选择器

:link(CSS1):未访问的链接;

:visited(CSS1):已访问的链接;

:hover(CSS1):鼠标移动到容器,不仅限于链接,可用于页面中的任何元素;

:active(CSS1):被激活时的状态,不仅限于链接,可用于任何具有tabindex属性的元素;

:focus(CSS2):获得焦点时状态,不仅限于链接,可用于任何具有tabindex属性的无线;

<所有主流浏览器都支持>

a:link    {color:blue;}
a:visited {color:blue;}
a:hover   {color:red;}
a:active  {color:yellow;}

:lang(CSS2)

用于选取带有以指定值开头的 lang 属性的元素。

该值必须是整个单词,即可是单独的,比如 lang="en",也可后跟连接符,比如 lang="en-us"。

所有主流浏览器都支持 :lang 选择器。

对于 IE8 中的 :lang,必须声明

p:lang(en)
{ 
    background:yellow;  //选择带有以 "en" 开头的 lang 属性值的每个 

元素,并设置其样式 }

 :first-child(CSS2)

用于选取属于其父元素的首个子元素的指定选择器。

所有主流浏览器都支持 :first-child 选择器。

注释:对于 IE8 及更早版本的浏览器中的 :first-child,必须声明

p:first-child i
{
    background:yellow;  //选择每个 

中的每个 元素并设置其样式,其中的

元素是其父元素的第一个子元素 }

:only-child(CSS3)

匹配属于其父元素的唯一子元素的每个元素

所有主流浏览器均支持 :only-child 选择器,除了 IE8 及更早的版本。

p:only-child
{
    background:#ff0000;//规定属于其父元素的唯一子元素的每个 p 元素
}

:last-child(CSS3)

(等同于 p:nth-last-child(1))

所有主流浏览器均支持 :last-child 选择器,除了 IE8 及更早的版本.

选择器匹配属于其父元素的最后一个子元素的每个元素。

p:last-child
{ 
    background:#ff0000;//指定属于其父元素的最后一个子元素的 p 元素的背景色
}

:nth-child(n)(CSS3)

匹配属于其父元素的第 N 个子元素,不论元素的类型。n 可以是数字、关键词或公式。

所有主流浏览器均支持 :nth-child() 选择器,除了 IE8 及更早的版本。

:nth-last-child(n)(CSS3)

匹配属于其元素的第 N 个子元素的每个元素,不论元素的类型,从最后一个子元素开始计数。

n 可以是数字、关键词或公式。

所有主流浏览器均支持 :nth-last-child() 选择器,除了 IE8 及更早的版本。

//奇偶相间颜色
p:nth-last-child(odd)
{
background:#ff0000;
}
p:nth-last-child(even)
{
background:#0000ff;
}

:nth-last-of-type(n)(CSS3)

匹配属于父元素的特定类型的第 N 个子元素的每个元素,从最后一个子元素开始计数。

n 可以是数字、关键词或公式。

所有主流浏览器均支持 :nth-last-of-type() 选择器,除了 IE8 及更早的版本。

:nth-of-type(n)(CSS3)

匹配属于父元素的特定类型的第 N 个子元素的每个元素.

n 可以是数字、关键词或公式。

所有主流浏览器均支持 :nth-of-type() 选择器,除了 IE8 及更早的版本

:first-of-type(CSS3)

(等同于 :nth-of-type(1))

选择器匹配属于其父元素的特定类型的首个子元素的每个元素。

所有主流浏览器均支持 :first-of-type 选择器,除了 IE8 及更早的版本。

:last-of-type(CSS3)

(等同于 :nth-last-of-type(1))

选择器匹配属于其父元素的特定类型的最后一个子元素的每个元素。

所有主流浏览器均支持 :first-of-type 选择器,除了 IE8 及更早的版本。

::selection(CSS3)

IE9+、Opera、Google Chrome 以及 Safari 中支持 ::selection 选择器。

Firefox 支持替代的 ::-moz-selection。

::selection 选择器匹配被用户选取的选取是部分。

只能向 ::selection 选择器应用少量 CSS 属性:color、background、cursor 以及 outline。

::selection
{
color:#ff0000;         //使被选中的文本成为红色
}

::-moz-selection
{
color:#ff0000;
}

 :target(CSS3)

用于选取当前活动的目标元素.

所有主流浏览器均支持 :target 选择器,除了 IE8 及更早的版本。

p:target
{ 
    border: 2px solid #D4D4D4;     //突出显示活动的 HTML 锚
    background-color: #e5eecc;
}

:root(CSS3)

匹配文档根元素(在 HTML 中,根元素始终是 html 元素).

所有主流浏览器均支持 :root 选择器,除了 IE8 及更早的版本

:root
{ 
    background:#ff0000; //设置 HTML 文档的背景色
}

:empty(CSS3)

匹配没有子元素(包括文本节点)的每个元素。

所有主流浏览器均支持 :root 选择器,除了 IE8 及更早的版本。

p:empty
{ 
    background:#ff0000;//指定空的 p 元素的背景色
}

 

:enabled(CSS3)

匹配每个已启用的元素(大多用在表单元素上)。

所有主流浏览器均支持 :enabled 选择器,除了 IE8 及更早的版本。

input[type="text"]:enabled
{ 
    background-color: #ff0000;//为所有 type="text" 的已启用的 input 元素设置背景色
}

 

:disabled(CSS3)

匹配每个被禁用的元素(大多用在表单元素上)。

所有主流浏览器均支持 :enabled 选择器,除了 IE8 及更早的版本。

input[type="text"]:disabled
{ 
    background-color: #dddddd;//为所有 type="text" 的被禁用的 input 元素设置背景色
}

 

:checked(CSS3)

匹配每个已被选中的 input 元素(只用于单选按钮和复选框)。

只有 Opera 支持 :checked 选择器。

input:checked
{ 
    background-color: #ff0000;//为所有被选中的 input 元素设置背景色
}

 

:not(selector)(CSS3)

匹配非指定元素/选择器的每个元素.

所有主流浏览器均支持 :target 选择器,除了 IE8 及更早的版本。

:not(p)
{ 
    background-color: #ff0000;//设置非 

元素的所有元素的背景色 }

 

11>伪元素

:before(CSS2)

选择器在被选元素的内容前面插入内容。

请使用 content 属性来指定要插入的内容。

所有主流浏览器都支持 :before 选择器。

对于 IE8 及更早版本中的 :before,必须声明

p:before
{ 
    content:"台词:"; //在每个 

元素的内容之前插入新内容 }

:after(CSS2) 选择器在被选元素的内容后面插入内容。

请使用 content 属性来指定要插入的内容。

所有主流浏览器都支持 :after 选择器。

对于 IE8 及更早版本中的 :after,必须声明

p:after
{ 
  content:"台词:";     //在每个 

元素的内容之后插入新内容 }

:first-line(CSS1)

用于选取指定选择器的首行。

所有主流浏览器都支持 。

以下属性可与 :first-line 使用:

字体属性、颜色属性、背景属性、word-spacing、letter-spacing、text-decoration、vertical-align、text-transform、line-height、clear

p:first-line
{ 
    background-color:yellow;    //选择每个 

元素的首行,并为其设置样式 }

 

:first-letter(CSS1)

用于选取指定选择器的首字母。

以下属性可与 :first-letter 使用:

字体属性、颜色属性、背景属性、外边距属性、内边距属性、边框属性、text-decoration、vertical-align(只有在 float 为 'none' 时)、text-transform、line-height、float、clear

所有主流浏览器都支持。

p:first-letter
{ 
    font-size:200%;       //选择每个 

元素的首字母,并为其设置样式 color:#8A2BE2; }

 

(0)

本文由 Calamus 作者:calamus 发表,转载请注明来源!

热评文章

发表评论

电子邮件地址不会被公开。 必填项已用*标注