css通知选择器,css基本选择器

1.基本选择器

/*元素选择器*/

ul {

padding: 0;

margin: 0;

width: 450px;

border: 1px dashed #666;

padding: 10px 5px;

}

ul:after { /*子块撑开父块*/

content:''; /*在子元素尾部添加空内容元素*/

display: block; /*并设置为块级显示*/

clear:both; /*清除二边的浮动*/

}

li {

list-style: none; /*去掉默认列表项样式*/

float: left; /*左浮动*/

width: 40px; /*设置宽度*/

height: 40px; /*设置高度*/

line-height: 40px; /*文本垂直居中*/

text-align: center; /*文本水平居中*/

border-radius: 50%; /*设置边框圆角*/

background: skyblue; /*背景色天蓝*/

margin-right: 5px; /*每个球之间的右外边距*/

}

/*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; /*亮橙色*/*/

}

• 1
• 2
• 3
• 4
• 5
• 6
• 7
• 8
• 9
• 10