CSS基础知识点(二)

在这一篇中,主要总结一下CSS中的选择器。

CSS中的选择器主要包括:

  • 派生选择器:通过依据元素在其位置的上下文关系来定义样式。包括后代选择器,子元素选择器,相邻兄弟选择器。
  • id选择器:可以为标有特定 id 的 HTML 元素指定特定的样式。
  • 类选择器:可以为class的 HTML 元素指定特定的样式。
  • 属性选择器:为拥有指定属性的 HTML 元素设置样式,而不仅限于 class 和 id 属性。

(1) 选择器分组:可以将任意多个选择器分组在一起,中间以 ‘,‘ 隔开。

  例:body, h2, p, table, th, td, pre, strong, em { color : gray ; }

(2) 类选择器的几种用法

  • 与元素选择器结合:

   例:p.important {color:red;}

    匹配 class为 important 的所有 p 元素,但是其他任何类型的元素都不匹配。

  • 多类选择器:(IE7之前不支持)

   例:.important.warning {background:silver;}

    匹配同时具有这两个class的元素。

(3) 属性选择器:根据元素的属性匹配元素

  • 简单属性选择

    例:a[title] {color:red;}  只对有 title 属性的 a 元素应用样式。

  • 根据具体属性值选择

    例:input[name=‘basketball‘] 只选择有特定属性值的元素。

  • 属性与属性值完全匹配

   例:对于<p class="important warning">This paragraph is a very important warning.</p>,

     使用 p[class="important warning"] {color: red;}

  • 根据部分属性值匹配

   例:对于<p class="important warning">This paragraph is a very important warning.</p>,

     使用 p[class~="important"] {color: red;} 根据属性值中的词列表的某个词进行选择。

  • 子串匹配属性选择器

    input[name^=‘foot‘]:匹配给定的属性是以某些值开始的元素。

    input[name$=‘ball‘]:匹配给定的属性是以某些值结尾的元素。

    input[name*=‘sket‘]:匹配给定的属性是以包含某些值的元素。

(4) 后代选择器

  例:h1 em {color:red;},匹配h1后代中所有em

  例:h1 > strong {color:red;},选择只作为 h1 元素子元素的 strong 元素。

(5) 相邻兄弟选择器

  例:h1 + p {margin-top:50px;},匹配相同父元素下,h1之后出现的p元素。

(6) 伪类

   如a链接的 :visited, :hover等,input的:focus, :checked, :disabled 等,:first-child, :first-of-type, :nth-of-type,  nth-child, :before, :after 等。

时间: 2024-10-06 15:14:21

CSS基础知识点(二)的相关文章

HTML/CSS基础教程 二

表 表是十分有用的,用它存储表状的数据更易于阅读.当你想用行列来显示信息时---你猜到了,<table>标签正是你需要的,有许多和表有关的标签,它们都以<table>开始. 表就是将一组数据用行列的形式排列,我们用<tr>标签创建一个表行(table row),<td>标签表示表数据(table date) <!DOCTYPE html> <html> <head> <title>Table Time</

两天学会css基础(二)

接上一篇博客,还有css中的两个重要知识点没有说到,就是元素的浮动与定位. 第三部分:元素的浮动与清除 这部分的内容之前的博客已总结过.请查看css中的浮动与三种清除浮动的方法这篇文章. 浮动在网页中也用的和普遍,特别要注意清除浮动的方法. 第四部分:元素的定位 元素的定位在实际开发中会经常用到,特别是涉及到精确定位的时候. 默认情况下元素的position属性值为static static: 对象遵循常规流.此时4个定位偏移属性不会被应用. relative: 对象遵循常规流,并且参照自身在常

HTML5入门(CSS样式-------------------(CSS基础知识点----------------------------))

CSS继承性+层叠性+盒子+浮动 一.CSS继承性 eg:                 <style>                               div{                                      color: pink;                                      font-size: 30px;                                      width: 500px;      

CSS基础(二)

html负责结构,css负责样式,js负责行为. css写在head标签里面,容器style标签. 先写选择器,然后写大括号,大括号里面是样式. 1 <style type="text/css"> 2 body{ 3 background-color: pink; 4 } 5 </style> 常见属性: 1 h1{ 2 color:blue; 3 font-size: 60px; 4 font-weight: normal; 5 text-decoration

html+css基础知识点

以下是自己平时学习累计的,比较杂,欢迎大家指正和补充 一.css重置(css  reset) 这是我简单整理的,并不全,大家可以根据自己需要继续补充: body,p,h1,h2,h3,h4,h5,h6,dl,dd{margin:0;font-size:12px;}ol,ul{margin:0;padding:0;list-style:none;}a{text-decoration:none;}img{border:none;} 不用*{margin:0;padding:0:}是因为:div没有内

前端之路——CSS基础(二)

一. css介绍 什么是css:就是网页的布局和渲染效果 什么是查找标签:就是操作标签. 如何进行查找标签:将需要操作的标签查找方法写在style标签里面,在这个里面之姐就可以操作,对相对应的标签进行布局和渲染   style标签:里面写的都是css代码,进行操作标签,使标签的展现更加美观. 二.css的引入方式 1 行列式:直接在标签的里面加上style属性,后面写上操作 <p style="background-color: rebeccapurple">hello y

css基础语法二(常用文本与背景属性)

[CSS常用文本属性] 1. 字体.字号类:① font-weight: 字体粗细. bold-加粗.normal-正常.lighter-细体 也可以使用100-900数值,400表示normal,700表示bold ② font-style: 字体样式. italic-倾斜.normal-正常 ③ font-size: 字号. 可以写px单位,也可以写% 200%表示浏览器默认大小(16px)的两倍=32px ④ font-family: 字体系列(字体族). >>> 可以直接写字体名

CSS基础知识点小计1-选择符权重优先级及两列布局中一列自适应,另一列固定宽度

1:标有!important标记的样式 2:HTML编辑的样式 3:用户设置的样式 4:浏览器默认的样式 一列自适应,另一列固定宽度,个人认为如下方法比较好用 <!DOCTYPE html> <html> <head> <title> html5 </title> <link rel="stylesheet" type="text/css" href="css.css"> &

CSS基础知识点(一)

CSS(Cascading Style Sheets)全称为:层叠样式表. 1.HTML元素类型 (1) 内联元素(inline):可以理解为“文本模式”,即从左到右顺序显示,不单独换行.常用的内联元素有:a, img, input, select, lable, span, textarea 等,和一些文本标记标签,如:small, big, strong, em, i, b(加粗), sub(下标), sup(上标), u(下划线)等. (2) 块级元素(block):单独一行,没有特殊定位