CSS选择器

来源：互联网发布：淘宝店怎么注销重开编辑：程序博客网时间：2024/05/29 02:07

CSS选择器

html代码

<!DOCTYPE html><html><head><meta charset="UTF-8"><link rel="stylesheet" href="../css/stu3-2.css" /><title>3-2学习</title></head><body><div class="main"><div class="p-div"><p id="gsp" class="gsp">古诗文汇总</p><p>问君能有几多愁，恰是一江春水向东流。</p><p>剪不断，理还乱，是离愁。别是一般滋味在心头。</p><p>独自莫凭栏，无限江山，别时容易见时难。流水落花春去也，天上人间。</p></div><div class="a-div"><p>唐诗背诵</p><h1 id="a-p">悯农一首</h1><p>春种一粒粟，秋收万颗子;</p><p>四海无闲田，农夫犹饿死。</p></div><div class="b-div"><p>唐诗背诵</p><h1 id="b-p">悯农二首</h1><p>锄禾日当午，汗滴禾下土；</p><p>谁知盘中餐，粒粒皆辛苦。</p></div><div class="c-div"><p>唐诗背诵</p><h1 id="c-p">登鹳雀楼</h1><p>白日依山尽，黄河入海流。</p><p>欲穷千里目，更上一层楼。</p></div></div></body></html>

css选择器设置的样式

/*便签选择器*/p {    font-size: 24px;    color: red;    width: 100%}/*类选择器*/.p-div {    background-color: antiquewhite;}/*id选择器*/#gsp {    /*font-size: 36px;    color: #A52A2A;*/}/*通配选择器*/* {}/*包含选择器*/.a-div p {    font-size: 18px;    color: cadetblue;}/*子选择器*/.b-div > p {    font-size: 20px;    color: goldenrod;}/*相邻选择器*/p + h1 {    font-size: 36px;    color: orange;}/*兄弟选择器*/div.p-div ~ div {    background-color: burlywood;}/*分组选择器*/ p, a {}/*属性选择器* ：css3新增加的选择器*//*属性选择器：只使用了属性名，不确定任何的属性值*/ h1[id] {     font-size: 30px;    color: royalblue;    font-style: oblique;}/*属性选择器：使用了属性名，并指定了属性的属性值*/p[class="gsp"] {    font-size: 30px;    color: black;    font-style: initial;}/*属性选择器：使用了属性名，并指定了属性的属性值中包含有该属性值，属性值是一个列表，用空格隔开*/p[class~="gsp"] {    font-size: 30px;    color: black;    font-style: initial;}/*属性选择器：使用了属性名，并指定了属性的属性值以gsp开头*/p[class^="gsp"] {    font-size: 30px;    color: black;    font-style: initial;}p[class$="gsp"] {/*属性选择器：使用了属性名，并指定了属性的属性值以gsp结束*/    font-size: 30px;    color: black;    font-style: initial;}/*属性选择器：使用了属性名，并指定了属性的属性值中包含gsp*/p[class*="gsp"] {    font-size: 30px;    color: black;    font-style: initial;}/*属性选择器：使用了属性名，并指定了属性的属性值中包含gsp-开头的值*/p[class|="gsp"] {    font-size: 30px;    color: black;    font-style: initial;}

阅读全文

0 0