聊聊CSS选择器,最后两种你可能都没见过

网站建设5年前发布
25 0 0

顾名思义,CSS选择器就是通过某些规则选中页面上的HTML元素,并且把样式应用到选中的元素上。,通用选择器就是选中所有元素,代码如下:意思就是选中页面上所有元素,并且把它们的文字都设置为红色。,20230306011956d47c9f0107bb1b89c56812b6d76c3427e20413256,ID选择器就是通过ID属性来选中元素,这个ID选择器最好不用在页面上重复。,比如说你已经设置了一个div元素的ID是“id='test1'”,你再设置一个元素的ID也是“id='test1'”,那如果你使用document.getElementById的时候只能获取到第一个设置Id的元素,所以建议在页面上使用ID选择器的时候一定要保证ID的唯一性。,202303060119567531d3010bf78b9dade75783d1fede4a82e049362,类选择器是根据元素的类属性来选中元素,平时在开发中经常使用到的就是类选择器,代码如下:,20230306095638e77814b29ffcd283abe8903813dfc98901bfa7383,元素选择器就是根据元素名称来选中元素,比如说要选中所有的p元素,那我们就是可以使用p {}来做,代码如下:,20230306012014130aac3614722700e94061682d15cd199d1e18386,后端选择器是用来选中某个元素的后代,注意这里的后代包含子元素、孙元素等等所有的后代元素,要和子元素选择器区分开来,代码如下:,202303060119584737104718524dc35d78743e89b5077aa5f45a924,子元素选择器用来选中某个元素的子元素,注意这里只是子元素,如果是孙元素,那就不能被选中,代码如下:,20230306012000a4e781f16bb2479be9a860bbc86484a69403ac757,通过元素的属性来匹配HTML元素,这里面既可以使用属性名也可以使用属性值,代码如下图:,20230306012000a522f818521500c2fdd304131526f81f87dccd366,这个选择器是用来选择某元素后面相邻的兄弟元素的,代码如下:,2023030601200024f133367bb68548c7e6721c1b4fb24def4851841,这个选择器是用来选中某元素后面所有的兄弟元素,要注意它和相邻后面兄弟选择器之间的区别,代码如下:,20230306012000b41cf5196fa07d1a83f0886377584411604f92694

© 版权声明

相关文章