css系列教程1-选择器全解

全栈工程师开发手册 (作者:栾鹏)

一个demo学会css
css系列教程1—选择器全解
css系列教程2—样式操作全解

css选择器全解:

css选择器包括:基本选择器、属性选择器、伪类选择器、伪元素选择器

选择器总是从左至右解析,不要私自添加()优先运算

基本选择器

h2{                                 /*  标签选择 */
}
p,h1{                               /* 使用逗号实现元素合集  */
}
div h1,div h2{                      /* 使用空格实现后代元素(子元素和子孙元素)查询,表示div的后代元素h1,h1和div的合集,在从合集中查找后代元素h2,最后查询到的为h2列表 */
    background-color: #2b542c;
}
p>h1{                                /*  >表示直接子元素  */
}
p+h1{                                /*  +表示紧接在后面的同胞元素,选择h1元素  */
}
html>body table+ul{                 /*  在html元素中查询直接子元素body,在body中查询后代元素table,在table元素后面查询同胞元素ul,即在最后选择的为ul列表  */
}
body *{                              /*  *通配符选择器,匹配所有元素,表示匹配body的所有后代元素  */
}
p.class1.class2{                    /*  .表示class类选择器,p为标签,连在一块写,表示多重筛选,一个元素可以有多个样式  */
}
#id1{                                /*  #id选择器,一个元素只能有一个id,所有元素的id不能相同   */
}

属性选择器

p[attribute1][attribute2]{         /*  [] 属性选择器,表示具有某种属性的所有元素,多个参数表示同时具有多个属性,class也可以作为一个属性筛选 */
}
a[href="http://www.123.com"]{      /*  =具有某个属性,且属性值等于指定值的所有元素 */
}
div[class~="class1"]{               /*  ~=具有某个属性,且属性值包含指定值的所有元素  */
}
input[title^="title1"]{             /*  ^=指定属性的值以指定字符串开头   */
}
input[title$="title1"]{             /*  $=指定属性的值以指定字符串结尾   */
}
input[title*="title1"]{             /*  *=指定属性的值包含指定字符串   */
}
input[title|="title1"]{             /*  |=指定属性的值等于title1或者以title1-开头   */
}

伪类选择器

a:link{                             /*  link表示未访问过的超链接  */
}
a:visited{                          /*  visited表示已访问过的超链接 */
}
input:focus{                        /*  focus表示当前拥有焦点的元素 */
}
div:hover{                          /*  hover表示鼠标指针停留的元素  */
}
a:active{                           /*  active表示被用户输入激活的元素  */
}
div:first-child{                    /*  first-child表示第一个元素,此句表示第一个div元素  */
}
div :first-child{                   /*   空格表示后代元素,此句表示div元素的第一个后代元素  */
}

伪元素选择器

p:first-letter{                     /* first-letter行内元素首字母  */
}
p:first-line{                       /*  first-line行内元素首行  */
}
p:before{                           /*  before元素前插入内容  */
    content:"AAAAAAAAAAA";
    color: #2b542c;
}
p:after{                            /*   after在元素后插入内容  */
    content: "AAAAAAAAAAAA";
    color: #2b542c;
}



已标记关键词 清除标记
相关推荐
©️2020 CSDN 皮肤主题: 编程工作室 设计师:CSDN官方博客 返回首页
实付 29.90元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、C币套餐、付费专栏及课程。

余额充值