Chapter 3 Id, 选择器, 伪类

CSS 命名规则:

只能使用字母,数字,下划线(_),连字符(-)

Id 的作用

可以作为锚点, 当访问url的时候,可以在后面加上#, 网页会直接定位到该标签
<div id="R">test</div>
访问的url : index.html#R
就可以直接定位到这个元素
name属性也有这个作用
<a name="R">test</a>
也可以实现相同的功能

Paste_Image.png
Paste_Image.png

伪类:

  • :link
  • :hover
  • :visited
  • :active
  • :foucs
  • :not()
img:not(.port)
a[href^='http://']:not([href*="google.com"])
  • 用否定选择器只能使用简单的选择器(元素选择器, 通用选择器,类选择器,ID选择器或者伪类)
  • 不能使用派生选择器,伪类元素群组选择器或其组合
  • 不能使用多个否定选择器

伪元素

  • :first-line
  • :first-letter
  • :before
  • :after
  • ::selection . (只能设置color 和backgorund-color,必须双冒号)
  • :frist-child
  • :last-child
  • :nth-child
tr:nth-child(odd)
tr:nth-child(even)
tr:nth-child(3n+2)
  • :first-of-type
  • :last-of-type
  • :nth-of-type

属性选择器

  • 属性等于某个值
  • 属性以xxx开头 ^=
  • 属性以xxx结尾 $=
  • 属性包含xxx 。 *=
input[type="text"]
a[href^="http://"]
a[href$=".pdf"]
img[src*="headshot"]
最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • 一、基本选择器 回顾选择器 通配符选择器、元素选择器、类选择器、ID选择器、后代选择器 新增基本选择器 子元素选择...
    越IT阅读 1,233评论 0 3
  • 其实平时用得多的选择器无非也就是那么几个,时间久了,许多不常用的选择器就慢慢忘记了。为了不让自己忘记这些选择器,今...
    盛夏晚清风阅读 1,886评论 0 5
  • 本文转载自:众成翻译译者:为之漫笔链接:http://www.zcfy.cc/article/239原文:http...
    极乐君阅读 7,456评论 1 62
  • (1). 阴影模糊半径与阴影扩展半径的区别:阴影模糊半径:此参数可选,其值只能是为正值,如果其值为0时,表示阴影不...
    Leisure_blogs阅读 1,570评论 0 6
  • 画画这条路上,我还是只羽翼不太丰满的小小鸟。昨天的作品,画的不好,希望大家多多指点。临摹一位简友的。如那位简友看到...
    C很远阅读 238评论 8 7