CSS选择器

语法

CSS分两部分组成选择器selector和属性属性值{}

selector {
	attr: value;
	attr2: value2;
}

选择器

1.元素选择器

语法例子描述
elementp{}选择所有<p>元素
element,elementdiv,p{}选择所有

元素

element elementdiv p{}选择所有div内的p元素
element>elementdiv>p{}选择父元素为div的所有p元素,父节点
element+elementdiv+p{}选择紧跟着div的p元素,父节点
element1~element2p~ul{}选择前面有p元素的每个ul元素,兄弟节点

2.类选择器

语法例子描述
.class.intro{}选择 class=“intro” 的所有元素。
element.classp.intro{}选择p元素,class="intro"的元素
element[attribute][target]选择所有带target属性的元素
element[attribute=value]等于 注意value一定是字符串,在写程序时经常用嵌套引号,不然报错比如’name=“1”’
element[attribute~=value]包含
element[attribute|=value]以value开头

3.ID选择器

语法例子描述
#id#first选择id="first"的元素

4.其他

语法例子描述
:not(selector):not§选择非p标签的元素

属性和属性值

1.尺寸
width
height
2.背景
background-color:背景颜色
background-image:背景图像
background-position:背景图像起始位置
background-repeat:背景图像是否重复
3.文本
color:文本颜色
line-height:行高
text-align:对齐元素中的文本
4.字体
font-family:字体
font-size:尺寸
font-sytle:风格
font-weiht:粗细
5.边框
padding:内边距离
border:边框宽度
margin:外边距
6.定位
position:元素是静态的/相对的/绝对的,还是固定的
top:到上边界的距离
right:到右边界的距离
bottom:到下边界的距离
left:到左边界的距离
float:浮动
clear:清除浮动

参考文献:
http://www.w3school.com.cn/cssref/css_selectors.asp
http://www.runoob.com/cssref/css-selectors.html

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值