怎样建英文网站,上海专业网站制作公司,代做网页设计平台,seo 网站 结构相信大家对元素应该是不陌生的#xff0c;当我们页面中#xff0c;我们想要布局#xff0c;给元素添加样式的时候#xff0c;我们应该怎么获取到指定元素呢#xff1f; 优先级#xff1a;ID 选择器 类选择器 标签选择器 通配符
1.元素选择器
通过标签名…相信大家对元素应该是不陌生的当我们页面中我们想要布局给元素添加样式的时候我们应该怎么获取到指定元素呢 优先级ID 选择器 类选择器 标签选择器 通配符
1.元素选择器
通过标签名可直接选取到元素 例如div{}p{}ul{}等等
2.类选择器
通过class类选取到元素可以选取到多个元素只要给想要添加这种类名的元素添加上class类就可以不用反复写相关的样式 例如.className 记住要添加点号(.)
3.id选择器
通过id选取到元素id是独特的就跟我们的身份证一样一人一个不能重复 例如#idName 记住以#开头
4.通配符选择器
直接以***基本选择器代码总结开头通常用于清除默认样式比如网页的内外边距 元素选择器~通配符选择器代码总结
!DOCTYPE html
html langen
headmeta charsetUTF-8title基本选择器总结/titlestyle/* 第一种,元素选择器 *//* div {color: red;} *//* ................. *//* 第二种,类选择器 *//* .box {color: red;} *//* ................ *//* 第三种,id选择器 *//* #box {color: red;} *//* ............ *//* 第四种,通配符选择器 *//* * {margin: 0;padding: 0;} *//style
/head
body!-- 第一种元素选择器 --!-- div元素选择器/div --!-- .................. --!-- 第二种类选择器 --!-- div classbox类选择器/divdiv classbox类选择器/div --!-- 第三种id选择器 --!-- div idboxid选择器/div --
/body
/html5.并集选择器
并集选择器顾名思义就是并在一起 例如.box.box1 使用逗号隔开通常用于有相同样式的情况
!DOCTYPE html
html langen
headmeta charsetUTF-8title/titlestyle.box,.box1 {color: red;}/style
/head
bodydiv classbox我是需要并集选择器/divdiv classbox1我也需要并集选择器/div
/body
/html6.交集选择器
交集相交的元素
!DOCTYPE html
html langen
headmeta charsetUTF-8title/titlestylediv.box {color: red;}/style
/head
bodydiv classbox交集选择器/div
/body
/html7.后代选择器
后代选择器我们需要用空格隔开选取到全部的后代 例如div span{ }
!DOCTYPE html
html langen
headmeta charsetUTF-8title/titlestyle.box span {color: red;}/style
/head
bodydiv classboxspan我是儿子/spandivspan我是孙子/spandivspan我是重孙/span/div/div/div
/body
/html8.子代选择器
选取到父级元素的子元素是亲儿子不包括后代 例如divspan{ }
!DOCTYPE html
html langen
headmeta charsetUTF-8title/titlestyle.box span {color: red;}/style
/head
bodydiv classboxspan子代选择器/spanspan子代选择器/spanspan子代选择器/span/div
/body
/html9.相邻兄弟选择器
使用号 例如divdiv{ } 选取到的是下一个兄弟
!DOCTYPE html
html langen
headmeta charsetUTF-8title/titlestyle.boxdiv{color: red;}/style
/head
bodydiv我是你上一级兄弟/divdiv classbox我是你哥/divdiv我是你亲兄弟/div
/body
/html10.全部兄弟选择器
使用~可以选取到全部兄弟 例如div~div{ } 不过也是从下一级开始
!DOCTYPE html
html langen
headmeta charsetUTF-8title/titlestyle.box~div{color: red;}/style
/head
bodydiv我是你上一级兄弟/divdiv classbox我是你哥/divdiv我是你亲兄弟/divdiv我也是你亲兄弟/div
/body
/html11.伪类选择器(常用的3种)
1.:first-child选取到第一个元素
!DOCTYPE html
html langen
headmeta charsetUTF-8title/titlestyle.box:first-child {color: red;}/style
/head
bodydiv classbox1/divdiv classbox2/divdiv classbox3/div
/body
/html2.:last-child选取到最后一个元素
!DOCTYPE html
html langen
headmeta charsetUTF-8title/titlestyle.box span:last-child {color: red;}/style
/head
bodydiv classboxspan1/spanspan2/spanspan3/span/div
/body
/html3.:nth-child(n) 选择第n个元素从1开始 even或2n 选中偶数位的元素 odd或2n1 选中奇数位得到元素
!DOCTYPE html
html langen
headmeta charsetUTF-8title/titlestyle.box span:nth-child(1) {color: red;}.box span:nth-child(2n2) {color: pink;}/style
/head
bodydiv classboxspan1/spanspan2/spanspan3/spanspan4/span/div
/body
/html十二、属性选择器(介绍4种)
可以通过元素属性选取到属性
!DOCTYPE html
html langen
headmeta charsetUTF-8title/titlestyleinput[nameinp]{border: 10px solid #000;}/* 选取到以i开头的元素 */input[name^i]{border: 10px solid red;}/* 选取以p结尾的元素 */input[name$p]{border: 10px solid pink;}/* 选取含有n的元素 */input[name*n]{border: 10px solid hotpink;}/style
/head
bodyinput typetext nameinpinput typetext nameinpinput typetext nameinp
/body
/html感谢大家的阅读如有不对的地方可以向我提出感谢大家
