博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
css基础知识之css选择器
阅读量:5015 次
发布时间:2019-06-12

本文共 1704 字,大约阅读时间需要 5 分钟。

(1)标签选择器: body、div、p、ul等等

(2)通用选择器: *(用来选取所有元素)

(3)id选择器:   #idName

(4)类选择器:   .className

(5)后代选择器/包含选择器:(连接符为空格)

  div p //指作为div元素后代的所有p元素,允许有隔代关系
(6)子元素选择器(连接符为 >)
  div > p //仅指作为div元素子元素的p元素,仅有父子关系

(7)群组选择器(连接符为,)

  div,p  //几个元素样式属性一样时使用

(8)相邻兄弟选择器(连接符为 +)

  div + p //指都作为div兄弟元素的p元素,两者有共同父元素,但是div不会受样式影响

(9)伪类选择器(向某些选择器添加特殊的效果)

伪元素的语法:

  selector:default-element{property:value;}

CSS 类也可以与伪元素配合使用:

  selector.class:default-element{property:value;}

  :first-line{}           /* 用于向文本首行设置特殊样式,只能用于块级元素 */

  :first-letter{}          /* 用于向文本的首字母设置特殊样式 */

  :before{}            /* 用于向元素前插入内容 */

  :after{}            /* 用于向元素后插入内容 */

  :link{}                   /* 向未被访问的链接添加样式 */

  :visited{}               /* 向已访问的链接添加样式 */

  :hover{}             /* 当鼠标悬停在元素上方时,向元素添加样式 */

  :active{}             /* 向被激活的元素添加样式 */

  :focus{}              /* 向获取焦点后的元素添加样式 */

  :first-child{}             /* p:first-child选取的是p元素父元素的第一个子p元素,而不是此p元素的第一个子元素 */

  :last-child{}          /* 选取此父元素的最后一个子元素 */

  :nth-child(n){}        /* 选取此父元素的第n个子元素,索引从1开始,n为表达式时索引从0开始 */

  :empty{}            /* 选取没有任何内容的元素 */

  :enabled{}          /* 选取处于可用状态的元素,一般用于input、select和textarea */

  :disabled{}           /* 选取处于禁用状态的元素,一般用于input、select和textarea */

  :checked{}           /* 选取处于被选中状态的元素,一般用于input和textarea */

(10)属性选择器(对带有指定属性的HTML元素设置样式)

  [attr]             /* 选取带有指定属性的元素 */

  [attr = value]        /* 选取带有指定属性和值的元素 */

  [attr ~= 'value']        /* 选取属性值中包含指定value的元素,value为单独存在的单词,不能包含在其他单词中 */

  [attr *= 'value']        /* 选取属性值中包含指定词汇的元素 */

  [attr |= 'value']       /* 选取带有以指定值开头,或者等于该值的元素 */

  [attr ^= 'value']       /* 选取属性值以value开头的所有元素 */

  [attr $= 'value']       /* 选取属性值以value结尾的所有元素 */

  

转载于:https://www.cnblogs.com/nullman/p/6739651.html

你可能感兴趣的文章
running and coding
查看>>
实现QQ第三方登录、网站接入
查看>>
HTML CSS 层叠样式表 三
查看>>
Qt pro pri 文件学习1
查看>>
软件工程概论第六周学习进度条
查看>>
[思路]导入导出功能
查看>>
【iOS】UICollectionView自己定义Layout之蜂窝布局
查看>>
golang——(strings包)常用字符串操作函数
查看>>
发布aar到jcenter
查看>>
跨浏览器问题的五种解决方案
查看>>
XPath定位时,使用文本的方法小技巧。
查看>>
安装pandas报错(AttributeError: 'module' object has no attribute 'main')
查看>>
ch02 fundamental definition 01
查看>>
JSON解析
查看>>
Position is everything?(css定位学习的一些心得)(一)
查看>>
如何提高编程水平
查看>>
Jquery Uploadify3.21.与2.1版本 使用中存在的问题--记录三
查看>>
Linux查看进程的内存占用情况 分类: ubuntu ...
查看>>
[BZOJ 2818]Gcd
查看>>
FORM值传递与地址传递
查看>>