CSS


类选择器:

eg. <div class = "a"></div>

CSS中用“.”号选中该类【 .a{...} 】

若某元素同时属于多个类

 eg. <div class = "a" class = "b"><div>

CSS中用紧挨着多个“.”号选中【 .a.b{...} 】(若之间有空格如.a .b则含义为选中类a下的类b元素)

ID选择器:

eg. <div id = "a"></div>

CSS中用“#”号选中 【 #a{...} 】

属性选择器:

eg. <button title= "abc"></button>

1)用“[xx]”选中含有xx属性的元素

【 [title]{...} 】

2)用“ [xx="yy"] ”选中xx属性为"yy"的元素

【 [title="abc"]{...} 】

3)用“ 【xx^="yy"】 ”选中xx属性最前面一部分内容为"yy"的元素

【 [title^="a"]{...} 】

4)用“ [xx$="yy"] ”选中xx属性最后面一部分内容为"yy"的元素

【 [title$="c"]{...} 】

后代选择器:

CSS中用空格隔开的类选择器选中某元素的某后代元素

eg. 选中类a下所有的类b后代:【 .a .b{...} 】

用“*”表示某元素的所有后代元素(单独“*”号则代表页面中所有元素)

【 .a * {...} 】

相邻选择器及通用相邻选择器:

1)用“+”来选择紧接在某元素后的一个元素(二者要有相同的父元素)

eg.选择类a的后一个相邻的兄弟div:【 .a + div {...} 】

2)用“~”来选择紧接在某元素后的所有元素(二者要有相同的父元素)

eg.选择类a后面所有的兄弟div:【 .a ~ div {...} 】

伪类:

用“:”来选择某伪类

常用伪类eg.

【 a:link {...} //未访问过的链接 】

【 a:visited {...} //已访问过的链接 】

【 a:hover {...} //鼠标移动到链接上 】

【 a:active {...} //鼠标点击链接瞬间 】

【 input:focus {...} //鼠标选中输入框 】

(ps: a:hover 必须被置于 a:link 和 a:visited 之后,a:active 必须被置于 a:hover 之后)

伪元素:

用“:”或“::”来选择某伪元素

常用伪元素eg.

【 p:first-leter {...} //段落的首字母 】

【 h1:before {content:"xx";} //在h1元素前插入内容“xx”】

【 h1:after {content:"xx";} //在h1元素后插入内容“xx”】

【 div p:first-child {content:"xx";} //在div里面的第一个p元素后插入内容“xx”】

【 div p:nst-child( 这里传参 ) {content:"xx";} //在div里面第N个的p元素后插入内容“xx”】



选择器权重:

1000 -- 100 -- 10 -- 1  分为四个等级,权重可以累加

style属性(内联) > ID选择器 > 类选择器/属性选择器/伪类选择器 > 元素选择器

字体属性:

常用举例:

字体类型【 font-family: "微软雅黑", "Microsoft Yahei"; 】(用","隔开多个值将会从前往后找,直到找到匹配字体,找不到则为默认字体)

字体粗细(字重)【 font-weight: xx(100~900之间的一个值); 】

字体大小【 font-size: 13px / xx%(母元素的百分比大小); 】


©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • 问答题47 /72 常见浏览器兼容性问题与解决方案? 参考答案 (1)浏览器兼容问题一:不同浏览器的标签默认的外补...
    _Yfling阅读 13,796评论 1 92
  • CSS选择器结构逻辑图 接下来按照结构逻辑图具体讲解各个选择器的作用及用法; 基本选择器 基本选择器主要有以下5类...
    FoolishFlyFox阅读 576评论 0 8
  • 其实平时用得多的选择器无非也就是那么几个,时间久了,许多不常用的选择器就慢慢忘记了。为了不让自己忘记这些选择器,今...
    盛夏晚清风阅读 1,874评论 0 5
  • 一、CSS入门 1、css选择器 选择器的作用是“用于确定(选定)要进行样式设定的标签(元素)”。 有若干种形式的...
    宠辱不惊丶岁月静好阅读 1,619评论 0 6
  • 学会使用CSS选择器熟记CSS样式和外观属性熟练掌握CSS各种选择器熟练掌握CSS各种选择器熟练掌握CSS三种显示...
    七彩小鹿阅读 6,338评论 2 66