全面整理 CSS3 选择器的用法

阅读 2455
收藏 205
2016-12-12
原文链接:github.com

0.[attribute=value]
为name等于css的元素设置样式
image


        

Wsscat!

Asw!

Asw!

cat!

me!

css!

1.[attribute|=value]
image
选择attribute属性值以"value"开头的元素,并设置其样式:
[attribute|=value]选择器用于选取带有以指定值开头的属性值的元素。
注意的是,该值必须是整个单词,比如 name="css",或者后面跟着连字符,比如 name="css-ab"。


        

Hello!

Hi!

Ello!

Hi!

nihao!

2.[attribute^=value]
image
[attribute^=value]选择器匹配属性值以指定值开头的每个元素。
设置name属性值以"css"开头的所有 div元素的背景色:


        

Hello!

Hi!
Hi!

Ello!

Hi!

nihao!

3.[attribute*=value]
image
设置name属性值包含"css"的所有p元素的背景色:
[attribute*=value]选择器匹配属性值包含指定值的每个元素。


        

Hello!

Hi!

Ello!

Hi!

nihao!

4.[attribute$=value]
image
设置name属性值以"css"结尾的所有p元素的背景色:
注意“css”这个既属于开头也属于结尾,所以选择器也是可以选择到。
[attribute$=value]选择器匹配属性值以指定值结尾的每个元素。


        

Wsscat!

Asw!

cat!

me!

css!

5.[attribute~=value]
选择name属性包含单词"css"的元素,并设置其样式:
注意是css单词,所以css-ab这样不算
image


        

Wsscat!

Asw!

Asw!

cat!

me!

css!

image
下面分别是
选择未访问、已访问、悬浮和活动链接
已访问就是历史记录中已经有你这个记录就会显示已访问,清空历史记录即可变成选择未访问
活动链接就是点击的那一下动作代表着你活动了


    

    
        

链接:w3school.com.cn

image

选择每个

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


    
        

层叠样式表是一种用来表现HTML(标准通用标记语言的一个应用)或XML(标准通用标记语言的一个子集)等文件样式的计算机语言。 CSS目前最新版本为CSS3,是能够真正做到网页表现与内容分离的一种样式设计语言。相对于传统HTML的表现而言,CSS能够对网页中的对象的位置排版进行像素级的精确控制,支持几乎所有的字体字号样式,拥有对网页对象和模型样式编辑的能力,并能够进行初步交互设计,是目前基于文本展示最优秀的表现设计语言。CSS能够根据不同使用者的理解能力,简化或者优化写法,针对各类人群,有较强的易读性。

选择每个

元素的首字母,并为其设置样式:



    
        

层叠样式表是一种用来表现HTML(标准通用标记语言的一个应用)或XML(标准通用标记语言的一个子集)等文件样式的计算机语言。 CSS目前最新版本为CSS3,是能够真正做到网页表现与内容分离的一种样式设计语言。相对于传统HTML的表现而言,CSS能够对网页中的对象的位置排版进行像素级的精确控制,支持几乎所有的字体字号样式,拥有对网页对象和模型样式编辑的能力,并能够进行初步交互设计,是目前基于文本展示最优秀的表现设计语言。CSS能够根据不同使用者的理解能力,简化或者优化写法,针对各类人群,有较强的易读性。

在每个

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



    
        

层叠样式表是一种用来表现HTML(标准通用标记语言的一个应用)或XML(标准通用标记语言的一个子集)等文件样式的计算机语言。 CSS目前最新版本为CSS3,是能够真正做到网页表现与内容分离的一种样式设计语言。相对于传统HTML的表现而言,CSS能够对网页中的对象的位置排版进行像素级的精确控制,支持几乎所有的字体字号样式,拥有对网页对象和模型样式编辑的能力,并能够进行初步交互设计,是目前基于文本展示最优秀的表现设计语言。CSS能够根据不同使用者的理解能力,简化或者优化写法,针对各类人群,有较强的易读性。

设置HTML文档的背景色:
也就是html标签设置背景色
image



    
        

层叠样式表是一种用来表现HTML(标准通用标记语言的一个应用)或XML(标准通用标记语言的一个子集)等文件样式的计算机语言。 CSS目前最新版本为CSS3,是能够真正做到网页表现与内容分离的一种样式设计语言。相对于传统HTML的表现而言,CSS能够对网页中的对象的位置排版进行像素级的精确控制,支持几乎所有的字体字号样式,拥有对网页对象和模型样式编辑的能力,并能够进行初步交互设计,是目前基于文本展示最优秀的表现设计语言。CSS能够根据不同使用者的理解能力,简化或者优化写法,针对各类人群,有较强的易读性。

设置非

元素的所有元素的背景色:
:not(selector)选择器匹配非指定元素/选择器的每个元素。



    
        

wsscat

