css选择器使用与实例

css选择器使用与实例
css选择器使用与实例

css选择器使用与实例

css选择器:

1.元素选择器

z最常见的选择器就是元素选择器: a{}

a{color:blue}

2.选择器分组

h1{},h2{}:例如

h1,h2{color:red}

*{color:blue;

margin: 0px; //内边距

padding: 0px//外边距

} //*通配符,不指定元素,则页面上的所有元素的字体color都为blue

3.类选择器详解

类选择器允许以一种独立与文档的方式来指定样式: .class{}

.div1{color:red}

结合元素选择器:a.class{}

多类选择器:.class.class{}

正常:

this is my page

.p1{color:red}//改变p1的颜色

this is my page

.p2{font-size:30px}//改变p2的大小

this is my page

.p3{font-style:italic}//改变p3的字体

使用.class.class{}

this is my page

.p1{color:red}//改变p1的颜色

this is my page

.p2{font-size:30px}//改变p2的大小

this is my page

.p1 .p2{font-style:italic}//有p1的颜色、p2的大小还有他自己的字体。【如果要使用.class.class{} 请用空格隔开】

4.ID选择器详解

ID选择器类似也类选择器,有些差别,类选择器可以定义多个,而id选择器只有一个,id选择器不能结合: #id{}

#div1{color:red}

5.属性选择器详解:[title]{}

简单的属性选择

[title]{color:apua}

hello

根据具体的属性值选择

除了选择拥有某些元素,还可以进一步缩小范围,只选择有特定属性值的元素

[href="baidu"]{color:red}

属性和属性值必须完全匹配

根据部分属性值选择

[title~="title"]{font-size:30px}//~模糊这里只要有title的属性都可以实现·

6.后代选择器:

后代选择器可以选择作为某个元素后代的元素

this is my web hellopage

p strong{color:fuchsia}

7.子元素选择器:

与后代选择器相比,子元素选择器只能选择作为某元素子元素的元素

p1>strong{color:red}

this is my web hellopage

8相邻兄弟选择器:

可选择紧接在另一个元素后的元素,且二者有相同的父元素:h1+p{}

  • itme1
  • itme2
  • itme3

li+li{font-size:50px;color:blanchedalmond;}

用@Resotrce或@Autowired注解实现注入

CSS选择器笔记

