/*id选择器:选择页面中唯一的元素,推荐同一个id标识符只允许用一次*/
#item1 {/*background-color: red;*/}
/*类选择器:选择页面中具有同一类样式的全部元素*/
.green {/*background-color: lightgreen;*/}
/*父子选择器:元素之间是层级的关系,所选元素有共同的父级*/
ul li { /*层级关系用空格表示*/color: white;}
/*通配选择器:选择指定父级下面的所有层级的元素*/
ul * {/*border: 1px solid black;*/}
/*子元素选择器 >: 选择父元素下所有的li元素,等价于标签选择器,所以它的优先级低于class,id*/
ul > li { /*等价于: ul > * {} *//*background-color: blue;*/}
/*相邻兄弟选择器 +:仅选择相对于它后面的第一个兄弟节点 */
#item2 + li {/*background-color: black; /*只有第7个小球变黑*/*/}
/*全部兄弟选择器 ~ :选择相对于它后面的全部兄弟节点 */
#item2 ~ li {/*background-color: coral; /*亮橙色*/*/}</style></head><body><ul><li id="item1">1</li><li>2</li><li>3</li><li class="">4</li><li>5</li><li id="item2">6</li><li>7</li><li>8</li><li>9</li><li>10</li></ul></body></html>
以上就是css基本选择器的详细内容。