层叠样式表是一种用来表现HTML(标准通用标记语言的一个应用)或XML(标准通用标记语言的一个子集)等文件样式的计算机语言。 CSS目前最新版本为CSS3,是能够真正做到网页表现与内容分离的一种样式设计语言。相对于传统HTML的表现而言,CSS能够对网页中的对象的位置排版进行像素级的精确控制,支持几乎所有的字体字号样式,拥有对网页对象和模型样式编辑的能力,并能够进行初步交互设计,是目前基于文本展示最优秀的表现设计语言。CSS能够根据不同使用者的理解能力,简化或者优化写法,针对各类人群,有较强的易读性。

指定空的p元素的背景色:
:empty 选择器匹配没有子元素(包括文本节点)的每个元素。



    
        

wsscat

层叠样式表是一种用来表现HTML(标准通用标记语言的一个应用)或XML(标准通用标记语言的一个子集)等文件样式的计算机语言。 CSS目前最新版本为CSS3,是能够真正做到网页表现与内容分离的一种样式设计语言。相对于传统HTML的表现而言,CSS能够对网页中的对象的位置排版进行像素级的精确控制,支持几乎所有的字体字号样式,拥有对网页对象和模型样式编辑的能力,并能够进行初步交互设计,是目前基于文本展示最优秀的表现设计语言。CSS能够根据不同使用者的理解能力,简化或者优化写法,针对各类人群,有较强的易读性。

突出显示活动的HTML锚:
跳转对应的锚点之后触发的样式


    

    
        

这是标题

跳转至内容 1

跳转至内容 2

请点击上面的链接,:target 选择器会突出显示当前活动的 HTML 锚。

内容 1...

内容 2...

注释: Internet Explorer 8 以及更早的版本不支持 :target 选择器。

选择属于其父元素的首个子元素的每个

元素,并为其设置样式:
注意第一个p的父元素是body,第二个p的父元素也是body,而第三个p的父元素是div,所以只有第一个和第三个样式会发生改变





这个段落是其父元素(body)的首个子元素。

欢迎访问我的主页

这个段落不是其父元素的首个子元素。

这个段落是其父元素(div)的首个子元素。

这个段落不是其父元素的首个子元素。

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

规定属于其父元素的第二个子元素的每个p的背景色:
就是满足p标签并且是所在父元素第二个子元素改变样式


    

    
        

这是标题

第一个段落。

第二个段落。

第三个段落。

第四个段落。

注释:Internet Explorer 不支持 :nth-child() 选择器。

我们做以下的改变
就可以看到h1既满足是所在父元素的第二个子元素,并且是h1标签


    

    
        wsscat
        

这是标题

第一个段落。

第二个段落。

第三个段落。

第四个段落。

注释:Internet Explorer 不支持 :nth-child() 选择器。

image

规定属于其父元素的第六个子元素的每个h1元素,从最后一个子元素开始计数:
:nth-last-child(n)选择器匹配属于其元素的第 N 个子元素的每个元素,不论元素的类型,从最后一个子元素开始计数。


    

    
        wsscat
        

这是标题

第一个段落。

第二个段落。

第三个段落。

第四个段落。

注释:Internet Explorer 不支持 :nth-child() 选择器。

image

Odd 和 even 是可用于匹配下标是奇数或偶数的子元素的关键词(第一个子元素的下标是 1)。
image


    

    
        wsscat
        

这是标题

第一个段落。

第二个段落。

第三个段落。

第四个段落。

注释:Internet Explorer 不支持 :nth-child() 选择器。

规定属于其父元素的第二个p元素的每个p:
:nth-of-type(n)选择器匹配属于父元素的特定类型的第 N 个子元素的每个元素.


    

    
        wsscat
        

这是标题

第一个段落。

第二个段落。

第三个段落。

第四个段落。

注释:Internet Explorer 不支持 :nth-child() 选择器。

匹配属于父元素中唯一子元素的p元素:
例如这里第一个div中有唯一一个p元素能匹配
第二个div有span和p标签,因为不是唯一的p元素,所以匹配不到




This is a paragraph.

This is a span.

This is a paragraph.

Note: Internet Explorer 8 and earlier versions do not support the :only-child selector.

为所有被选中的 input 元素设置背景色和宽度等样式:


    

    
        
Male
Female
I have a bike
I have a car

注释:本例只在 Opera 中正确地工作!

选择

元素之后紧跟的每个

元素,并设置其背景色:
就是紧跟着后面的这对

元素的样式更改
选择器用于选取第一个指定的元素之后(不是内部)紧跟的元素。


    

    
        

欢迎来到我到的主页

我是唐老鸭。

我住在 Duckburg。

我最好的朋友是米老鼠。

我的样式不会改变。

E:enabled{sRules}
匹配用户界面上处于可用状态的元素E。


    

    
        
可用 不可用

E:enabled{sRules}
匹配用户界面上处于可用状态的元素E。


    

    
        
可用 不可用

:read-only如果 input 元素设置了 "readonly" 属性,设置输入框样式为gray
:read-write如果 input 元素不是只读,即没有 "readonly" 属性,设置输入框样式为greenyellow:

  • E: read-only伪类选择器用来指定当元素处于只读状态时的样式。
  • E: read-write伪类选择器用来指定当元素处于非只读状态时的样式。

    

    
        

名前:

地址:

:checked被选中的时候就更改样式



    
        
兴趣:阅读 旅游 看电影 上网
评论