网页分成三个部分：
-
结构 HTML
-
表现 CSS
-
行为 JS
CSS
CSS
---层叠样式表
---网页实际是一个多层结构，通过css可以分别为网页的每一个层来设置样式
---总之一句话，css用来设置网页中元素的样式
一个样式的列表
层叠？ 样式是分层的结构，一层压一层，俯视
1、行内样式 内联样式（不推荐使用）
<body>
<p style="color: darkred; font-size: 210px;"> 少小离家老大回</p>
</body>
2、样式编写到head中的styple标签中 内部样式表，通过css选择器选中元素，并为其设置各种样式，
可以同时为多个标签设置样式，并且修改时只需要修改一处
内部样式更加方便复用
<style>
p{
color:darksalmon;
font-size: 110px;
}
</style>
3、外部样式表，将css样式编写到一个文件中，然后引入
CSS语法
selectors 选择器
声明块 通过声明块，指定要为元素设置的样式
CSS常用选择器
简单选择器
元素选择器：根据标签名来选中指定元素
p{} h1{} div{}
id选择器：根据元素id属性值选中一个元素
#box{} #red{}
class 是一个标签属性，它和id类似，不同的是class可以重复，通过class属性来为元素分组
class选择器：根据元素的class来选中一组元素
.blue{} .abc{}
通配选择器，选中页面中的所有元素
*{}
交集选择器
div.red{
font-size: 30px;
}
必须使用元素选择器开头
.a.b.c{
font-size: 14px;
}
选择器分组 并集选择器
h1, span{}
子元素选择器
父元素 > 子元素{}
div > span{
}
后代元素选择器 选中指定元素内的指定后代元素
祖先 后代{}
div span{
}
选择下一个兄弟
前一个 + 后一个
p + span {}
选择后边的所有兄弟
p ~ span{}
属性选择器
p[title]{
color: orange;
}
[属性名] ： 选择含有指定属性的元素
[属性名=属性值] ：选择含有指定属性和属性值的元素
[属性名^=属性值]: 选择属性值以指定值开始的元素
[属性名$=属性值]: 选择属性值以指定值结尾的元素
[属性名*=属性值]: 通配符
伪类选择器
不存在的类，特殊的类
伪类用来描述一个元素的特殊状态
比如第一个子元素、被点击的元素、鼠标移入的元素...
伪类一般情况下都使用：开头
:first-child 第一个子元素
:last-child 最后一个子元素
:nth-child() 第n个
特殊值：
n 0-+无穷
even / 2n 选择偶数位元素
odd / 2n+1 选择奇数位
以上伪类都是根据所有的子元素进行排序
:first-of-type
:last-of-type
:nth-of-type
这几个伪类的功能和上述类似，不同点是他们是在同类型中进行排序
:not 否定伪类 将符合条件的元素从选择器中去除
超链接的伪类
伪元素
::first-letter 第一个字母
::first-line 第一行
::selection 选中的
::before{
content: "abc"
}
::after{
content:"abc"
}
通过befroe after添加的内容无法选中
样式的继承
继承的设计是为了方便我们的开发
标签：入门,伪类,样式,元素,选中,选择器,CSS,属性 来源： https://www.cnblogs.com/ya-cpp/p/15076475.html
本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享； 2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关； 3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关； 4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除； 5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。