css选择器

css中的选择器

css中的选择器

伪类和伪元素的区别

伪元素会创建新的元素,伪类不会
伪元素一般用::,伪类用:
伪类原则的是独立的个体,伪元素选择的是部分内容

伪类的分类

状态伪类

鼠标悬停的状态放生改变后进行什么样的样式设置

结构伪类

目的:选择子元素使用

first-child和last-child的时,确保body里是以该元素开头和结尾的,如果不是,不生效

<body>
    <p>http://www.imooc.com</p>
    <p>慕课网</p>
    <p>慕课网</p>
    <h2>慕课网欢迎您</h2>
    <p name="longtext">　万柳地块，地处北京西北三四环之间，东至北京华联万柳购物中心，南至万柳小区4号街，西至圣华寺路，北至巴沟村北路，用地性质为二类居住用地。低容积率，近中关村（000931），紧邻地铁，交通非常方便，又在北大、清华、中关村三小等名校云集之地，配套相当成熟。且万柳区域作为成熟的高档社区集中区域，已多年匮乏新增住宅供应，2008年以后区域内基本无期房住宅供应。该区二手房万泉新新家园等小区售价达到每平米近6万，万城华府售价已超8万。有业内人士早就指出，这是近年来罕见的优质地块。该地块自6月19日开始在网上竞价，总用地面积约3.9万平方米，规划建筑面积约7.8万平方米。北京市土地资源局公告显示，这块地的挂牌起价达18.66亿元，楼面地价2.4万元/平方米。不难看出，万柳地块以其独特的体量适中、地段绝佳优势，自然成为各大房企追逐的肥肉。
    </p>
    <table border="2px" width="500px">
    </table> 
</body>

p:first-child{ /*能生效*/
	background-color:red;
}
p:last-child{ /*不能生效*/
	font-size=100px;
}

first-of-type:是选择父元素下第一个这样的子元素,无论它是否第一个出现
nth[-child(选中第几个):选择某一个元素,如果该元素是相对应的就选中
- 如果应用到是列表中,如th:nth-child(2):就是选中表中每一行的第二个(选中第二列)

伪元素选择器

 body::before{/*在body第一行插入内容*/
    content:"我从人山人海走来"
}
body::after{/*在body最后一行插入元素*/
    content:"我向着大海走去"
}

p::first-line{ /*设置p的第一行...*/
    background-color: blueviolet;
}
p::first-letter{/*设置p的最后一行*/
    font-size: 30px;
}

*::selection{/*某个元素被鼠标选中后.....*/
    background-color: aquamarine;
}

css的其他选择器

div1,p,#one,.t{}/*同时对多个选中的元素进行操作,只要是个选择器就能和其他选择器一起联合选择*/
/*空格选择器*/
body p{
    background-color: aquamarine;
}
body tr{/*选中body下所有的tr元素*/
    color: brown;
}
/*子选择器:只能选择下一等级的子元素*/
body p{/*生效*/
    background-color: aquamarine;
}
body tr{/*不生效,因为tr是他的孙元素*/
    color: brown;
}
/*相邻兄弟选择器*/
p+h2{/*选中和p同一级的h2*/
  font-size: 100px;  
}
/*属性选择器*/
p[name="longtext"]{
    font-style: oblique;
    color: red;
}

posted @ 2021-03-29 23:02 平流层阅读(64) 评论(0) 收藏举报

刷新页面返回顶部