- 元素选择器
单一的元素，覆盖面广
div{board：1px solid #eee}
选择器分组
值多个元素，应用相同的样式。两个或多个元素中间用“逗号，”隔开
举例：a，p {font：red 4px 微软雅黑}
通配选择器（*）
针对所有元素使用
*{background-colior：#fff}-
类选择器 （.元素）
对元素增加class=“@@@”进行命名的属性分类，然后指定样式，使用时在属性值前面加一个点“ . ”
举例：
<p class="pr">@@@@@@@</p>
.pr {font:14px dotted gray}同时类选择器可以组合进行使用
p.pr{font:14px dotted gray}
.abc .bcd{font:14px dotted gray} ID选择器 （#元素）子选择器对应属性只可出现一次，具有唯一性
对于元素增加 ID=“￥￥￥”进行命名的属性分类，然后指定样式，使用时在属性值钱加一个井号“#”
举例
<p id="content"> 213515 </p>
# content{font: red 14px 微软雅黑}
-
属性选择器
选定具有XXX属性的元素,使用时对于属性要加"[]" ( 元素[属性] )
例如
p [class]{ font-size:middle; }可以叠加组合
p[class][href] {font-weight:bold}可精准到指定属性
p[class="name"]{font:white solid 14px}根据部分属性值选择
- p[class~="name"] 选择p 元素中 含有class属性中还有name值的元素定义样式
- p[class^="na"] 选择p元素中 含有class属性中以na开头的所有元素
- p[class$="me"] 选择p元素中 含有class属性中以me结尾的所有元素
- p[class*="nam"] 选择p元素中 包含class属性中含有nam子串的所有元素
特定属性选择器
[lang|="en"] 选择lang 属性中以en或者以en-开头的所有元素。 一般用于语言的选择
-
后代选择器（两个元素有后代关系，且中间用空格符相连）
作为h1 后代的 任何em元素应用字体蓝色的样式
h1 em {font-color:blue}父子选择器（e > e）
h1>em{font-color:blue}
作为h1子元素的所有em元素应该蓝色字体样式兄弟选择器 (e+e)
h1 + p {margin-top:50px;}
选择紧接在 h1 元素后出现的段落，h1 和 p 元素拥有共同的父元素
-
伪类选择器
伪类语法：selector : pseudo-class {property: value}- 锚伪类
a:visited{color: #00FF00} /* 已访问的链接 */
a:hover{color: #FF00FF} /* 鼠标移动到链接上 */
a:active{color: #0000FF} /* 选定的链接 */```
：focus 意思为指示当前拥有焦点的元素
p: first-child 意思是选择第一个子元素为p的元素
p：fist-of-type 选择P元素的第一个子元素
：lang（fr）选定指定的语言元素(法语）
- 结合伪类
两个伪类可以结合
a:link:hover{color:red;} 当移动到一个未被点击的链接时，字体是变为红色。
- 伪元素选择器
- 首字母样式 p：first-letter{color:red;}
- 首行样式 p:first-line{color:blue}
- 设置之前和之后元素样式
- h1:before{content="HELLO";}
- H2:After{content="the end";}