本文详细介绍了CSS选择器的各类用法，包括标签选择器、ID选择器、类选择器、通用选择器、后代选择器、子元素选择器、兄弟选择器以及组合选择器的使用，展示了如何通过这些选择器精准定位并设置网页元素的样式。通过实例演示了如何利用选择器实现元素的样式定制，从而更好地理解和掌握CSS选择器在网页布局和设计中的作用。
cssx选择器选择想要设定的模式
1.标签选择器：又名元素选择器，即通过标签名称来选择一类元素
<style type="text/css">
div{
width:100px;
height:100px;
backgroung-color:red;
</style>
<body>
<div>hello</div>
</body>
即选定div 代码块，在style标签中设置样式
2.id选择器：通过id属性选择一类元素，因为在一个文档中。id值不能重复，所以在选择文档中唯一元素时比较有用。
表示方法：以“#”开头，后面紧跟id名
3.类选择器：通过class属性选择一类元素
表示方法：以“.”开头，后面紧跟类名，类名不允许有空格。一个元素有多个class值时，每个值用空格隔开。类名相同的元素属于一类元素
<style type="text/css">
#one{
width=100px;
height:100px;
border:1px soild red;
}
.one{
background-color:blue;
}
</style>
<body>
<div id="one" class="one">div1</div>
<div id="two" class="one">div2</div>
<div id="three" class="two">div3</div>
</body>
即选定id=one的类，设为边框宽度1px，实心红色。高度和宽度均为100px的代码块；选定class=one的类，设为背景颜色为蓝色的代码块
4.普遍选择器：普遍选择所有元素，用“*”表示，通常用在组合选择器中
5.后代选择器：
空格：选择所有后代元素，例如 “ul li”表示选择ul的后代元素li，li可以为ul的直接子元
素，也可以为ul的孙子元素。
>：选择直接子元素，例如 “ul>li”表示选择ul的直接子代元素li,ul的孙子元素li无法被选择到。
6.兄弟选择器：
+：选择当前元素之后的一个兄弟元素，例如 ".one+*"表示选择class为"one"元素的下一个兄弟元
素。
~：选择当前元素之后的所有兄弟元素，例如 ".one~*"表示选择class为"one"元素之后的所有兄弟元素。
7.多选择器：多个选择器嵌套使用，例如div#one,表示id为one的div元素
扫一扫
138
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
