坦克大战网站开发课程设计报告,苏州做网站哪家好,衡阳网络营销公司,提升学历的十大好处文章目录 1. 并集选择器2. 交集选择器3. 后代选择器4. 子代选择器5. 兄弟选择器5.1. 相邻兄弟选择器5.2. 通用兄弟选择器 6. 属性选择器7. 伪类选择器7.1. 动态伪类7.2. 结构伪类7.3. 否定伪类 8. 伪元素选择器9. Google 改进案例 1. 并集选择器
选中多个选择器对应的元素。一… 文章目录 1. 并集选择器2. 交集选择器3. 后代选择器4. 子代选择器5. 兄弟选择器5.1. 相邻兄弟选择器5.2. 通用兄弟选择器 6. 属性选择器7. 伪类选择器7.1. 动态伪类7.2. 结构伪类7.3. 否定伪类 8. 伪元素选择器9. Google 改进案例 1. 并集选择器
选中多个选择器对应的元素。一般用来设置表格的边框。 语法选择器 1, 选择器 2, 选择器 3, … 选择器 n {} 2. 交集选择器
同时选中符合条件的元素。 语法选择器 1 选择器 2 选择器 3…选择器 n {} 3. 后代选择器
用来选择元素或元素组的后代需要先写祖先再写后代。 语法选择器 1 选择器 2 选择器 3 … 选择器 n {} 4. 子代选择器
选中指定元素中符合要求的子元素父级标签写在前面子级标签写在后面中间有一个****。 语法选择器 1 选择器 2 选择器 3 … 选择器 n {} 5. 兄弟选择器
5.1. 相邻兄弟选择器
选中指定元素后符合条件的相邻兄弟元素二者是同一个父亲。 语法选择器 1选择器 2 {} 5.2. 通用兄弟选择器
选中指定元素后符合条件的所有兄弟元素只要是同一个父元素都会被选择。 语法选择器 1~选择器 2 {} 6. 属性选择器
选中具有某种属性的元素。
语法
[属性名] 选中具有某个属性的元素。[属性名“值”] 选中包含某个属性且属性值等于给定值的元素。[属性名^“值”] 选中包含某个属性且属性值以给定值开头的元素。[属性名$“值”] 选中包含某个属性且属性值以给定值结尾的元素。[属性名*“值”] 选择包含某个属性属性值包含给定值的元素
!DOCTYPE html
html langenheadmeta charsetUTF-8 /meta nameviewport contentwidthdevice-width, initial-scale1.0 /titleDocument/titlestyle/* 需求:选择跟div相邻的p元素 设置成红色 *//* 方式一:通过属性选择器(通过属性名) */[data] {color: red;}/* 方式二:通过属性选择器(通过属性名属性值) */[datad1] {color: green;}/style/headbodydivspan我是span标签/spanp datad1我是带有属性的p标签/p/divp我是p标签/pp datad1我是带有属性的p标签/p/body
/html7. 伪类选择器
选中特殊状态的元素 。
7.1. 动态伪类
伪类属性:link超链接未被访问的状态:visited超链接访问过的状态:hover鼠标悬停在元素上的状态:active元素激活的状态:focus获取焦点的元素
!DOCTYPE html
html langenheadmeta charsetUTF-8 /meta nameviewport contentwidthdevice-width, initial-scale1.0 /title07-CSS扩展选择器-伪类选择器/titlestylea,span {font-size: 50px;}a:link {color: red;}a:visited {color: green;}a:hover {color: blue;}a:active {color: yellow;}/style/headbodya hrefhttps://douglas.blog.csdn.net/博客/aspan文字/span/body
/html7.2. 结构伪类
伪类属性:first-child所有兄弟元素中的第一个:last-child所有兄弟元素中的最后一个:nth-child(n)所有兄弟元素中的第 n 个元素类型没有限制:first-of-type所有同类型兄弟元素中的第一个:last-of-type所有同类型兄弟元素中的最后一个:nth-of-type(n)所有同类型兄弟元素中的 第 n 个元素类型有限制:root根元素 :nth-child(n) 选择第 n 个元素 选择多个 n 可以是一个数字 从 1 开始,代表第 n 个元素 n 还可以是关键字 odd 偶数 even 奇数 n 可以是一个公式 an b 描述a 代表一个循环的大小N 是一个计数器从 0 开始以及 b 是偏移量 2n1 奇数2n 偶数-n3 前三个n4 第 4 个以后 语法区别 :nth-child(n)选择器匹配父元素中的第 n 个子元素元素类型没有限制。 :nth-of-type(n)选择器匹配同类型中的第 n 个同级兄弟元素。 7.3. 否定伪类
:not(选择器) 排除满足括号中条件的元素。
8. 伪元素选择器
在 html 骨架中并没有通过 html 标签去创建元素而是通过 css 模拟出来的标签效果。
一般用在页面的非主体部分某些情况下可以简化代码。
区别
普通元素通过 html 标签生成的。伪元素通过 css 模拟出来的标签效果。本质区别是否在 html 中创建了新的标签。
常用的伪元素
伪元素属性::first-letter选中元素中的第一个文字::first-line选中元素中的第一行文字::placeholder选中输入框的提示文字::before在元素最开始的位置创建一个子元素必须用 content 属性指定内容::after在元素最后的位置创建一个子元素必须用 content 属性指定内容
9. Google 改进案例
使用动态伪类实现鼠标放在单词上变色。 !DOCTYPE html
html langenheadmeta charsetUTF-8 /meta nameviewport contentwidthdevice-width, initial-scale1.0 /title05-CSS扩展选择器-Google案例-改进/titlestyle/* 设置颜色 */.c1 {color: blue;}.c2 {color: red;}.c3 {color: yellow;}.c4 {color: green;}/* 设置字体 */span {font-size: 100px;}span:hover {color: orange;cursor: pointer;}/style/headbodyspan classc1G/spanspan classc2o/spanspan classc3o/spanspan classc1g/spanspan classc4l/spanspan classc2e/span/body
/html
