欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  web前端

神奇的CSS3选择器_html/css_WEB-ITnose

程序员文章站 2022-04-17 12:49:12
...
话说园子里也混迹多年了,但是基本没写过blog,写点基础的,那就从css3选择器开始吧。

 Css3选择器

先说下,为什么提倡使用选择器。

  1. 使用选择器可以将样式与元素直接绑定起来,在样式表中什么样式与什么元素匹配一目了然,修改起来也很方便。
  2. 减少样式表的代码量。

属性选择器

  1.[att*=val]属性选择器

  意义:表示元素用att表示的属性的属性值包含用val表示的字符,则该元素使用这个样式

  2.[att^=val]属性选择器

  意义:表示元素用att表示的属性的属性值以val表示的字符串开头,则该元素使用这个样式。

  3.[att$=val]属性选择器

  意义:表示元素用att表示的属性的属性值以val表示的字符串结尾,则该元素使用这个样式

  结构性伪类选择器

  伪类选择器是指已经定义好的选择器,不能随便起名。

  例如:a:link,a:visited,a:hover,a:active.

  伪元素选择器是指已经定义好的为元素使用的选择器。

  1. first-line伪元素选择器

hello world
你好

2.first-letter 伪元素选择器

 

hello world

你好

befor伪元素选择器

  • demo1
  • demo1
  • demo1
  • demo1
  • demo1

after伪元素选择器

  • demo1
  • demo1
  • demo1
  • demo1
  • demo1

  root选择器

  root选择器将样式绑定到页面的根元素。在使用:root与body元素的背景时,根据不同的条件,显示效果不同

你好

  not 选择器

  排除结构元素下面子结构元素,使他不使用该元素

大家好

你好

  empty选择器

  当元素内容为空时使用的样式。

1 2

  target选择器

  使用target选择器给页面中的target元素使用样式

示例1

你好

你好你好你好你好你好你好你好你好你好你好你好你好你好你好

你好

你好你好你好你好你好你好你好你好你好你好你好你好你好你好

你好

你好你好你好你好你好你好你好你好你好你好你好你好你好你好

  first-child、last-child选择器

  指定第一个子元素和最后一个子元素的样式

  • 1
  • 2
  • 3
  • 1

  nth-child、nth-last-child选择器

  针对父元素中某个指定序号的子元素来指定样式。

  也可以使用Nth-child(even)对偶数子元素指定样式,Nth-child(odd)对奇数元素指定样式

  • 1
  • 2
  • 3
  • 1

  nth-of-type nth-last-of-type选择器

  这两个选择器是为了弥补nth-child、nth-last-child选择器的缺陷,这两个选择器只针对同类元素指定样式。

  UI元素状态选择器

  E:horver,E:active,E:focus选择器

  E:enabled,E:disabled,E:read-only,E:read-write选择器




  E:checked、E:default选择器

  E:checked指定复选框选取时的样式

  E:default 指定默认选取框的样式

  

E::selection选择器

  指定元素处于选中状态时的样式

测试测试

 
相关标签: 神奇的CSS3选择器