标签：样式 标签 li 选择符 样式表 选择器 css 属性
CSS: 层叠样式表 style:样式
修饰和美化整个网页，实现各种不同的网页布局风格
行内样式的优先级最高 内部样式和外部样式并没有明确的优先级，看先后书写顺序，后写的会覆盖先写的
行内样式：将css样式直接加到html每一个标签上，在头部标签书写 类似于写HTML的属性 使用style="样式名:样式内容;" 来设置
例： <p style="color:red;">文字颜色是红色</p>
内部样式： <style></style>需要使用一对style标签，一般写在html的head标签中
外部样式：需要使用link标签来引入一个css文件 rel属性表示引入文件的类型 href属性表示引入文件的路径
导入样式和外部样式的区别：
导入样式：加载顺序是先加载HTML页面，当所有页面内容加载完之后，才会开始加载css，
会导致页面刚打开的前一两秒有短暂的没有css效果的网页
外部样式：加载HTML页面的同时一起加载CSS样式
关于编程语言 命名要求：不能以数字开头，不能使用特殊符号 可以使用的有 字母 数字 下划线 _ 美元符号 $
css的选择器：
基本选择器（元素选择符）： 优先级：
id > 类 > 标签 > 通配符
优先级的计算： 采用权重值计算
id 权重值 100
类 10
标签 1
通配 0
通配选择符： * 表示 代表匹配页面中所有的HTML标签，设置统一的样式
注意：该选择符尽量避免使用，对页面的性能有影响
例： *{color:red;} 将页面所有的文字颜色设置成红色
标签选择符（类型选择符）：
通过标签名来选择对应的HTML标签，设置统一样式
例： p{color:red;} 将页面中所有的p标签文字颜色设置成红色
类选择符： class属性 每一个标签都可以添加一个class属性，该属性代表类名
在css中 使用 . 来表示类选择符
例： .co{color:green;} 将所有class名字是co的标签设置文字颜色是绿色
ID选择符： id属性 每一个标签都可以加一个id属性，但是该属性具有唯一性，同一个id名只允许出现一次
在css中 使用 # 来代表ID选择符
例： #lis{color:red;} 将id名为lis的标签设置文字颜色是红色
关系选择符：
包含选择符(后代选择器) 语法： 选择器1 选择器2{样式名:样式值;}
例： ul .lis{color:red;} 表示获取到ul中所有后代标签class属性是lis的标签，设置颜色是红色
子选择符 语法： 选择器1>选择器2{样式名:样式值;}
例： ul>li{color:red;} 表示获取到ul中所有子元素是li的标签，设置颜色是红色
相邻选择符 语法： 选择器1+选择器2{样式名:样式值;}
相邻选择符只会选择到下一个相邻的兄弟标签，不会选择之前的兄弟标签
例： #li3+li{color:red;} 表示选择id是li3的标签的下一个兄弟元素是li的标签，设置颜色是红色
兄弟选择符 语法： 选择器1~选择器2{样式名:样式值;}
兄弟选择符只会选择当前标签之后的所有兄弟标签，不会选择到前面的兄弟标签
例： #li3~li{color:red;} 表示选择id是li3的标签的后面所有兄弟元素是li的标签，设置颜色是红色
我们把标签 元素 节点 可以看成是一个东西就是html上面的标签
属性选择器：
选择器[属性名]{} 选择具有某一个属性的一类标签
例： p[class]{color:red;} 表示选择具有class属性的p标签，设置文字颜色是红色
选择器[属性名=属性值]{} 选择具有某一属性，并且规定了属性值的一类标签
例： p[class=a1]{color:blue;} 表示选择具有class属性并且属性值是a1的所有p标签，设置文字颜色是蓝色
选择器[属性名^=值] 选择具有某一属性，并且属性值以什么值作为开头
例： p[class^=a]{color:green;} 表示选择具有class属性，并且属性值以a开头的所有p标签，设置颜色为绿色
选择器[属性名$=值] 选择具有某一属性，并且属性值以什么值作为结尾
例： p[class$=a]{color:green;} 表示选择具有class属性，并且属性值以a结尾的所有p标签，设置颜色为绿色
选择器[属性名*=值] 选择具有某一属性，并且属性值包含某一个内容
例： p[class*=a]{color:green;} 表示选择具有class属性，并且属性值中带有a的所有p标签，设置颜色为绿色
伪类选择器：
a:link 表示超链接没有被访问前的状态
a:visited 表示超链接被访问后的状态
a:hover 表示鼠标悬浮在超链接上的状态
a:active 表示鼠标按下但并没有释放是的状态
注意 a:hover 必须位于 a:link 和 a:visited 之后，a:active 必须位于 a:hover 之后
可靠的顺序是：l(link)ov(visited)e h(hover)a(active)te, 即用喜欢(love)和讨厌(hate)两个词来概括
li:first-child 表示选择父元素下的第一个子元素，并且该元素是li
li:last-child 表示选择父元素下的最后一个子元素，并且该元素是li
li:nth-child(n) 表示选择父元素下的第n个元素，并且该元素是li
li:first-of-type 表示选择父元素下出现的第一个li标签
li:last-of-type 表示选择父元素下出现的最后一个li标签
li:nth-of-type(n) 表示选择父元素下的第n个li标签
odd 代表奇数
even 代表偶数
2n 代表偶数
2n+1 代表奇数
3n+1 代表隔两行
标签：样式,标签,li,选择符,样式表,选择器,css,属性 来源： https://www.cnblogs.com/solart/p/11720809.html
本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享； 2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关； 3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关； 4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除； 5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。