网站策划师有前途吗,网页设计师职责,安徽优化网站,cf刷枪网站怎么做的目录
前言#xff1a;
2.高级选择器 #xff08;1#xff09;子代选择器
#xff08;2#xff09;伪类选择器
#xff08;3#xff09;后代选择器
#xff08;4#xff09;兄弟选择器
相邻兄弟选择器 通用兄弟选择器
#xff08;5#xff09;并集选择器 2.高级选择器 1子代选择器
2伪类选择器
3后代选择器
4兄弟选择器
相邻兄弟选择器 通用兄弟选择器
5并集选择器
6交集选择器 前言 上一期讲了CSS选择器中的初级选择器那么这一期我们就接着学习CSS中的高级选择器下面就一起来看看吧上一期链接htmlCSS-----CSS选择器上_灰勒塔德的博客-CSDN博客
2.高级选择器 1子代选择器 结构选择器1 选择器2 {css属性名:属性值;} 在选择器1所找到标签的子代子代只包括儿子中找到满足选择器2的标签设置样式 写法
div a {color: red;
}
示例
html代码
!DOCTYPE html
html langen
headmeta charsetUTF-8meta http-equivX-UA-Compatible contentIEedgemeta nameviewport contentwidthdevice-width, initial-scale1.0titleDocument/titlelink relstylesheet href./index.css
/head
bodya hrefhttps://www.yhdmz2.com/ target_blank idcartoon点开我开始看动漫divpこんにちは/p/divp你好/p/a
/body
/html
CSS代码
#cartoon{text-decoration: none;font-size: 30px;
}
#cartoondivp{color: red;pointer-events:none}
效果 这里可以看出子类选择器是作用到div里面的p标签所以字体会显示红色而外面的p标签还是保持原来的样子。
2伪类选择器 样式:nth-of-type(表达式) 这一类选择器可以用于筛选的作用下面看个示例 html代码
!DOCTYPE html
html langen
headmeta charsetUTF-8meta http-equivX-UA-Compatible contentIEedgemeta nameviewport contentwidthdevice-width, initial-scale1.0titleDocument/titlelink relstylesheet href./index.css
/head
bodya hrefhttps://www.yhdmz2.com/ target_blank idcartoon点开我开始看动漫ullifirst/lilisecond/lilithird/liliforth/lilififth/li/ul
/body
/html
CSS代码
#cartoon{text-decoration: none;font-size: 30px;color: blueviolet;
}
#cartoonulli:nth-of-type(2n1){color: chocolate;
}
效果 这里可以看出如果我的表达式填入的是2n1是表示奇数的意思也就意味着1,3,5是变为巧克力色的而2和4是保持原理的颜色如果我填入的是2n的话那就是偶数的被作用。
3后代选择器 结构选择器1 选择器2 {css属性名:属性值;} 在选择器1所找到标签的后代后代包括儿子、孙子、重孙子……中找到满足选择器2的标签设置样式 div a {color: red;
}
写法上跟子代选择器相比少了符号其实效果是差不多的基本上没什么大区别。
4兄弟选择器
相邻兄弟选择器亲兄弟相邻的 相邻兄弟选择器用于匹配某个元素之后紧邻的另一个元素这两个元素拥有同一个父级元素并且不存在嵌套关系。相邻兄弟选择器的定义需要用到加号加号两边为相邻的两个元素选择器会匹配加号后面的元素 写法
div p {color: red;
} 示例
html代码
!DOCTYPE html
html langen
headmeta charsetUTF-8meta http-equivX-UA-Compatible contentIEedgemeta nameviewport contentwidthdevice-width, initial-scale1.0titleDocument/titlelink relstylesheet href./index.css
/head
bodydiv classfirst我是第一个/divdiv classsecond我是第二个/divdiv我是第三个/div
/body
/html
CSS代码
*{color: red;font-size: 40px;
}.firstdiv
{color: aquamarine;
}
效果 说明这里只有第二个变颜色是因为这个是通过亲兄弟关系也就是相邻的满足条件才可以被选中同时被选中的前一个必须有一个哥哥才可以否则就不会被选中 通用兄弟选择器表兄弟 通用兄弟选择器同样会匹配同一父级元素下的兄弟元素但兄弟元素之间无需紧邻。定义通用兄弟选择器需要用到波浪号~波浪号两边为同一父级元素下的两个元素选择器会匹配波浪号后面的元素 写法
p ~ p {color: pink;
} 示例html代码
!DOCTYPE html
html langen
headmeta charsetUTF-8meta http-equivX-UA-Compatible contentIEedgemeta nameviewport contentwidthdevice-width, initial-scale1.0titleDocument/titlelink relstylesheet href./index.css
/head
bodydiv classfirst我是第一个/divdiv classsecond我是第二个/divdiv我是第三个/div
/body
/html
CSS代码
*{color: red;font-size: 40px;
}
/*.first~div和div~div 效果是一样的*/
div~div
{color: aquamarine;
} 效果 说明这里是通过表兄弟关系就可以实现选择器第一个没有变颜色的原因是因为第一个前面没有哥哥这里要满足条件的是前面必须有一个哥哥否则就不会被选中 5并集选择器 实现多个无关系或者有关系的标签统一化处理一般用于两个标签之间的统一处理格式如下 选择符1,选择符2{ ……………… } 示例
html代码
!DOCTYPE html
html langen
headmeta charsetUTF-8meta http-equivX-UA-Compatible contentIEedgemeta nameviewport contentwidthdevice-width, initial-scale1.0titleDocument/titlelink relstylesheet href./index.css
/head
bodya hrefhttps://www.yhdmz2.com/ target_blank idcartoon点开我开始看动漫ullifirst/lilisecond/lilithird/li/ul
/body
/html CSS代码
#cartoon{text-decoration: none;font-size: 30px;color: blueviolet;
}
body,ul{margin: 0;
}
aulli:nth-of-type(2),aulli:nth-of-type(3){color: brown;
} 效果 这里可以看出second和third变成了棕色这里就是通过并集选择器去实现的。
6交集选择器 结构选择器1选择器2{css属性名:属性值;} 找到页面中既能被选择器1选中又能被选择器2选中的标签设置样式 交集选择器中的选择器之间是紧挨着的没有东西分隔 这一类选择器用得很少一般用于大量代码中精准选择指定的元素标签 示例
html代码
!DOCTYPE html
html langen
headmeta charsetUTF-8meta http-equivX-UA-Compatible contentIEedgemeta nameviewport contentwidthdevice-width, initial-scale1.0titleDocument/titlelink relstylesheet href./index.css
/head
bodydiv classnice喜欢看巨人吗/divp classgood艾伦.耶格尔/pp classbetter nice三笠/p
/body
/html
这里我想通过类选择选中下面含有nice类的p标签进行去处理那同时还不能影响到上面含有nice的div标签CSS代码写法
*{color: red;
}
p.nice{font-size: 30px;color: aquamarine;
}
效果 这里可以看出最后一个的字体大小和颜色都不一样说明选中成功。
好了以上就是本期的全部内容了你们对CSS选择器是不是有了新的了解呢去试试做一个简单的网页界面吧
分享一张壁纸
