哈尔滨专业网站建设定制,网上商城的主要功能,网站开发公司北京,在线销售型的网站CSS 选择器
1.基础选择器
1.1 元素选择器
语法#xff1a;标签名{...}
元素选择器会选中对应标签名的HTML元素#xff0c;例如#xff1a;p{...}#xff0c;div{...}#xff0c;span{...}等
1.2 类选择器
语法#xff1a;.类名{...}
类选择器会选中class属性为指定…CSS 选择器
1.基础选择器
1.1 元素选择器
语法标签名{...}
元素选择器会选中对应标签名的HTML元素例如p{...}div{...}span{...}等
1.2 类选择器
语法.类名{...}
类选择器会选中class属性为指定类名的HTML元素例如
div classdiv1test/div.div1 {...;
}需要注意的是HTML元素的class属性值不能以数字开头如果要以符号开头只能为_或-。同时一个元素的class属性中可以有多个属性值意味着其可以被多个类选择器选中
1.3 id选择器
语法#id属性值{...}
id选择器会选中id属性为指定值的HTML元素例如
div iddiv1test/div#div1 {...;
}与类不同HTML元素的id属性只能有一个
1.4 通配符选择器
语法*{...}
通配符选择器会选中页面中的所有HTML元素并对所有元素都执行其中的样式一般可以用来清除间距。
2.群组选择器
语法
选择器1,选择器2,选择器3,...{...;
}群组选择器会同时选中多个选择器对应的元素例如
div盒子1/div
p段落1/p
p段落2/p
h3文本标题3/h3
h3 classtext3文本标题3/h3
olli有序列表/lili classli2有序列表/lili有序列表/li
/olstylediv,p,h3,.li2{font-size: 30px;}div,.li2,.text3{color: red;}p{color: blue;}h3{color: pink;}
/style最终的效果为
群组选择器一般用于简化代码可以将对多个元素的统一操作放在一个群组选择器中
3.关系选择器
3.1 后代选择器
后代选择器也叫包含选择器即祖先元素直接或间接地包含后代元素。
语法
选择器1 选择器2 选择器3 ...{...;
}下面看两个例子
div classboxp0000/pdivp11111/pp22222/p/divdiv classbox2p333/p/divp444/p
/divstyle.box p{width: 200px;height: 200px;background-color: yellow;}
/style效果如下
可以看到此时选中的是 box 类下的所有 p 元素即使是 box 类的子类 box1 中的 p 元素也被选中了。
再来看第二个例子
div classboxp0000/pdivp11111/pp22222/p/divdiv classbox2p333/p/divp444/p
/divstyle.box div p {width: 200px;height: 200px;background-color: yellow;}
/style效果如下 可以看到此时选中的是 box 类下的所有 div 元素中的 所有 p 元素
3.2 子代选择器
语法
选择器1选择器2{...;
}子代选择器与后代选择器的区别在于子代选择器要求父元素直接而非间接地包含子元素
看下面这个例子
div classboxp0000/pdivp11111/pp22222/p/divdiv classbox2p333/p/divp444/p
/divstyle.boxp{width: 200px;height: 200px;background-color: yellow;}
/style效果如下 可以看到此时只选中了 box 类下直接包含的所有 p 元素而对于间接包含的例如box 类下的 div 中包含的所有 p 元素box 类下的 box2 类中包含的所有 p 元素则均未选中
再来看下面这个例子
div classboxp0000/pdivp11111/pp22222/p/divdiv classbox2p333/p/divp444/p
/divstyle.boxdivp{width: 200px;height: 200px;background-color: yellow;}
/style效果如下 可以看到此时选中的是 box 类下的所有 div 元素中包含的所有 p 元素。
3.3 相邻兄弟选择器
语法
选择器1选择器2{...;
}其效果不方便用文字描述看下面这个例子
p000/p
div classbox盒子1/div
p111/p
p222/p
p333/p
divp44444/p
/div
p5555/p在以上的HTML代码中除了内容为 “4444” 的 p 标签其他所有元素均为兄弟元素。那么什么叫做相邻兄弟元素呢实际上就是两个紧挨着的兄弟元素
下面给以上HTML代码添加样式
style.boxp{width: 200px;height: 200px;background-color: yellow;}
/style效果如下 可以看到此时选中的是 box 类的相邻兄弟元素即内容为 “111” 的 p 元素。
那么如果我们再加上一个呢
style.boxpp{width: 200px;height: 200px;background-color: yellow;}
/style会变成下面的样子
即选中了 box 类的相邻兄弟元素的相邻兄弟元素也就是内容为 “222” 的 p 元素
如果进一步嵌套则会继续向后选中。
实际上此时的 CSS 选择器可以理解为(.boxp)p即其实际上仍是两个选择器只不过第一个选择器是一个嵌套罢了。这样的嵌套在实际使用中是十分常见的。
3.4 通用兄弟选择器
语法
选择器1~选择器2{...;
}同样是上面那个例子
p000/p
div classbox盒子1/div
p111/p
p222/p
p333/p
divp44444/p
/div
p5555/p为其添加以下样式
style.box~p{width: 200px;height: 200px;background-color: yellow;}
/style效果如下
可以看到此时选中的是所有 box 类后面所有的兄弟 p 元素所以通用兄弟选择器的效果是选中选择器1对应元素后面的所有对应选择器2的兄弟元素。
另外需要注意的是相邻兄弟选择器和通用兄弟选择器是可以结合在一起使用的比如对于上面的例子我们想要单独修改内容为 “5555” 的 p 元素的样式那么我们可以使用下面的 CSS 代码实现
style.box~divp{width: 200px;height: 200px;background-color: yellow;}
/style效果如下
4.属性选择器
属性选择器一共有以下7种写法
选择器[属性名]选择器[属性名 属性值]选择器[属性名 ^ 属性值]选择器[属性名 $ 属性值]选择器[属性名 * 属性值]选择器[属性名 ~ 属性值]选择器[属性名 | 属性值]
下面用一个例子来说明这7种写法各自的效果
div classdemoa hrefhttp://www.baidu.com target_blank classli nks item first idfirst titlelink1/aa href classlinks active item titletest website target_blank langzh2/aa hrefsites/file/test.html classlinks item titlelink-1 aa langzh-cn3/aa hrefsites/file/test.png classlinks item target_balnk langzh-tw4/aa hrefsites/file/image.jpg classlinks item titlelink-23 aa5/aa hrefmailto:baiduhotmail classlinks item titlewebsite link langzh6/aa href/a.pdf classlinks item titleopen the website langcn7/aa href/abc.pdf classlinksitem titleclose the website langen-zh8/aa hrefabcdef.doc classlinks item titlehttp://www.sina.com9/aa hrefabd.doc classlinksitem last idlast10/a
/divstyle.demo {width: 300px;border: 1px solid #ccc;padding: 10px;overflow: hidden;margin: 20px auto;}.demo a {float: left;display: block;height: 50px;width: 50px;border-radius: 10px;text-align: center;background: #aac;color: blue;font: bold 20px/50px Arial;margin-right: 5px;text-decoration: none;margin: 5px;}
/style以上是基本样式效果如下 下面按照每一种写法向其中添加样式。
4.1 写法1选择器[属性名]
添加如下样式
a[title]{background: yellow;
}效果如下 即此时选中的是所有身上有title属性的 a 标签
如果添加以下样式
a[lang][target]{background: yellow;
}效果如下 此时选中的是所有身上同时拥有lang属性和target属性的 a 标签
4.2 写法2选择器[属性名 属性值] — 重点
向其中添加以下样式
a[langzh]{background: yellow;
}效果如下 此时选中的是身上lang属性值为 “zh” 的所有 a 标签注意这里属性值必须为一模一样多一个字符、一个空格都不会被选中。
当然前面的选择器也不是只能指定标签同样也可以指定类、id甚至可以使用上面的群组选择器、关系选择器等。
例如向其中添加以下样式
/* 选中类为item身上的lang属性值为 zh-cn 的元素 */
.item[langzh-cn]{background: yellow;
}
/* 选中id为last身上配置了title属性且身上的lang属性值为 zh-cn 的元素 */
#last[title][classlinks]{background: yellow;
}效果如下 此时选择器.item[langzh-cn]选中了3而选择器#last[title][classlinks]未能选中因为此时不存在class属性仅为 “links” 的元素
4.3 写法3选择器[属性名 ^ 属性值]
添加以下样式
a[class^li ]{ /* 注意这里有一个空格 */background-color: yellow;
}效果如下 此时选中的是身上class属性的值以 li 开头的所有 a 标签而其他class属性以 “li” 开头的 a 标签则未被选中即这里^运算符匹配时也会匹配空格
但需要注意的是在实际开发中若元素的class属性值前面有空格此时这个空格是可能会被自动去掉的所以使用^运算符匹配时尽量不要去匹配前面带空格的值可能会导致无法选中。
例如
a class links item first1/astylea[class^ li]{background-color: yellow;}
/style此时是无法选中 a 标签的
4.4 写法4选择器[属性名 $ 属性值]
添加以下样式
a[href$.pdf]{background-color: yellow;
}
a[href$.doc]{background-color: red;
}
a[href$.png]{background-color: green;
}效果如下 此时首先选中了身上href属性以 “.pdf” 结尾的 a 标签即7、8将其背景色置为黄色然后选中了身上href属性以 “.doc” 结尾的 a 标签即9、10将其背景色置为红色最后选中了身上href属性以 “.png” 结尾的 a 标签即4将其背景色置为绿色。
即$运算符的作用是匹配结尾的字符。
4.5 写法5选择器[属性名 * 属性值]
添加以下样式
a[href*b]{background-color: green;
}效果如下 此时选中的是身上href属性值中包含 “b” 的 a 标签即*运算符的作用是与整个字符串进行匹配只要包含目标字符则为true。
4.6 写法6选择器[属性名 ~ 属性值]
添加以下样式
a[class~item]{background-color: green;
}效果如下 此时选中的是身上class属性值中包含单独且完整的 “item” 的所有 a 标签。
什么叫单独且完整当一个元素属于多个类时其身上的class属性是这样的
a classclass1 class2 class32/a此时其身上单独且完整的类就有class1、class2、class3。此时 CSS 选择器a[class~class1]就可以选中该元素而当一个元素身上的class属性为下面这样时
a classclas s1class2 class32/a此时其身上单独且完整的类为clas、s1class2、class3。此时 CSS 选择器a[class~class1]就无法选中该元素
对应上面的例子元素8、10身上的class属性值均为 “linksitem”这是一个单独的类所以无法选中这两个元素。
真正来说出现这种情况是因为此时的~运算符不再是像前面几种写法中的运算符一样是字符串匹配了而是与元素身上的某个属性的多个值进行匹配
4.7 写法7选择器[属性名 | 属性值]
添加以下样式
a[title|link]{background-color: green;
}效果如下 此时选中的是身上title属性值中只有1个是 “link” 的或者属性值有多个但是得是 “link-” 开头的所有 a 标签。
具体来说|运算符的匹配
当元素该属性值只有一个时其值必须是指定的值当元素该属性的值有多个时该属性值开头必须为 “指定值-” 的形式。(注意此时为字符串匹配)
5.伪类选择器
5.1 常用的伪类选择器1
:first-child第一个子元素:last-child最后一个子元素:nth-child()选中括号中指定的元素这里的括号内可以填入以下内容 n — 第n个元素n的范围是从0到正无穷正无穷代表全选。even或2n — 选中偶数位的元素odd或2n1 — 选中奇数位的元素
注意以 child 结尾的是在所有元素中选择
用一个例子来理解
ul classboxp1111/pp222/pli无序列表的li1/lip33333/pli无序列表的li2/lili无序列表的li3/lip44444/pli无序列表的li4/lip555/pli无序列表的li5/lip666/p
/ul先来试试:first-child下面为其添加样式
.box :first-child{border: 2px solid blue;
}效果如下 此时选中的为 box 类下的第一个子元素即内容为 “1111” 的 p 元素。
如果添加下面的样式
.box li:first-child{border: 2px solid blue;
}此时不会选中任何元素因为此时效果是 box 类下的第一个子元素为 li 标签时其中的样式才会生效。
如果将 li 换成 p
.box p:first-child{border: 2px solid blue;
}效果如下 此时则可以选中元素。
接下来是:last-child其使用方法与:first-child是完全相同的只不过其判断的是最后一个子元素。
/* 根据上面的结果可以知道此时的效果是当最后一个子元素为p元素时将样式作用到其身上 */
.box p:last-child{border: 2px solid blue;
}效果如下 然后是:nth-child()。其同样有和上面一样的使用方法
/* 选中box类下的第三个子元素 */
.box :nth-child(3){border: 2px solid blue;
}/* 当box类下的第七个子元素为p元素时将样式应用到其身上 */
.box p:nth-child(7){border: 2px solid red;
}效果如下
但:nth-child()的括号中不仅仅能填入数字还有一些特殊用法在使用之前首先要知道下面的所有 n 指代的是一个从0开始的数列
/*n 为从0开始的数列所以 n3 指代的是第3、4、5、6、7...个子元素
*/
.box :nth-child(n3){border: 2px solid blue;
}效果如下
可以看到从第三个子元素开始往后的所有元素均被选中
同样其也可以判断元素的标签类型
/* 即box下的第3、4、5、6...个子元素为li时将样式应用到它们身上 */
.box li:nth-child(n3){border: 2px solid blue;
}效果如下
甚至n 的前面还可以加上负号
/* n0 -n0 -n33n1 -n-1 -n32n2 -n-2 -n31n3 -n-3 -n30...所以此时选中的是box下的第3、2、1个子元素
*/
.box :nth-child(-n3){border: 2px solid blue;
}效果如下
还可以指定偶数和奇数
/* 此时选中的是box里面的第2,4,6,8,10,12....个为li标签的元素将样式应用到它们身上 */
.box li:nth-child(2n){border: 2px solid blue;
}/* 当然选中第偶数个元素也可以直接用 even其和2n是一样的 */
.box li:nth-child(even){border: 2px solid blue;
}效果如下 指定奇数
/* 此时选中的是box下的所有奇数子元素 */
.box :nth-child(2n1){border: 2px solid blue;
}
/* 奇数也可以用 odd 来指定 */
.box :nth-child(odd){border: 2px solid blue;
}效果如下
当然并不是只能按上述几种固定的方式使用我们可以自己定义同时还可以搭配前面的:first-child、:last-child一起使用
/* 此时选中的是第5、7、9...个子元素 */
.box :nth-child(2n5){border: 2px solid blue;
}
/* 此时选中的是从后数第2、4、6、8...个子元素 */
.box :nth-last-child(2n){border: 2px solid blue;
}5.2 常用的伪类选择器2
:first-of-type第一个子元素:last-of-type最后一个子元素:nth-of-type()选中括号中指定的元素这里的括号内可以填入以下内容 n — 第n个元素n的范围是从0到正无穷正无穷代表全选。even或2n — 选中偶数位的元素odd或2n1 — 选中奇数位的元素
注意以 type 结尾的是在相同元素中选择
其具体的使用与前一节中一样这里仅给出几个例子用于理解其与 -child 结尾的伪类选择器的区别。
.box :first-of-type{border: 2px solid blue;
}效果如下
可以看到box 类下的第一个 p 元素和第一个 li 元素均被选中
为什么从结构上看box 类的下面有两个类型p 标签和 ul 标签所以是选中这两类中的第一个元素。
这里就体现了与 -child 的选择器的区别-child 选择器是看父元素下的所有子元素而 -type 选择器则是看父元素下的同类型的子元素。打个比方-child 选择器是从一个班级内的所有学生中进行筛选而 -type 选择器则是从班级内的所有女生、所有男生中进行筛选。
那么既然是同类型自然能够指定类型
/* box下的所有p元素中的最后一个 */
.box p:last-of-type{border: 2px solid blue;
}
/* box下的所有li元素中的第偶数个 */
.box li:nth-of-type(2n){border: 2px solid red;
}效果如下
5.3 否定伪类
:not() — 将符合条件的元素排除
例
div classtestp1111/pp2222/pp3333/pp4444/p
/div添加如下样式
.test {margin: 10px 10px 10px 10px;:not(:first-of-type):not(:last-child){color: red;}
}效果如下
所以这个选择器的效果就是排除相同类型中的第一个然后再排除 test 下的最后一个子元素
5.4 元素的伪类
:link — 表示未访问过的a标签:visited — 表示访问过的a标签
以上两个伪类是超链接所独有的另外由于隐私的问题所以:visited这个伪类只能修改链接的颜色。
以下两个伪类是所有标签都可以使用
:hover — 鼠标移入后元素的状态:active — 鼠标点击后元素的状态
6.伪元素选择器
与伪类一样伪元素也是不存在的元素其代表了元素的特殊状态。
常见的几个伪元素
::first-letter — 表示第一个字母::first-line — 表示第一行::selection — 表示选中的元素::before — 元素开始的位置前::after — 元素结束的位置后
befor和after必须配合content一起使用(before,after所写的内容无法选中且永远在最前和最后)。
下面给出几个例子帮助理解。
对于下面的HTML结构
div classtestphello hello hello hello/ppworld我们要相信明天会更好。/p
/div添加如下样式
/* 让文字的首字母一直为字体为24px */
p::first-letter {font-size: 24px;
}
/* 让文字的第一行添加背景色灰色 */
p::first-line {background-color: #ccc;
}效果如下
添加如下样式 /* 让选中的内容字体为绿色(此时鼠标选中 我们)*/
::selection{color: red;
}
/* 在元素开始的位置前你好 */
p::before{content: 你好;color:red
}效果如下