CSS选择器笔记 阮一峰整理 参考网址:456 Berea Street 一、基本选择器 实例: * { margin:0; padding:0; } p { font-size:2em; } .info { background:#ff0; } https://www.360docs.net/doc/e41998374.html, { background:#ff0; } https://www.360docs.net/doc/e41998374.html,.error { color:#900; font-weight:bold; } #info { background:#ff0; } p#info { background:#ff0; } 二、多元素的组合选择器

实例: div p { color:#f00; } #nav li { display:inline; } #nav a { font-weight:bold; } div > strong { color:#f00; } p + p { color:#f00; } 三、CSS 2.1 属性选择器 实例: p[title] { color:#f00; } div[class=error] { color:#f00; }

td[headers~=col1] { color:#f00; } p[lang|=en] { color:#f00; } blockquote[class=quote][cite] { color:#f00; } 四、CSS 2.1中的伪类 实例: p:first-child { font-style:italic; } input[type=text]:focus { color:#000; background:#ffe; } input[type=text]:focus:hover { background:#fff; } q:lang(sv) { quotes: "\201D" "\201D" "\2019" "\2019"; } 五、 CSS 2.1中的伪元素

CSS选择器

CSS选择器 1.常用选择器 常用的选择器有类型选择器和后代选择器。 1.1类型选择器 类型选择器用来选择特定类型的元素。可以根据三种类型来选择。 1)ID选择器,根据元素ID来选择元素。 前面以”#”号来标志,在样式里面可以这样定义: #demoDiv{ color:#FF0000; } 这里代表id为demoDiv的元素的设置它的字体颜色为红色。 我们在页面上定义一个元素把它的ID定义为demoDiv,如:

这个区域字体颜色为红色
用浏览器浏览,我们可以看到因为区域内的颜色变成了红色 再定义一个区域
这个区域没有定义颜色
用浏览器浏览,与预期的一样,区域没有应用样式,所以区域中的字体颜色还是默认的颜色黑色。 2)类选择器根据类名来选择 前面以”.”来标志,如: .demoDiv{ color:#FF0000; } 在HTML中,元素可以定义一个class的属性。 如:
这个区域字体颜色为红色
同时,我们可以再定义一个元素:

这个段落字体颜色为红色

最后,用浏览器浏览,我们可以发现所有class为demo的元素都应用了这个样式。包括了页面中的div元素和p元素。 上例我们给两个元素都定义了class,但如果有很多个元素都会应用这个元素,那个一个个的定义元素,就会造成页面重复的代码太多,这种现象称为“多类症”。 我们可以改成这样来定义。

这个区域字体颜色为红色
同时,我们可以再定义一个元素: 这个段落字体颜色为红色
这样,我们就只是定义了一个类,同时把样式应用到了所有的元素当中。 3)标签选择器根据标签选择 用标签选择指根据标签名来应用样式,定义时,直接用标签名。如: div{ color:#FF0000; } 我们再定义一个元素。
这个区域字体颜色为红色
这个区域字体颜色也为红色
用浏览器浏览,我们发现两个DIV元素都被应用了样式,这里不用定义id,也无需要定义class属性。 示例参见:根据标签来选择元素.html 这种选择方式非常的有用,比如你觉得锚链接的下划线不太美观,想把所有的锚链接的样式都设成无下划线形式,颜色为鲜艳的蓝色。可以这样定义。 a{ text-decoration:none; color:#00CCCC; } 1.2 后代选择器 后代选择器也称为包含选择器,用来选择特定元素或元素组的后代,后代选择器用两个常用选择器,中间加一个空格表示。其中前面的常用选择器选择父元素,后面的常用选择器选择子元素,样式最终会应用于子元素中。

CSS选择器的声明与嵌套

CSS选择器的声明与嵌套 使用CSS选择器控制HTML标记的时候,每个选择器的属性可以一次声明多个,选择器本身也可以同时声明多个。 并且,任何形式的选择器,都是合法的,标记选择器,class选择器和ID选择器都可以集体声明。 集体声明 在声明CSS选择器时,如果某些选择器的风格是完全相同的,或者部分相同,这时便可以使用集体声明的方式,将风格相同的选择器同时声明。 [html]view plain copy print? 1. 2. 3. 4.集体声明 5. 6.

17. 18. 19. 20.

集体声明h1

21.集体声明h2 22.

集体声明h3

23.

集体声明h4

24.
集体声明h5
25.集体声明p1 26.

集体声明p2 27.

集体声明p3 28. 29. 30. 全局声明 对于实际网站中,如果希望页面中所有的标记都使用同一种CSS样式,但是,又不希望逐个来集体声明,这是可以使用全局声明符号*来声明。 [html]view plain copy print? 1. 2. 3. 4.集体声明 5. 6.

结构伪类利用DOM实现元素过滤,通过DOM的相互关系来匹配特定的元素,减少文档内对class属性和ID属性的定义,使得文档更加简洁。

实验14 CSS选择器

实验14C S S选择器1.实验目的 (1)掌握在网页上应用CSS的方法。 (2)掌握CSS的基本语法规则。 (3)掌握CSS的常用选择器。 (4)掌握使用Dreamweaver定义CSS的方法。 2.实验内容 定义“网络与信息安全实验教学”网站首页的样式,如图14-1所示。 图14-1 首页效果图

2 3.实验步骤 一.创建“网络与信息安全实验教学”站点 ( 1)将“实验14”文件夹中的syjx 文件夹复制到D 盘; (2)启动Dreamweaver ,使用“站点|新建站点”命令创建“网络与信息安全实验教学”站点,并指定syjx 文件夹为“网络与信息安全实验教学”站点的本地根文件夹。 二.定义“首页”的CSS 样式。 ( 1)在Dreamweaver 中打开index.html 文件。 (2)选择“文件 | 新建”命令,新建CSS 文件,保存在syjx 文件夹中,命名为css.css 。 (3)将文档窗口切换到index.html ,单击CSS 面板上的“附加样式表”按钮,将css.css 作为外部样式表链接到index.html ,如图14-2所示。 图14-2 CSS 面板 ( 4)在css.css 文件中定义首页的样式。 b ody{ background:#f6fafd} /*主体背景颜色*/ a { font-family:"宋体"; /*字体*/(文本样式) font-size:15px; /*文字大小*/ color:#FFFFFF; /*白色*/ text-decoration:none; /*无下划线*/ } .menu{font-weight:bold;} /*加粗*/(导航菜单样式) .new_title{ (标题样式) font-family: "宋体"; font-size: 14px; font-style: normal; color: #FFFFFF; font-weight: bold; 样

CSS选择器的权重与优先规则

CSS选择器的权重与优先规则 2011-06-26 我们在使用CSS对网页元素定义样式时经常会遇到这种情况:要对一般元素应用一般样式,然后在更特殊的元素上覆盖它们。那么我们怎么样来保证我们所新定义的元素样式能覆盖目标元素上原有的样式呢? 在CSS中,会根据选择器的特殊性来决定所定义的样式规则的次序,具有更特殊选择器的规则优先于具有一般选择器的规则,如果两个规则的特殊性相同,那么后定义的规则优先。 那么,又怎么来计算选择器的特殊性呢?下面这张图介绍了特殊性的计算方法: 我们把特殊性分为4个等级,每个等级代表一类选择器,每个等级的值为其所代表的选择器的个数乘以这一等级的权值,最后把所有等级的值相加得出选择器的特殊值。 4个等级的定义如下: 1.第一等:代表内联样式,如: style=””,权值为1000。 2.第二等:代表ID选择器,如:#content,权值为100。 3.第三等:代表类,伪类和属性选择器,如.content,权值为10。

4.第四等:代表类型选择器和伪元素选择器,如div p,权值为1。 例如上图为例,其中#NAV为二等选择器,.ACTIVE为三等选择器,UL、LI和A为四等选择器。则整个选择器表达式的特殊性的值为1*100+1*10+3*1=113 下面是一些计算示例:

注意:通用选择器(*),子选择器(>)和相邻同胞选择器(+)并不在这四个等级中,所以他们的权值都为0。 我们再来看一个具体的例子:假如有以下组样式规则,你能判断出HTML代码中的两个标题是什么颜色吗? 01 #content div#main-content h2{ 02 color:red; 03 } 04 05 #content #main-content>h2{ 06 color:blue 07 } 08 body #content div[id="main-content"] h2{ 09 color:green; 10 } 11 12 #main-content div.paragraph h2{ 13 color:orange; 14 } 15 #main-content [class="paragraph"] h2{ 16 color:yellow; 17 } 18 div#main-content div.paragraph h2.first{ 19 color:pink; 20 } 以下是HTML代码:

HTML5开发培训CSS选择器及文字段落属性和背景属性和列表属性(上)(DOC)

HTML5开发培训CSS选择器及文字段落属性和背景属性和列表属性(上) 我们已经讲了一部分选择器了,今天还要继续讲一些选择器,以便我们能更快的找到页面中的元素并修饰他的样式。另外我们看到页面的标签还需要修饰其它的样式,比如背景图像,文字间距等,所以我们还讲些样式。通过以下几点介绍: ?关系选择器 ?动态伪类选择器 ?结构性伪类选择器 ?文字属性 ?段落属性 ?背景属性 ?列表属性 好了,我们先来看一下关系选择器 一、关系选择器 1.E F:后代选择器,找到页面中相应的的子元素及孙子及重孙子元素,因为这些元素都是后代元素,我们把标签的第一层嵌套的元素叫子元素,再一层嵌套及以后嵌套的元素及子元素都叫后代元素。(当然也是相对的)。后代选择器可以是我们第三章讲过的所有的基本选择器中的一种,我们先理一下元素之间的层次关系。

相关的内容我是div的孙子元素(后代元素),但是我也是p的儿子,这就体现出“相对”了 我是div的儿子,并且我是p紧邻的兄弟元素,我还是p后面的所有的兄弟元素 我是p后面的所有的兄弟元素
好了,了解所有元素之间的关系后,我们就可以通过相关的选择器来改变他们的样式了。 代码:

相关的内容我是div的孙子元素(后代元素) 我是div的儿子 我是div的儿子
2.E>F子元素选择器找到页面中相应元素的子元素 代码:

H5之Css基础(1)基础语法与选择器;

Css层叠样式表; 多个属性通过分号隔开,多个选择器用逗号隔开进行分组; h1,h2,h3{?color: blue;?font-size: 50px;?} 选择器分组h1,h2,h3 选择器继承:子标签如果没有设置样式,它会继承父标签的样式,h1,h1有自己的样式,而a,p继承了body的样式; ?

hahh

?

ggg

哈安徽?hello ? ==================================== h1,h2{?color: blue;?font-size: 50px;?} body{?color:red ;?} 派生选择器:li strong,strong为派生选择器; ?标签hello css ?
    ?
  • li标签
  • ?
? =================================== li strong{?color: red;?}?strong?{?color: blue;?} id选择器:#(div 使用id选择器较多) ?

标签hello css ? ============================ #pid {?color: red;?} 派生选择器和ID选择器一起使用 ?

标签hello css百度 ?标签hello css百度 ?.pclass a{?color: red;?} a标签中字体颜色发生变化,p标签颜色不发生变化 .pclass {?color: red;?}?p标签颜色发生变化,a标签颜色不发生变化, 1属性选择器2属性和值选择器; ???? Title????

属性选择器 ?

属性和值选择器 ??

CSS3选择器

基本涵盖了CSS 2和CSS 3的所有规定。 ============================================================= 参考网址:456 Berea Street 一、基本选择器 实例: * { margin:0; padding:0; } #footer>*{ margin:0; padding:0; } p { font-size:2em; } .info { background:#ff0; } https://www.360docs.net/doc/e41998374.html, { background:#ff0; } https://www.360docs.net/doc/e41998374.html,.error { color:#900; font-weight:bold; } #info { background:#ff0; } p#info { background:#ff0; } 实例: div p { color:#f00; } #nav li { display:inline; } #nav a { font-weight:bold; } div > strong { color:#f00; } p + p { color:#f00; }

三、CSS 2.1 属性选择器 实例: p[title] { color:#f00; } div[class=error] { color:#f00; } td[headers~=col1] { color:#f00; } p[lang|=en] { color:#f00; } blockquote[class=quote][cite] { color:#f00; } 四、CSS 2.1中的伪类 实例: p:first-child { font-style:italic; } input[type=text]:focus { color:#000; background:#ffe; } input[type=text]:focus:hover { background:#fff; } q:lang(sv) { quotes: "\201D" "\201D" "\2019" "\2019"; } 五、CSS 2.1中的伪元素

css基础知识--四种样式表及六种选择器

div:division。理解为一个盆,里面可以放很多盘子。即

...
之间相当于一个容器,可以容纳段落、标题、表格、图片、乃至章节、搞要和备注等各种html元素。 注意: 标签之间不能嵌套div标签。通常将p标签放于div标签内 1、内联式样式表:在标签内部写样式代码。方便但不灵活 2、嵌入式样式表:一般在head标签内。以这种方式,可以控制整个网页里的某个标签的样式 3、处部样式表:单独将样式定义成一个文件,然后在需要引用样式的文件内调用样式文件。可供所有需要的文件引用,减少重复性工作 一般在head标签内写上: 4、输入样式表:在一个css文件中引入另一个css文件。比如: 在a.css文件中写上@import url(b.css); 表示在a.css文件中引入b.css 文件中的样式。 可以理解为级联引用 样式规则的选择器(大括号前面): 一、html selector:直接在大括号前写html的标签。 格式p {...} p标签的选择器样式应用 二、class selector:在标签中定义class属性(class的属性值可以重复),然后在样式中引用class属性的值。 格式: p.one{...} p.two{...}

aaaaaaaaaa

bbbbbbbbbbb 如果写成: .one{...} .two{...}

bbbbbbbbbbb

bbbbbbbbbbb
表示任何标签内,class属性的值为one或two 的,都可以应用对应的样式 三、id selector:在标签中定义id属性(每个标签都可以有id属性,但一个页面中的id值必须唯一),然后在样式中引用id属性的值。一般

css选择器使用与实例

css选择器使用与实例 css选择器: 1.元素选择器 z最常见的选择器就是元素选择器: a{} a{color:blue} 2.选择器分组 h1{},h2{}:例如 h1,h2{color:red} *{color:blue; margin: 0px; //内边距 padding: 0px//外边距 } //*通配符,不指定元素,则页面上的所有元素的字体color都为blue 3.类选择器详解 类选择器允许以一种独立与文档的方式来指定样式: .class{}

.div1{color:red} 结合元素选择器:a.class{} 多类选择器:.class.class{} 正常:

this is my page .p1{color:red}//改变p1的颜色

this is my page .p2{font-size:30px}//改变p2的大小

this is my page .p3{font-style:italic}//改变p3的字体 使用.class.class{}

this is my page .p1{color:red}//改变p1的颜色

this is my page .p2{font-size:30px}//改变p2的大小

this is my page .p1 .p2{font-style:italic}//有p1的颜色、p2的大小还有他自己的字体。【如果要使用.class.class{} 请用空格隔开】 4.ID选择器详解 ID选择器类似也类选择器,有些差别,类选择器可以定义多个,而id选择器只有一个,id选择器不能结合: #id{}

#div1{color:red} 5.属性选择器详解:[title]{} 简单的属性选择 [title]{color:apua}

hello 根据具体的属性值选择 除了选择拥有某些元素,还可以进一步缩小范围,只选择有特定属性值的元素 [href="baidu"]{color:red} 属性和属性值必须完全匹配

CSS3学习之常见的4种伪元素选择器

在线学习好工作https://www.360docs.net/doc/e41998374.html,/ CSS3学习之常见的4种伪元素选择器 在CSS3开发中,常见的伪元素选择器主要有4种,下面就和大家一起来扒一扒。 first-line伪元素选择器 我们在这个后面接着来写,我们写一个段落 在CSS中,主要有四个伪元素选择器
first-line伪元素选择器用于向某个元素中的第一行文字使用样式。 我们所说的这个first-line,这个选择器是需要向某个元素中的第一行文字使用样式。因为这个br它是换行,也就是说我们使用first-line的话它会,对我们第一行文字进行一个样式,我们来看一下对不对 p:first-line{ color: #f60; } 第一行我们给它一个橙色 第一行元素p的第一行文字,给它一个橙色,这就是我first-line的使用方法。 first-letter伪元素选择器

就拿我们这里的来测试,我们这样来 p:first-letter{ color: green; font-size: 24px; } 第一个文字我们给它一个绿色,然后呢给它加一个字体,我们看一下。 每一个元素中的第一个字我们都设为了绿色,这个字呢还很大很大。 after伪元素选择器 我们在这里新建一个ul在这个ul里面呢有这个很多的链接。

  • 伪类选择器
  • 伪类选择器
  • 伪类选择器
  • 伪类选择器
  • 伪类选择器
  • 伪类选择器
  • 伪类选择器
  • 我们在这个链接之前给它加入一个符号,我们看一下怎样来实现。那么在加入之前我们先来看一下是什么样的一个样式。