css学习笔记
一个标签可以有多个class。重复的以后面的为准
并集选择器：用逗号分隔的。
复合选择器（交集选择器）：
满足多个条件的选择器。
语法：选择器1选择器2选择器3{}
(中间没有空格)
对拥有class为p3的span元素进行设计：
span.p3{
background-color:yellow;
}
父元素 与 子元素
就是直接包含的两个标签。
祖先元素：直接或间接包含，所以父元素也是祖先元素
后代元素。
兄弟元素：拥有相同父元素的元素。
后代元素选择器
作用：选中指定元素的指定后代元素
语法：祖先元素 后代元素{}
子元素选择器
父元素>子元素{}
伪类选择器
专门用来表示元素的一种特殊的状态
比如访问过的超链接，获取焦点的文本框
a:link 没访问过的链接
a:visited 访问过的链接
浏览器是通过历史记录判定的一个链接是否被访问过。
因此，有的浏览器为了保护隐私，所以使用visited伪类只能设置字体颜色。
a:hover鼠标移入
a:active 链接被点击的状态
p标签也可以使用hover等。
focus 获取焦点。
input获取焦点后，背景颜色变成黄色。
Input:focus {
background-color:yellow;
}
p：：selection
p标签中选中的内容使用样式
可以使用：：selection
伪元素
使用伪元素来表示元素中的一些特殊位置。
为p中第一个字符来设置一个特殊样式。
P:first-letter{
color:
}
为p中第一行设置一个样式。
P:first-line{
}
p:before
表示元素最前面的部分。
一般before都需要结合content这个样式一起使用，
通过content可以向before或after的位置添加一些内容。这个内容是选不中的。
p:before{
content:"...";
color:
}
属性选择器
可以根据元素中的属性或属性值来选取指定元素。
<p titl="hello":>这是一个段落</p>
为所有具有title属性的p元素，设置一个背景颜色为黄色
p[title]{
background-color:yellow;
}
为所有具有title属性=hello的p元素，设置一个背景颜色为黄色
p[title="hello"]{
background-color:yellow;
}
为title属性值以ab开头的元素设置一个背景颜色为黄色
p[title^="ab"]{
background-color:yellow;
}
为title属性值以c结尾的元素设置一个背景颜色
p[title$="c"]{
background-color:yellow;
}
为title属性值包含c的元素设置一个背景颜色
p[title*="c"]{
background-color:yellow;
}
其他子元素选择器
选中第一个子元素。
要求p是父元素的第一个子元素,不是父元素的第一个p元素。
p:first-child{
//冒号前面不写，前面就是*，是一个通配符
}
body>p:first-child{
//表示body标签下的第一个元素，且是p的元素
}
p:last-child{
//选中最后一个
}
p:nth-child(5){
//选中第5个
}
p:nth-child(even){
//选中第偶数个
//如果填odd就是基数
//可以用于做表格隔行变色
}
p:first-of-type{
//操作第一个p元素
}
p:last-of-type{
//操作最后一个p元素
}
p:nth-of-type(){
//操作第n个p元素
}
兄弟元素选择器
使用+号,为span(紧挨着的)后一个p元素设置样式
span + p{
background-color:yellow;
}
使用～号，选中span后边的所有兄弟p元素
span ~ p{
background-color:yellow;
}
否定伪类：
为所有p元素设置一个背景颜色为黄色，除了class的值为hello的。
作用：可以从已选出的元素中剔除出某些元素。
：not(选择器)
p:not(.hello){
background-color: yellow;
}