css选项器的摘抄学习

最近两天突然觉得自己似乎在前端上面没有能那得出手的东西,深感羞愧。
于是,开始从低级阶段开始学习html, css, js等能够在段时间内作出一些小玩意儿的东西。
以下是我在学习过程中总结摘抄的案例。

常用(见)选择器的类别及其功能

Screenshot_20171212_210850.png

CSS元素选择器:

html {color:black;}

h1 {color:blue;}

h2 {color:silver;}

CSS类选择器:

.important {color:red;}
.nav{
    Margin:0px;
    Padding:0px:
}

CSSID选择器:

#intro {font-weight:bold;}

CSS属性选择器:

如果您希望把包含标题(title)的所有元素变为红色,可以写作:
*[title] {color:red;}
与上面类似,可以只对有 href 属性的锚(a 元素)应用样式:
a[href] {color:red;}
还可以根据多个属性进行选择,只需将属性选择器链接在一起即可。
例如,为了将同时有 href 和 title 属性的 HTML 超链接的文本设置为红色,可以这样写:

a[href][title] {color:red;}

可以采用一些创造性的方法使用这个特性。
例如,可以对所有带有 alt 属性的图像应用样式,从而突出显示这些有效的图像:

img[alt] {border: 5px solid red;}

CSS后代选择器:

我们可以定义后代选择器来创建一些规则,使这些规则在某些文档结构中起作用,而在另外一些结构中不起作用。
举例来说,如果您希望只对 h1 元素中的 em 元素应用样式,可以这样写:

h1 em {color:red;}

CSS子元素选择器:

与后代选择器相比,子元素选择器(Child selectors)只能选择作为某元素子元素的元素。

如果您不希望选择任意的后代元素,而是希望缩小范围,只选择某个元素的子元素,请使用子元素选择器(Child selector)。
例如,如果您希望选择只作为 h1 元素子元素的 strong 元素,可以这样写:

h1 > strong {color:red;}//   >   

这个规则会把第一个 h1 下面的两个 strong 元素变为红色,但是第二个 h1 中的 strong 不受影响:

This is very very important.

This is really very important.

CSS伪类:

Screenshot_20171212_213022.png

由于时间关系,我不能在这个神奇的平台上面发布太多东西,因为弄格式还是挺费时间的。
不过,我先给自己挖几个坑,防止自己懈怠。

动态日历

二级菜单,三级菜单。(附有css 和js两个版本的代码)

请大家拭目以待,谢谢。

你可能感兴趣的:(css选项器的摘抄学习)