首页
学习
活动
专区
工具
TVP
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往

css中选择符常用到的一些基础常识

CSS=层叠样式表。用来定义HTML内容在浏览器内的显示样式,如字体大小、颜色、字体加粗、网页排版等。

它的优势是极大的提高工作效率。

代码语法:

selector{

property:value;

}

一些特别基础的就不累述了,我们先来说一个经常看到的写法:

1、div,p,h3{ },类似这样的写法,这个说明div和p和h3这些标签是同级,后面定义的样式可以共同使用。

2、CSS的引用主要有:内部样式、行内样式、外部样式、导入样式,内部样式是用。

四种方式的优先级:

行内样式》内部样式》外部样式》导入样式。

【注】:内部样式》外部样式有一个前提:内部样式CSS样式的位置一定在外部样式的后面!

css选择符:

1、通配符:*{ }

2、类选择符:.类名称{ }

3、ID选择符:#id名称{ }

4、类型选择符(标签选择符):标签{ }

这里主要就是选择符的应用了,*通配符是用来格式化页面,另外的3个,ID有个属性就是,一个ID在一个页面只能出现一次。

关系选择符:

1、子元素选择器:父亲>儿子

2、兄弟选择器:你自己~你的兄弟

3、相邻选择器:E+F

4、包含选择器:E F

这个可以用一个

来实验一下。

p~p{

color:red;

}

这是一个标题

这是一个文字段落

这是一个文字段落

这是一个标题

这是一个文字段落

这是一个标题

这是一个文字段落

这是一个文字段落

属性选择符:

写法:

1、当前元素[属性]{ }

2、当前元素[属性=“属性值”]{ }

伪类选择符:

定义:它允许给HTML标签的某种状态设置样式。

1、元素:link:设置超级链接a在未被访问前的样式。

2、元素:visited:设置超级链接a在其链接地址已经被访问过时的样式。

3、元素:hover:设置元素在其鼠标悬停时的样式。

4、元素:active:设置元素在被用户激活(在鼠标点击与释放之间发生的事件)时的样式。

【注】

1、a:hover必须位于a:link和a:visited之后,a:active必须位于a:hover之后

2、可靠的顺序:l(link)ov(visited)e h(hover)a(active)te,即用喜欢(love)和讨厌(hate)两个词来记忆。

伪对象(伪元素)选择符:

1、元素:before{ }:设置在对象前发生的内容。用来和content属性一起使用,并且必须定义content属性。

2、元素:after{ }:设置在对象后发生的内容。用来和content属性一起使用,并且必须定义content属性。

选择器的优先级:

!important 》 内联 》 ID 》 类 》标签|伪类|属性选择器 》伪对象 》 继承 》通配符。

【注】!important要写在属性值的后面,分号的前面。比如:p{ color:red !important;}

  • 发表于:
  • 原文链接http://kuaibao.qq.com/s/20180316A0ANCB00?refer=cp_1026
  • 腾讯「腾讯云开发者社区」是腾讯内容开放平台帐号(企鹅号)传播渠道之一,根据《腾讯内容开放平台服务协议》转载发布内容。
  • 如有侵权,请联系 cloudcommunity@tencent.com 删除。

扫码

添加站长 进交流群

领取专属 10元无门槛券

私享最新 技术干货

扫码加入开发者社群
领券