CSS基础语法(二) CSS的9种选择器

样式表的选择器

1.类选择器

根据HTML标签的class属性选择样式应用的属性

 .类值{ … }

2.ID选择器

根据HTML标签的ID属性选择样式应用的元素

 #id值{ … }

 3.标签选择器

根据HTML标签选择样式应用的属性

标签名{ … }

4.子选择器

.food>li{

    border:1px solid red;

}

5.包含选择器

.first span{color:red;}

6.通用选择器

* {color:red;}

7.伪类选择器

1、静态伪类(只应用于超链接)

[注意]visited伪类只能设置字体颜色、边框颜色、outline颜色的样式

a:link{color: red;}  设置超链接在未被访问前的样式。
a:visited{color: green;}  设置超链接在其链接地址已被访问过时的样式

2、动态伪类(可应用于任何元素)

设置超链接在其鼠标悬停时的样式。
a:hover{
  cursor:pointer;
  color:red;
}

3.UI元素伪类

[注意]input和:和enabled之间都不可以有空格

input:enabled{color: red}   可用状态

4.结构伪类

[注意]n可以是整数(从1开始),也可以是公式,也可以是关键字(even、odd)

.parent:first-child 父元素的第一个子元素,与nth-child(1)等同
.parent:last-child  父元素的最后一个子元素,与nth-last-child(1)等同
.parent:nth-child(n) 选择父元素的第n个子元素

5.伪类的结合

[注意]与顺序无关

a:hover:first-child{color: black;}

8.伪元素选择器

   1、:first-letter 设置首字母样式,只能与块级元素关联;

p:first-letter {color: red;}    

  2、:first-line 设置首行样式,只能与块级元素关联;

p:first-line{color: red;}    

  3、:before 在元素内容前面插入内容

  默认这个伪元素是行内元素,继承元素可继承的属性;所有元素都必须放在出现该伪元素的选择器的最后面。若写成 p:before em 就是不合法的

p:before{content:"text"}

  4、:after 在元素内容后面插入内容

  默认这个伪元素是行内元素,继承元素可继承的属性

p:after{content:"text"}

9.属性选择器

属性选择器根据元素的属性及属性值来选择元素

1、简单属性选择器

a[href][title]{color: red;}
#div[class]{color: red;}
.box[id]{color: red;}
img[alt]{color: red;}
[class]{color: red;}

2、具体属性选择器

a[href="http://www.baidu.com"][title="baidu"] {color: red;}  

 3、部分属性选择器

[class ^="b"] 选择class属性值以"b"开头的所有元素
[class $="b"] 选择class属性值以"b"结尾的所有元素
[class *="b"] 选择class属性值包含"b"的所有元素  
上面三个属于正则匹配,是CSS3新增的属性选择器

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

扫码关注云+社区

领取腾讯云代金券