02day CSS选择器

1、选择器:

*选择器(selector),会告诉浏览器:网页 上的哪些元素需要设置什么样的样式。

*比如:p这个选择器就表示选择页面中的所 有的p元素,在选择器之后所设置的样式会 应用到所有的p元素上

元素选择器:

*元素选择器(标签选择器),可以根据标 签的名字来从页面中选取指定的元素。

*语法: 标签名 { }

*比如p则会选中页面中的所有p标签,h1会 选中页面中的所有h1标签。

2、类选择器:

类选择器,可以根据元素的class属性值选取元素。

语法:

.className{}

比如.hello会选中页面所有class属性为hello的元素。

3、ID选择器

ID选择器,可以根据元素的id属性值选取元素。

语法:#地{}

比如:#box会选中页面中的id属性值为box的元素,和class属性的不同,id属性是不能重复的。

4、复合选择器

复合选择器,可以同时使用多个选择器,这样可以先择同时满足多个选择器的元素。

语法:选择器,选择器{}

例如:div.box1会选中页面中具有box1这个class的div元素。


5、群组选择器:

群组选择器,可以同时使用多个选择器,多个选择器将同时应用指定的样式。

语法:选择器1,选择器2,选择器3{}

比如p,hello,#box会同时选中页面中p元素,class为hello的元素,id为box的元素。

6、通用选择器:*{}


族谱

7、标签之间的关系:

祖先元素:直接或间接包含后代元素的元素。

后代元素:直接或间接被祖先元素包括的元素。

父亲元素:直接包含子元素的元素。

子元素:直接被父元素包含的元素。

8、兄弟元素:拥有相同父元素的元素。

9、后代选择器:后代选择器可以根据标签的关系,为处在元素内部的代元素设置样式。

语法:祖先元素,后代元素,后代元素{}

比如:p strong会选中页面中的所有中的p元素内的strong元素。

10、给链接定义样式:

正常连接:a:link

访问过的链接:a:visited

鼠标还过的链接:a:hover

鼠标点击的链接:a:active

其他:

获取焦点:fcous

指定元素前:before

指定元素后:after

远中的元素::selection

11、给段落定义样式:

首字母:first-letter

首行:first-line

12、自选择器:父选择器>子选择器

其他的子元素选择器

:first-child 选择第一个子标签

:last-child选择做后一个子标签

:not-child选择指定的子元素

:first-of-type

:last-of-type

:nth-of-type这三者对应不同的指定类型的子元素

13、兄弟选择器:兄弟元素+兄弟元素{}查找后面一个兄弟元素

查找后面的所有兄弟元素. 兄弟元素~兄弟元素{}

否定伪元素:not(选择器){}

比如p:not(.hello)表示选择所有的p元素但 是class为hello的除外。

*********************************************************************

1题 plate(元素选择器)

2题bento(元素选择器)

3题#fancy(id选择器)

4题plate apple(后代元素选择器)

5题#fancy pickle(复合选择器)

6题.small(类选择器)

7题bento .small,plate .small(并集选择器)

8题bento orange(后代元素选择器)

9题plate,bento,plate(并集选择器)

10题*(通配选择器)

11题plate*(后代元素选择器)

12题plate + apple(兄弟元素选择器)

13题bento~pickle(兄弟元素选择器)

14题plate > apple(子类元素选择器)

15题orange:first-child(子元素选择器)

16题:only-child(子元素选择器)

17题.small:last-child(子元素选择器)

18题plate:nth-child(3)(子元素选择器)

19题:nth-last-child(4)(子元素选择器)

20题apple:first-of-type(子元素选择器)

21题plate:nth-of-type(even)(子元素选择器)

22题plate:nth-of-type(2n+3)(子元素选择器)

23题apple:only-of-type(子元素选择器)

24题.small:nth-child(even)(子元素选择器)

25题bento:empty(子元素选择器)

26题apple:not(.small)(not选择器)

©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • 选择器 元素选择器 作用:通过元素选择器可以选择页面中的所有指定元素 语法:标签名{} id选择器 作用:通过元素...
    2simple阅读 677评论 0 0
  • 其实平时用得多的选择器无非也就是那么几个,时间久了,许多不常用的选择器就慢慢忘记了。为了不让自己忘记这些选择器,今...
    盛夏晚清风阅读 1,864评论 0 5
  • CSS选择器结构逻辑图 接下来按照结构逻辑图具体讲解各个选择器的作用及用法; 基本选择器 基本选择器主要有以下5类...
    FoolishFlyFox阅读 575评论 0 8
  • 1.class 和 id 的使用场景? class:类选择器,一个标签可以有多个类且同一个类可以用到不同的标签上,...
    饥人谷_兔子君阅读 1,209评论 0 0
  • 1.class 和 id 的使用场景? 两者都能选取DOM节点并给DOM节点添加样式,但是W3C标准里规定页面中只...
    饥人谷_米弥轮阅读 413评论 0 1