CSS学习总结(一)

引言:
这是我自学HTML+CSS+JS当中的关于CSS的文章,主要是为了自我学习和提升,如有不妥之处,欢迎指出。
CSS选择器:
类选择器:
【.class {color:red;}】
【.class.class {background:silver;}】
【p.class {color:red;}】
ID选择器:
【#id {color:red;}】
属性选择器:
[title {color:red;}]】
【a[href] {color:red;}】
【a[href][title] {color:red;}】
【p[class="important warning"] {color:red;}】
【img[title~="Figure"] {color:red;}】选择title文本包含"Figure"的所有图像,没有title属性或title属性中不包含"Figure"的图像都不匹配。
【abc^="def"】 选择 abc 属性值以 "def" 开头的所有元素
【abc$="def"】 选择 abc 属性值以 "def" 结尾的所有元素
【abc
="def"】 选择 abc 属性值中包含子串 "def" 的所有元素
【*[lang|="en"] {color: red;}】会选择 lang 属性等于 en 或以 en- 开头的所有元素
后代选择器(包含选择器):
【h1 em {color:red;}】把作为 h1 元素后代的 em 元素的文本变为 红色
子元素选择器:
【h1 > strong {color:red;}】把h1下面第一层的strong元素文本变为红色
【table.company td > p】(结合后代选择器和子选择器)选择作为 td 元素子元素的所有 p 元素,这个 td 元素本身从 table 元素继承,该 table 元素有一个包含 company 的 class 属性。
相邻兄弟选择器:
【h1 + p {margin-top:50px;}】选择紧接在 h1 元素后出现的段落,h1 和 p 元素拥有共同的父元素
【li + li {font-weight:bold;}】只会把列表中的第二个和第三个列表项变为粗体。第一个列表项不受影响,因为用一个结合符只能选择两个相邻兄弟中的第二个元素。
伪类
伪元素

你可能感兴趣的:(CSS学习总结(一))